美站库代码

最新推荐文章于 2022-08-25 08:58:00 发布

放风筝的小小马

最新推荐文章于 2022-08-25 08:58:00 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/hexon804/article/details/51037882

版权

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>

index.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;

}