关闭

用div+css布局网页框架

227人阅读 评论(0) 收藏 举报

使用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>

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:286055次
    • 积分:8489
    • 等级:
    • 排名:第2296名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:4条
    最新评论