HTML综合练习题

HTML综合练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>t3</title>
	<link rel="stylesheet" href="./yh.css" />
	<style>
		#container{
			width: 1002px;
			margin: 0 auto;
		}
		#header{
			height: 128px;
			border:1px solid #eee;
			background: url(./imgs/titlebg.png);
		}
		#nav ul{
			height: 110px;

		}
		#nav li{
			float: left;
			width: 90px;
		}
		#nav a{
			text-align: center;
			display: block;
			font-family: '微软雅黑';
			font-size: 16px;
		}
		#nav a:hover{
			background: url(./imgs/nav_hover.png);
		}
		#left{
			width: 680px;
			height: 600px;
			border: 1px solid #eee;
			float: left;
		}
		#right{
			width: 300px;
			height: 600px;
			border: 1px solid #eee;
			float: right;
		}
		#footer{
			height: 120px;
			border: 1px solid #eee;
			background: #eee;
		}
		.clear_float{
			width: 0;
			height: 0;
			clear: both;
		}
		.subtitle{
			height: 49px;
			background: #eee;
		}
		.subtitle img{
			float: left;
			margin: 12px 10px;
		}
		.subtitle h1{
			float: left;
			font-size: 16px;
			margin: 10px 0px 10px 1px;
		}
		.subtitle a{
			float: right;
		}
		.four{
			width: 335px;
			height: 270px;
			float: left;
			border: 1px solid #eee;
		}
		.four img{
			width: 200px;
			float: left;
			padding: 3px;
			background: white;
		}
		.four li{
			float: left;
			
			/*padding-left: 19px;*/
			height: 24px;
		}
		.four a{
			background: url(./imgs/point_focus.png) no-repeat;
			font-size: 16px;
			font-family: '微软雅黑';
			padding-left: 18px;

		}
		#art ul{
			margin-top: 1px;
			padding-top: 10px;
			height: 200px;
			border: 1px solid #eee;
		}
		#art li{
			height: 20px;
			
		}
		#art a{
			background: url(./imgs/point_focus.png) no-repeat;
			padding-left: 18px;
			font-family: '微软雅黑';
			font-size: 16px;
		}
		#footer ul{
			height: 30px;
			border: 1px solid #eee;
			margin-top: 10px;
			/*margin-right: 10px;*/
		}
		#footer li{
			float: left;
			margin-right: 15px;
		}
		#footer a{
			font-family: '微软雅黑';
			font-size: 16px;
		}
		#footer address{
			font-family: '微软雅黑';
			font-size: 16px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<img src="./imgs/logo.png" alt="" />
			<div id="nav">
				<ul>
					<li><a href="#">导航1</a></li>
					<li><a href="#">导航2</a></li>
					<li><a href="#">导航3</a></li>
					<li><a href="#">导航4</a></li>
					<li><a href="#">导航5</a></li>
					<li><a href="#">导航6</a></li>
				</ul>
			</div>
		</div>
		<div id="main">
			<div id="left">
				<div class="subtitle">
					<img src="./imgs/point.png" alt="" />
					<h1>核心业务</h1>
					<a href="#">More&gt&gt</a>
				</div>
				<div class="four">
					<h2>电子商务网站1</h2>
					<img src="./imgs/2.jpg" alt="" />
					<ul>
						<li><a href="#">随便吧无聊啊1</a></li>
						<li><a href="#">随便吧无聊啊2</a></li>
						<li><a href="#">随便吧无聊啊3</a></li>
						<li><a href="#">随便吧无聊啊4</a></li>
						<li><a href="#">随便吧无聊啊5</a></li>
						<li><a href="#">随便吧无聊啊6</a></li>
					</ul>
				</div>
				<div class="four">
					<h2>电子商务网站1</h2>
					<img src="./imgs/2.jpg" alt="" />
					<ul>
						<li><a href="#">随便吧无聊啊1</a></li>
						<li><a href="#">随便吧无聊啊2</a></li>
						<li><a href="#">随便吧无聊啊3</a></li>
						<li><a href="#">随便吧无聊啊4</a></li>
						<li><a href="#">随便吧无聊啊5</a></li>
						<li><a href="#">随便吧无聊啊6</a></li>
					</ul>
				</div>
				<div class="four">
					<h2>电子商务网站1</h2>
					<img src="./imgs/2.jpg" alt="" />
					<ul>
						<li><a href="#">随便吧无聊啊1</a></li>
						<li><a href="#">随便吧无聊啊2</a></li>
						<li><a href="#">随便吧无聊啊3</a></li>
						<li><a href="#">随便吧无聊啊4</a></li>
						<li><a href="#">随便吧无聊啊5</a></li>
						<li><a href="#">随便吧无聊啊6</a></li>
					</ul>
				</div>
				<div class="four">
					<h2>电子商务网站1</h2>
					<img src="./imgs/2.jpg" alt="" />
					<ul>
						<li><a href="#">随便吧无聊啊1</a></li>
						<li><a href="#">随便吧无聊啊2</a></li>
						<li><a href="#">随便吧无聊啊3</a></li>
						<li><a href="#">随便吧无聊啊4</a></li>
						<li><a href="#">随便吧无聊啊5</a></li>
						<li><a href="#">随便吧无聊啊6</a></li>
					</ul>
				</div>
			</div>
			<div id="right">
				<div class="subtitle">
					<img src="./imgs/point.png" alt="" />
					<h1>核心业务</h1>
					<a href="#">More&gt&gt</a>
				</div>
				<div id="art">
					<ul>
						<li><a href="#">随便一个什么文字1</a></li>
						<li><a href="#">随便一个什么文字2</a></li>
						<li><a href="#">随便一个什么文字3</a></li>
						<li><a href="#">随便一个什么文字4</a></li>
						<li><a href="#">随便一个什么文字5</a></li>
						<li><a href="#">随便一个什么文字6</a></li>
					</ul>
				</div>
				<div id="contact">
					<div class="subtitle">
						<img src="./imgs/point.png" alt="" />
					<h1>核心业务</h1>
					<a href="#">More&gt&gt</a>
					</div>
				</div>
			</div>
		</div>
		<div class="clear_float"></div>
		<div id="footer">
			<ul>
				<li><a href="#">联系我们1</a></li>
				<li><a href="#">联系我们2</a></li>
				<li><a href="#">联系我们3</a></li>
				<li><a href="#">联系我们4</a></li>
				<li><a href="#">联系我们5</a></li>
				<li><a href="#">联系我们6</a></li>
			</ul>
			<address>
				版权所有：&copy2003-2016 摔角网 版权所有 浙ICP备12034799号-3
			</address>
		</div>
	</div>
</body>
</html>
相关推荐
