用div+css布局网页框架

原创 2013年12月04日 09:51:51

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

 

 

第一个网页框架(自己的百度)

第一个网页框架(自己的百度)

HTML框架合并网页功能实例

HTML对于复杂的网页,提供了各个小网页进行合并的功能。就是说,你可以使用各个小网页最终在一个大的整个的 网页上显示出效果。这样对于开发和维护都是非常有好处的。下面来说一下用法 首先是top.ht...

用CSS与DIV进行网页布局(框架)

CSS代码一般是写在一个.css文件里面,在HTML代码中引用

CSS+DIV:实现炫酷网页样式与布局

虽然之前也接触过HTML和CSS,也做过一段时间的项目,使用过CSS和DIV,但是终究没有体会到这两者融会贯通后,所能达到的效果,远远超乎我的想象。         其实很多写过前端页面的人都知道DI...

DIV+CSS网页布局案例

  • 2013年11月07日 14:23
  • 450KB
  • 下载

DIV_CSS 网页布局

  • 2013年09月14日 22:46
  • 40KB
  • 下载

【CSS】关于div的对齐与网页布局

div布局之所以要学懂学透,是因为table的布局实在是难堪大用,如果是同处于一个表格之内, 各行的规格分布根本就没法调, 例如下面的一段非常简单的代码: 无标题文档 1111...

精通DIV+CSS网页样式与布局

  • 2015年10月13日 19:15
  • 82KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用div+css布局网页框架
举报原因:
原因补充:

(最多只允许输入30个字)