HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Text" content="text/html"; charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style-ver2.css">
<title>美站库-ver2</title>
</head>
<body>
<div id="header">
<div id="top" class="auto">
<div id="logo"></div>>
<form id="search">
<input type="text" name="text" id="text"></input>
<input type="submit" name="submit" value="搜索" id="submit"></input>
</form>
<p>炫美网站大全...</p>
</div>
<div id="nav" class="auto">
<ul>
<li>
<a href="index-ver2.html">首页</a>
</li>
<li>
<a href="submit.html">提交站点</a>
</li>
</ul>
</div>
<div id="banner" class="auto">
<div id="left"></div>
<div id="right">
<dl>
<dt>炫美网站,尽在美站库</dt>
<dd>本网站收集互联网上各种炫美网站......</dd>
<dd class="more">
<a href="#" value="more">查看更多</a>
</dd>
</dl>
</div>
</div>
</div>
<span style="white-space:pre"> </span><div id="main" class="auto">
<div id="main1">
<div id="wrap">
<div id="wrap-left">
<div id="first">
<h2>美站库</h2>
<p>美站库是我的第一个html实战项目</p>
</div>
<div id="second">
<h2>炫美站点</h2>
<ul>
<li>
<p>Professional</p>
</li>
<li>
<p>Professional</p>
</li>
<li>
<p>Professional</p>
</li>
<li>
<p>Professional</p>
</li>
<li>
<p>Professional</p>
</li>
</ul>
</div>
<div id="third" class="more">
<a href="##">查看更多</a>
</div>
</div>
<div id="wrap-right">
<h2>酷文</h2>
<div id="column1">
<dl>
<dt>
<a href="#">随便写点</a>
</dt>
<dd>
随便写随便写的随便写的随便写的随便写的随便写的的...
</dd>
<dt>
<a href="#">随便写点</a>
</dt>
<dd>
随便写随便写的随便写的随便写的随便写的随便写的的...
</dd>
<dt>
<a href="#">随便写点</a>
</dt>
<dd>
随便写随便写的随便写的随便写的随便写的随便写的的...
</dd>
</dl>
</div>
<div id="column2">
<dl id="bird">
<dt>
<a href="##">随便写点</a>
</dt>
<dd>
随便写点
</dd>
</dl>
<dl id="wifi">
<dt>
<a href="##">随便写点</a>
</dt>
<dd>
随便写点
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>
<a href="#">首页</a>
<a href="#">酷文</a>
<a href="#">美站</a>
<a href="#" id="last">联系我们</a>
</p>
<p>
"Copyright (c) 2014 | "
<a href="#">私房库</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Text" content="text/html"; charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style-ver2.css">
<title>美站库-ver2</title>
</head>
<body>
<div id="header">
<div id="top" class="auto">
<div id="logo"></div>>
<form id="search">
<input type="text" name="text" id="text"></input>
<input type="submit" name="submit" value="搜索" id="submit"></input>
</form>
<p>炫美网站大全...</p>
</div>
<div id="nav" class="auto">
<ul>
<li>
<a href="index-ver2.html">首页</a>
</li>
<li>
<a href="submit.html">提交站点</a>
</li>
</ul>
</div>
<div id="banner" class="auto">
<div id="left"></div>
<div id="right">
<dl>
<dt>炫美网站,尽在美站库</dt>
<dd>本网站收集互联网上各种炫美网站......</dd>
<dd class="more">
<a href="#" value="more">查看更多</a>
</dd>
</dl>
</div>
</div>
</div>
<div id="main" class="auto">
<div id="main1">
<div id="wrap">
<div id="wrap-left">
<p id="tip">如果您感觉您的网站够炫美,可以提交给我们!</p>
<form action="#" name="form1">
<label for="label1">您的姓名:</label>
<input type="text" id="label1" name="name" size="30"></input>
<label for="label2">您的联系方式:</label>
<input type="text" id="label2" name="name" size="30"></input>
<label for="label3">站点网址:</label>
<input type="text" id="label3" name="name" size="30"></input>
<label for="label4">站点介绍:</label>
<textarea id="label4" rows="8" cols="50"></textarea>
<br>
<input type="reset" id="reset" class="butt"></input>
<input type="submit" id="submit" class="butt"></input>
</form>
</div>
<div id="wrap-right">
<h2>酷文</h2>
<div id="column1">
<dl>
<dt>
<a href="#">随便写点</a>
</dt>
<dd>
随便写随便写的随便写的随便写的随便写的随便写的的...
</dd>
<dt>
<a href="#">随便写点</a>
</dt>
<dd>
随便写随便写的随便写的随便写的随便写的随便写的的...
</dd>
<dt>
<a href="#">随便写点</a>
</dt>
<dd>
随便写随便写的随便写的随便写的随便写的随便写的的...
</dd>
</dl>
</div>
<div id="column2">
<dl id="bird">
<dt>
<a href="##">随便写点</a>
</dt>
<dd>
随便写点
</dd>
</dl>
<dl id="wifi">
<dt>
<a href="##">随便写点</a>
</dt>
<dd>
随便写点
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>
<a href="#">首页</a>
<a href="#">酷文</a>
<a href="#">美站</a>
<a href="#" id="last">联系我们</a>
</p>
<p>
"Copyright (c) 2014 | "
<a href="#">私房库</a>
</p>
</body>
</html>
CSS:部分
* {
margin:0;
padding:0;
}
a,p,dl,dt,dd,ul,li{
font-size:1em;
}
body{
font-size:1em;
color:#4A3030;
}
a {
text-decoration:none;
}
li{
list-style-type:none;
}
.more a{
background:url('../images/default.png');
display:block;
width:103px;
height:27px;
font-size:0.8em;
color:#fff;
text-align:center;
line-height:27px;
}
.more a:hover{
background:url('../images/d_hover.png');
}
#header{
background:url('../images/top_bg.jpg') repeat-x;
height:452px;
}
#header .auto{
margin:0 auto;
width:960px;
}
#top {
height:98px;
}
#nav {
height:50px;
}
#header #logo{
background: url('../images/logo.png') no-repeat;
width:291px;
height:62px;
background-position:0 20px;
float:left;
}
#header #search{
float:right;
margin:30px 0 0 0 ;
}
#header #text{
width:180px;
height:1.4em;
font-size:1em;
color:#4D3A3A;
background:black;
border:#0b0e10 1px solid;
}
#header #submit{
width:80px;
height:1.7em;
cursor:pointer;
}
#top p{
/* float:left; */
display:block;
clear:both;
font-size:1em;
color:#F5EFEF;
margin:50px 0 0 200px;
}
#header #nav li{
float:left;
}
#header #nav li a{
display:block;
width:103px;
height:27px;
color:black;
font-size:13px;
font-weight:bold;
text-align:center;
line-height:27px;
margin:13px 20px 0 0;
}
#header #nav li a:hover{
background:url('../images/hover.png');
color:white;
}
#header #banner{
background:url('../images/runplay_bg.jpg');
width:980px;
height:300px;
}
#banner #left{
background:url('../images/description.jpg');
width:300px;
height:150px;
float:left;
margin: 40px 0 0 0;
}
#banner #right{
float:right;
margin:40px 300px 0 0 ;
}
#banner #right dt{
font-size:1.5em;
color:#FFFFFF;
}
#banner #right dd{
color: #fff;
margin:15px 0 0 0;
}
#main{
background:url('../images/main_top_bg.jpg');
background-repeat:repeat-x;
}
#main1{
background:url('../images/main1_bottom_bg.jpg');
/* height:160px; */
background-repeat:repeat-x;
background-position: 0 bottom;
}
#wrap{
width:920px;
height:850px;
margin:0 auto;
}
#wrap p, dd{
font-size:0.8em;
}
#wrap-left {
width:620px;
height:800px;
float:left;
}
#wrap-left h2{
font-size:1.5em;
font-weight:normal;
margin:25px 0 20px 0;
}
#wrap-left #second li{
background:url('../images/image_04.jpg') no-repeat;
background-color:#F5F1F1;
width:270px;
height:130px;
background-position:5px 5px;
padding:5px 5px 50px 5px;
margin:15px 25px 0 0;
float:left;
}
#wrap-left #second li p{
font-size:1em;
font-weight:bold;
margin-top:140px;
}
#wrap #tip{
font-size:1.3em;
color:#000;
margin:20px 0 0 0;
}
#wrap-left form{
display:block;
}
#wrap-left form label{
display:block;
margin:20px 0 0 0;
}
#wrap-left .butt{
background:url('../images/d_hover.png') no-repeat;
width:103px;
height:27px;
color:white;
cursor:pointer;
border:none;
margin:5px 155px 0 0;
}
#wrap-right{
width:240px;
height:850px;
float:right;
}
#wrap-right h2{
margin:25px 0 30px 0;
font-weight:normal;
}
#wrap-right #column1 dd{
font-size:0.6em;
margin:5px 0 15px 0;
padding-bottom:5px;
border-bottom:1px dashed #ccc;
}
#wrap-right #column1 dt a{
font-size:0.6em;
color:blue;
}
#wrap-right #column2 dl{
margin:30px 0 40px 0;
height:64px;
font-weight:bold;
color:#333;
}
#wrap-right #column2 dt a{
font-size:1.5em;
color:black;
}
#wrap-right #column2 dd{
font-size:0.8em;
margin-top:5px;
}
#wrap-right #column2 #bird {
background:url('../images/twitter.png') no-repeat;
background-position:top right;
}
#wrap-right #column2 #wifi{
background:url('../images/rss.png') no-repeat;
background-position:top right;
}
#wrap-left #third{
clear:both;
float:left;
margin:25px 0 0 0;
}
#footer{
background:url('../images/footer_bg.jpg') no-repeat;
height:100px;
background-repeat:repeat-x;
}
#footer p{
font-size:0.8em;
color:white;
text-align:center;
padding-top: 20px;
}
#footer p a{
font-size:0.8em;
color:white;
padding:20px 25px 0 0 ;
text-decoration:underline;
}