这个模板是左右两列布局模板，不再是最基础的搭建框架，更多的块结构也做出来了，如果符合这种结构的可以直接拿来使用（我做的网站大部分都是这种结构的，嘿嘿^_^）。在IE和FF下测试没变形，但没测试W3C认证，估计还通不过（个别兼容的样式通不过）。

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常用的DIV+CSS网站布局的基本框架结构－完整版</title>
<link href="/css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<h1>头部</h1>
</div>
<div class="clearfloat"></div>
<div id="nav">
<ul>
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
<li><a href="#">导航四</a></li>
<li><a href="#">导航五</a></li>
</ul>
</div>
<div id="mainContent">
<div id="main">
<div class="mainbox">
<h2>块标题</h2>
<ul>块内容</ul>
</div>
</div>
<div id="side">
<div class="sidebox">
<h4>块标题</h4>
<ul>块内容</ul>
</div>
</div>
</div>
<div class="clearfloat"></div>
<div id="footer">
底部
</div>
</div>
</body>
</html>

CSS样式表layout.css代码：

@charset "utf-8";
/* CSS Document */

@import url("/css/global.css");

/*body*/
#container {margin:0 auto; width:950px;}

/*header*/
#header { height:50px; background:#ff911a;}
#header h1 { padding:10px 20px;}
#nav { background:#FF6600; height:24px; margin-bottom:6px;}
#nav ul li { float:left;}
#nav ul li a { display:block; padding:4px 10px 2px 10px; color:#fff; text-decoration:none;}
#nav ul li a:hover { text-decoration:underline;}

/*main*/
#mainContent { overflow:auto; zoom:1; margin-bottom:6px;}
#side { width:200px; float:left;}
.sidebox { border:1px solid #ed6400; margin-bottom:6px;}
.sidebox h4 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}
.sidebox ul { padding:4px 6px;}
#main{ width:742px; float:right;}
.mainbox { border:1px solid #ed6400; margin-bottom:6px;}
.mainbox h2 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}
.mainbox ul { padding:4px 6px;}

/*footer*/
#footer { border-top:3px solid #ccc; height:50px; text-align:center; padding:6px;}

被包含的CSS样式表global.css代码（把用于全局的样式单独放在一个样式表中，避免重复，方便调用）：

@charset "utf-8";
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
h1 { font-size:20px; font-family:'microsoft yahei';}
h2 { font-size:14px;}
h3 { font-size:14px; font-weight:normal;}
h4 { font-size:12px;}
h5 { font-size:12px; font-weight:normal;}
ul { list-style:none;}
img { border:0px;}
a { color:#195cb5; text-decoration:none;}
a:hover { color:#f00;}

.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

本文转自寒意博客园博客，原文链接：http://www.cnblogs.com/hnyei/archive/2011/10/14/2211139.html，如需转载请自行联系原作者

常用的DIV+CSS网站布局的基本框架结构－完整版相关推荐

  1. Div+CSS网页布局对网站搜索引擎优化的影响

    Div+CSS网页布局对网站搜索引擎优化的影响 我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭 ...

  2. web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性

    盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...

  3. DIV+CSS网页布局（新手必备)

    文章目录 一:网页布局的目的 二:如何布局 (1):确定"版心" (2):分析模块 三:页面元素的定位机制 (1)流式布局 (2)浮动-float (3)绝对定位(position ...

  4. 用css网站布局之十步实录～

    http://www.52css.com/article.asp?id=179 用css网站布局之十步实录! 第五步:网页主要框架之外的附加结构的布局与表现 理论上,我们可以控制源文件上的任意元素的浮 ...

  5. Float构建三栏DIV CSS网页布局

    你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...

  6. [html] 使用div+css进行布局有什么好处？

    [html] 使用div+css进行布局有什么好处? 我记得刚学的是时候,说最一开始用的是table去实现布局的.HTML语义标签还是挺多的,就是div打发好啊 个人简介 我是歌谣,欢迎和大家一起交流 ...

  7. html css网页布局实例简单,Div+CSS网页布局项目实战一（含设计图、HTML和CSS源文件）...

    网页的基本结构 新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...

  8. 一个完美的导航条html,一个DIV CSS代码布局的简单导航条

    简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航 ...

  9. html中怎么写排行榜,div css列表布局排行榜代码

    特效描述:div css列表布局 排行榜代码.div css列表布局排行榜代码 代码结构 1. 引入CSS 2. HTML代码 问问专家 问问专家 在社区问问最专业的知识贡献用户 委婉小小 闻道有先后 ...

  10. 49个影响网站排名的因素（完整版）(转自点石互动）

     49个影响网站排名的因素(完整版) 我自己写的,不知道对大家有没有帮助? 在别人的基础上作了补充和修改,增加到49个因素,应该算是完整版了. 原文地址:49个影响网站排名的因素(完整版) 内部因素 ...

最新文章

  1. Python炫技操作：条件语句的七种写法
  2. 范进中举，读个博士到底有多难？看看就知道了！
  3. GSM —— 商业蜂窝通信系统
  4. 【图像处理opencv】_简单绘图
  5. 从0-1教你利用服务器做属于自己的个人博客
  6. PyQt5 关于自动补全 QCompleter
  7. sysbench --with-mysql-libs_linux安装sysbench
  8. ToList()所带来的性能影响
  9. 相亲之战，以少胜多乎？
  10. C++包含头文件尖括号和双引号的区别
  11. (CVPR_2021) Center-based 3D Object Detection and Tracking
  12. 细说汽车电子通信总线之CAN-FD 总线协议详解
  13. 使用ViewPager和PhotoView实现图片浏览
  14. 广州市职称计算机应用考试,职称计算机考试
  15. 异地监控组网实战案例（速度快）
  16. 计算机在线作业题,精选《计算机原理与结构》在线作业试题
  17. 【经验分享】BMPR文件及其打开软件Balsamiq Wireframes的下载和安装
  18. 基于STM32F103的红外遥控的一点浅显知识的分享
  19. git Husky 搭配 commitizen ，规范代码提交
  20. 第9天：CSS精灵图

热门文章

  1. FFmpeg开发（一）常用处理视频命令
  2. Go基础-核心特性和前景
  3. 4n35光耦引脚图_光耦合器隔离技术在工业环境中的应用！-先进光半导体
  4. js php后端 安全,前端JS RSA加密，PHP后端解密实现密码安全传输
  5. python学生管理系统gui版好例子网_python界面版学生管理系统 相关实例(示例源码)下载 - 好例子网...
  6. stm32 某个io引脚不能拉高_【stm32f407】IO引脚复用和映射
  7. LINUX 版本信息查看（全）
  8. python拥有丰富的第三方库_Python第三方库的安装方法
  9. 更新日志_CargoWare系统云平台更新日志2020.11.24
  10. oracle 函数怎么个写法,Oracle表值函数的两种写法