日期:2014-05-17  浏览次数:20904 次

用div+css布局网页框架

使用DIV+CSS布局页面的框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Language" content="en-us" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        <title>main</title>
        
        <style type="text/css">
			#main{
				text-align:center;
				margin-top:opx;
				padding-top:opx;
				width:960px;
				
			}
			#top_menu{
				width:100%;
			}
			#top_menu ul li{
				list-style-type:none;
				float:left;
				width:14%;
				text-align:center;
				background-color:blue;
			}
            #main_picture{
				background-color:red;
				width:100%;
				height:120px;
			}
			#banner{
				width:100%;
				height:25px;
				background-color:green;
			}
			#content_left{
				width:15%;
				float:left;
				height:250px;
				background-color:yellow;
			}
			#content_right{
				float:right;
				width:85%;
				height:250px;
				background-color:blue;
			}
			#footer_1{
				width:100%;
				height:25px;
				background-color:green;
			}
			#content_left ul li{
				list-style-type:none;
				margin-top:10px;
				float:left;
				width:100%;
				border-bottom-width:1px;
				border-bottom-color:black;
				border-bottom-style:groove;
			}
        </style>
    </head>
    <body>
	<div id="main">
        <div id="top_menu">
			<ul>
				<li>test1
				<li>test2
				<li>test3
				<li>test4
				<li>test5
				<li>test6
				<li>test7
			</ul>
		</div>
		<div>&nbsp;</div>
		<div id="main_picture">main picture</div>
		<div id="banner">banner</div>
		<div id="content_main">
			<div id="content_left">
				<ul>
					<li>left1
					<li>left2
					<li>left3
					<li>left4
					<li>left5
					<li>left6
					<li>left7
				</ul>
			</div>
			<div id="content_right">content_right</div>
		</div>
		<div>&nbsp;</div>
		<div id="footer_1">coyright 2012-2013 huawei</div>
	</div>
    </body>
</html>

?

?