超简单！！！来学html和JavaScript

最新推荐文章于 2024-11-04 09:11:09 发布

锁住子锁不住

最新推荐文章于 2024-11-04 09:11:09 发布

阅读量147

点赞数 3

分类专栏：单页html模板文章标签： html javascript 前端学习模板

本文链接：https://blog.csdn.net/qqhxmdq/article/details/137275640

版权

单页html模板专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用纯html写个个人博客！首先得先找个模板！

一个优秀模板所应该具有的素质？

简单？

仅仅一个html页面，完全没有乱七八糟，保证学的明明白白。

漂亮？

该有的内容一个不少！

一个完美的个人博客！

那么，这样的模板到底有什么用呢？

1. 改一改后台显示内容，换成自己的信息。那，它就是一个美呆了的个人简历。大厂，投，投，投！

2. 程序员可以自己加些后台，做个个人简历制作网站，圆自己一个站长梦，是不是还能增加点睡后收入？

3. 初学程序员的码农小朋友们，可以学学网页制作，在这个框架横行的世代，学好基础是一件多么可贵的事情。比如我们的时间轴，统计图，都可以学它一学！

我们看看代码吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="author" content="xxxxxx.com (www.xxxxxx.com)" />
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	<title>Nautica</title>
</head>
<body>
	<div id="header">
		<div class="wrap">
			<h1 id="logo"><a href="#">NAUTICA</a></h1>
			<p><br />Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
			<ul id="menu">
				<li><a class="current" href="#">Home</a></li>
				<li><a href="#">Underwater Gear</a></li>
				<li><a href="#">Guides</a></li>
				<li><a href="#">Equipment</a></li>
				<li><a href="#">Videos</a></li>
				<li><a href="#">FAQ</a></li>
				<li><a href="#">Become a Partner</a></li>
				<li><a href="#">About Us</a></li>
				<li class="last"><a href="#">Contact Us</a></li>
			</ul>
		</div>
	</div>
	<div class="wrap">
		<div id="main">
			<div class="l">
				<h2>Lifestyle</h2>
				<h3>Duis aute irure dolor in reprehenderit</h3>
				<img src="images/img1.jpg" alt="Img" />
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p><a href="#">&raquo; Read More</a></p>
			</div>
			<div class="r">
				<h2>Sed ut perspiciatis unde omnis</h2>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<h2>Nemo enim ipsam voluptatem</h2>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<h2>Sed ut perspiciatis unde omnis</h2>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		
			<div class="line"></div>
		
			<div class="l">
				<h2>Nemo enim ipsam voluptatem</h2>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div class="r">
				<h2>Nemo enim ipsam voluptatem</h2>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
			</div>
		</div>
		
		<div id="side">
			<ul>
				<li><a href="#">Esse cillum dolore</a><br />Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
				<li><a href="#">Esse cillum dolore</a><br />Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
				<li><a href="#">Esse cillum dolore</a><br />Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
				<li><a href="#">Esse cillum dolore</a><br />Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
			</ul>
		</div>
	
		<div id="footer">
			<ul>
				<li class="title">Item group #1</li>
				<li><a href="#">Ut enim ad minim</a></li>
				<li><a href="#">Ut enim ad minim</a></li>
				<li><a href="#">Ut enim ad minim</a></li>
			</ul>
			<ul>
				<li class="title">Item group #2</li>
				<li><a href="#">Ut enim ad minim</a></li>
				<li><a href="#">Ut enim ad minim</a></li>
				<li><a href="#">Ut enim ad minim</a></li>
			</ul>
			<p>Design: Luka Cvrk - <a href="http://www.xxxxxx.com" title="Free Web Templates">xxxxxx.com</a></p>
		</div>
	</div>	
</body>
</html>

下面是css

/*
	
)
	
*/

*{margin:0;padding:0;}:focus,:active {outline:0}ul,ol{list-style:none}img{border:0} 
body { font: .74em Sans-Serif; color: #444; background: #f4f4f4; line-height: 1.6em; }
a { text-decoration: none; color: #008080; }
p  { margin: 0 0 15px; }
.wrap { margin: 0 auto; width: 960px; }

#header { height: 160px; background: #080808 url(../images/bg.jpg) no-repeat center top; color: #ccc; margin: 0 0 30px; }
#header p { float: right; margin: 20px 0 0; }

#logo { float: left; margin: 40px 20px 50px 0; color: #fff; letter-spacing: .2em; font-size: 1.9em; }
#logo a { color: #fff; }

h1 { letter-spacing: -0.04em; font-size: 1.8em; text-shadow: 1px 1px 1px #000; }
h2 { font-size: 1.4em; text-shadow: 1px 1px 1px #fff; margin: 0 0 10px; color: #008080; }
h3 { font-size: 1.2em; margin: 0 0 6px; }

#menu { clear: both; padding: 13px 0 0; }
#menu li { display: inline; font-size: 1.2em; }
#menu li a { float: left; padding: 0 22px 0 0; margin: 0 22px 0 0; color: #ddd; border-right: 1px solid #505052; }
#menu li.last a { border: 0; padding: 0; }
#menu li a:hover { color: #fff; }
#menu li a.current { font-weight: bold; color: #fff; }

#main { clear: left; float: left; width: 690px; } 

.l { float: left; width: 310px; }
.r { float: right; width: 330px; }
.l img, .r img { float: left; margin: 0 13px 5px 0; border: 2px solid #fff; }

.line { clear: both; border-bottom: 1px dotted #ccc; padding: 10px 0 0; margin: 0 0 20px; }

#side { float: right; width: 225px; color: #808080; background: #fff; padding: 11px; margin: 0 0 20px; }
#side a { color: #444; }
#side li { padding: 0 0 10px; }
	
#footer { clear: both; height: 120px; padding: 20px 0; color: #888; border-top: 1px dotted #ccc; }
#footer ul { float: left; width: 140px; }
#footer ul li { padding: 0 0 3px; }
#footer p { float: right; width: 400px; text-align: right; }

那么，这么优雅的模板完整版，在哪儿下载呢？

https://download.csdn.net/download/qqhxmdq/89071759

一起来快乐的玩耍吧！！！