DIV+CSS初始化模板
第20章 DIV+CSS页面布局实例：制作
DIV+CSS页面布局实例： DIV+CSS页面布局实例：制作服饰商 页面布局实例 城
现今互联网已成为人们生活的一部分， 现今互联网已成为人们生活的一部分，很多人会选择网上购 物和网上交易。 物和网上交易。在当今互联网上有许多形式各异的商城 如最大的网上商城淘宝网。 ，如最大的网上商城淘宝网。而随着各种行业对网上交 易行为的重视和应用， 易行为的重视和应用，越来越多的独立商城涌现在互联 网上。本章实例将讲解如何制作一个服饰商城的模板。 网上。本章实例将讲解如何制作一个服饰商城的模板。 本章内容包括： 本章内容包括： 分析服饰商城的构架 制作服饰商城网站的首页 制作个人博客网站的分页
20.5.1 制作服饰商城第一栏的布局
服饰商城第一栏分为左中右三个部分。 服饰商城第一栏分为左中右三个部分。左边是商城所有商品 的总目，当用户选择其中一个选项， 的总目，当用户选择其中一个选项，就能跳转到相应的 商品列表。例如，在商品总目列表中选择了“风衣” 商品列表。例如，在商品总目列表中选择了“风衣”， 页面就会转到风衣的商品列表页面中。 页面就会转到风衣的商品列表页面中。左边的商品总目 命名为sortList。中间是一个宣传栏目，用于摆放商城的 命名为 。中间是一个宣传栏目， 活动宣传或者促销宣传。很多网站使用flash或者 活动宣传或者促销宣传。很多网站使用 或者 JavaScript的图片轮转来制作这个效果。由于本书不涉 的图片轮转来制作这个效果。 的图片轮转来制作这个效果 及过多的CSS技术以外的技术，所以这个栏目放置一张 技术以外的技术， 及过多的 技术以外的技术 图片作为替代。中间的宣传栏目命名为midFlash。右边 图片作为替代。中间的宣传栏目命名为 。 的栏目中包含了用户登录框、商城新闻和促销图片。 的栏目中包含了用户登录框、商城新闻和促销图片。这 个栏目包含了比较多的内容，不能使用一个名称概括， 个栏目包含了比较多的内容，不能使用一个名称概括， 所以使用rightBox来命名。 来命名。 所以使用 来命名
超级牛最详细的Div+CSS布局案例
DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
css初始化表（normalize.css）
css初始化表（normalize.css）为什么要初始化CSS？ 建站⽼⼿都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页⾯差异。
当然，初始化样式会对SEO有⼀定的影响，但鱼和熊掌不可兼得，但⼒求影响最⼩的情况下初始化。
最简单的初始化⽅法就是： * {padding: 0; margin: 0;} 。
有很多⼈也是这样写的。
这确实很简单，但有⼈就会感到疑问：*号这样⼀个通⽤符在编写代码的时候是快，但如果⽹站很⼤，CSS样式表⽂件很⼤，这样写的话，他会把所有的标签都初始化⼀遍，这样就⼤⼤的加强了⽹站运⾏的负载，会使⽹站加载的时候需要很长⼀段时间。
写过css的都知道每个⽹页引进的css⾸先都需要初始化，⽽出名的css reset有YUI cssreset（QQ、淘宝等都出现他的影⼦），业内⽤的最多的还有Erik Meyer’s CSS Reset。
CSS初始化是指重设浏览器的样式。
不同的浏览器默认的样式可能不尽相同，所以开发时的第⼀件事可能就是如何把它们统⼀。
如果没对CSS初始化往往会出现浏览器之间的页⾯差异。
每次新开发⽹站或新⽹页时候通过初始化CSS样式的属性，为我们将⽤到的CSS或html标签更加⽅便准确，使得我们开发⽹页内容时更加⽅便简洁，同时减少CSS代码量，节约⽹页下载时间。
雅虎⼯程师提供的CSS初始化⽰例代码body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0;padding: 0;}body {background: #fff;color: #555;font-size: 14px;font-family: Verdana, Arial, Helvetica, sans-serif;}td, th, caption {font-size: 14px;}h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 100%;}address, caption, cite, code, dfn, em, strong, th, var {font-style: normal;font-weight: normal;}a {color: #555;text-decoration: none;}a:hover {text-decoration: underline;}img {border: none;}ol, ul, li {list-style: none;}input, textarea, select, button {font: 14px Verdana, Helvetica, Arial, sans-serif;}table {border-collapse: collapse;}html {overflow-y: scroll;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {*zoom: 1;}腾讯官⽹样式初始化body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select { margin: 0;padding: 0}body {font: 12px "宋体", "Arial Narrow", HELVETICA;background: #fff;-webkit-text-size-adjust: 100%;}a {color: #2d374b;text-decoration: none}a:hover {color: #cd0200;text-decoration: underline}em {font-style: normal}li {list-style: none}img {border: 0;vertical-align: middle}table {border-collapse: collapse;border-spacing: 0}p {word-wrap: break-word}新浪官⽹样式初始化body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div {margin: 0;padding: 0;border: 0;}body {background: #fff;color: #333;font-size: 12px;margin-top: 5px;font-family: "SimSun", "宋体", "Arial Narrow";}ul, ol {list-style-type: none;}select, input, img, select {vertical-align: middle;}a {text-decoration: none;}a:link {color: #009;}a:visited {color: #800080;}a:hover, a:active, a:focus {color: #c00;text-decoration: underline;}淘宝官⽹样式初始化body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0;padding: 0;}body, button, input, select, textarea {font: 12px/1.5 tahoma, arial, \5b8b\4f53;}h1, h2, h3, h4, h5, h6 {font-size: 100%;}address, cite, dfn, em, var {font-style: normal;}code, kbd, pre, samp {font-family: couriernew, courier, monospace;}small {font-size: 12px;}ul, ol {list-style: none;}a {text-decoration: none;}a:hover {text-decoration: underline;}sup {vertical-align: text-top;}sub {vertical-align: text-bottom;}legend {color: #000;}fieldset, img {border: 0;}button, input, select, textarea {font-size: 100%;}table {border-collapse: collapse;border-spacing: 0;}⽹易官⽹样式初始化html {overflow-y: scroll;}body {margin: 0;padding: 29 px00;font: 12px "\5B8B\4F53", sans-serif;background: #ffffff;}div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p { padding: 0;margin: 0;}table, td, tr, th {font-size: 12px;}li {list-style-type: none;}img {vertical-align: top;border: 0;}ol, ul {list-style: none;}h1, h2, h3, h4, h5, h6 {font-size: 12px;font-weight: normal;}address, cite, code, em, th {font-weight: normal;font-style: normal;}。
div介绍盒子模型边框属性CSS初始化文字排版边框调整溢出
div介绍盒⼦模型边框属性CSS初始化⽂字排版边框调整溢出今天学习的div，了解了div是⼲什么⽤的掌握了什么是盒⼦模型，以及div的外边距内边距以及边框，运⽤div和CSS给⽂字排版，利⽤边框的来做图像，div溢出的处理CSS初始化： 精确排版的时候⽤这个清理⼀下*{margin:0px;padding:0px;}*/1 <!doctype html>2 <html>3 <head>4 <meta charset="utf-8">5 <title>div介绍</title>6 <!--7 <div></div>不是功能标签8是可以放⽂字、图⽚以及各种元素块标签，相当于是个⽅便袋，常⽤于来布局9 div不设置宽⾼不显⽰-->1011 <style>121314 #d1{15 background-color: red;16 width: 50px;17 height: 50px;18float: left;19 }202122 #d2{23 background-color: blue;24 height: 100px;25 width: 100px;26/* 浮动*/27float: right;28 }29 #d3{30 background-color:#666666;3132 height: 100px;33/*清除浮动，不让浮动的盖住*/34 clear: both;35 }36 </style>37 </head>3839 <body>4041 <div id="d1">我是左div</div>42 <div id="d2">我是右div</div>43 <div id="d3">我是三div</div>44 </body>45 </html><!doctype html><html><head><meta charset="utf-8"><title>溢出处理</title><style>#d{background-color: yellow;width: 100px;height: 100px;/*如果内容超出div则隐藏*//* overflow: hidden;*//*不管内容是否超出，都会给div加⼀个滚动条*//* overflow: scroll;*//*如果内容不超出div则没有滚动条，如果超出；⾃动添加滚动条 */overflow: auto;}</style></head><body><div id="d">刘奶奶找⽜奶奶买⽜奶，⽜奶奶给刘奶奶拿⽜奶</div></body></html><!doctype html><html><head><meta charset="utf-8"><title>快速添加边框的粗细、类型、颜⾊</title> <style>#d{/*快速添加边框的粗细、类型、颜⾊*/border-left: 100px solid white;border-right: 100px solid white;border-bottom: 100px solid #FC01FB;width: 00px;height: 00px;background-color: yellow;}#d1{border-left: 100px solid white;border-right: 100px solid white;border-bottom: 100px solid #06B5D1;width: 00px;height: 00px;background-color: yellow;}#d2{width: 85px;height: 100px;background-color: white;float: left;}#d3{width: 30px;height: 100px;background-color: yellow;float: left;}#d4{width: 85px;height: 100px;background-color: white;float: left;}</style></head><body><div id="d"></div><div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div></body></html><!doctype html><html><head><meta charset="utf-8"><title>⽹页⽂字⽤DIV排版</title><style>li{list-style-type: none;float: left;/* 间距*/margin: 20px;}</style></head><body><ul><li> ⾸页</li><li>新闻⽹</li><li>⾸页概况</li></ul></body></html><!doctype html><html><head><meta charset="utf-8"><title>盒⼦模型边框属性 CSS初始化</title><style>/*盒⼦模型：外边距；margin margin:auto auto的意思是⾃适应边框；barder内边框；paddingmargin重叠现象：只要有⼀个元素没有float属性就会出现重叠现象，margin取相邻元素的margin最⼤值CSS初始化：*{margin:0px;padding:0px;}*/*{margin:0px;padding:0px;}#big{width: 500px;height: 500px;background-color: yellow;}#small1{width: 100px;height: 100px;background-color: red;float: left;margin: 10px 10px 10px; /*上右下左*/border: 20px solid black;padding: 10px; /*上右下左和margin⼀样*/}#small2{width: 100px;height: 100px;background-color: blue;float: left;margin: 10px;}#small3{width: 100px;height: 100px;background-color: aqua;clear: both;margin: 10px;}#small4{width: 100px;height: 100px;background-color: orange;clear: both;margin: 10px;}</style></head><body><div id="big"><div id="small1">戒指</div><div id="small2"></div><div id="small3"></div><div id="small4"></div></div></body></html>。
DIV+CSS打造PHP168经典模板
DIV+CSS打造PHP168经典模板DIV+CSS设计，减少了以往表格设计的层层嵌套，代码量大大减少，使得草根站长们配置本就不高的虚拟主机压力大大减少。
且内容与样式的分离设计，让网站后期维护工作量大大减少。
以下是本人最近的一个作品，现在上传再次，与大家一起分享，其代码我将尽量注释明白，但由于本人小学语文是体育老师教的，表达不清之处还请大家多多见谅！整图1、网站头部在head于body之间同都是相同的，我就不累赘了，大家先来看网页顶部的小导航及登录入口图列- 1DIV- 1CSS- 1网页导航部分使用的是ul+li的形式，这种样式替代表格实现导航让人可以一幕了然，接以后如果要更改要是，可以直接在CSS代码中修改（像横排改为竖排，放置的位置的移动东可以真正实现了内容与样式的分离），其中几点我列出来说明一下A、在每个导航文字的左边有一个竖线是通过CSS代码border-left:1px solid #b8bec1来实现的，当然要注意的是放在li属性中，大家可以发挥一下，将它放在上面（top）左边（left）等都是可以的。
B、导航不是贴在定不，这是通过margin-top:5px; 让它据顶部有5个像素的距离，这样好看一点。
2、网站主体大家可以看到，这个网页的主体是三列、两列、三列的形式，在源代码中是通过conter1与conter2实现的，conter1包括left1与right1，conter2包括left2、middle2、right2三个部分。
其中我觉得较有特色的几点（呵呵，自卖自夸一下）A、几乎所有的小方块都是通过以下的DIV与CSS实现的，比原来的三层表格嵌套方便太多了，如果出现在标题h3中的文字大家不想要，可以直接使用<h3 style="di splay:none;"><span>1111</span></h3>将标题去掉DIV- 2CSS- 2B、如果想添加小方块，大家只要将DIV- 2复制到要使用的地方（也就是conter1于2中的left、right、Middle）将label修改下就可以了C、其中conter1于2中的left、right、Mi ddle的CSS代码如下，当然，其中具体的大小的计算费了我九牛二虎之力啊，因为IE与firefox两个主流的浏览器对web标准的支持不是太一致，就这个有点棘手。
css+div代码讲解
一列固定宽度居中<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">注释：告诉浏览器，这段标签内包含的内容是css或text；也就是说如果某种浏览器（特别是wap等手机浏览器械、）不能识别css的，会将代码认为text，从而不显示也不报错。
#layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }</style></head><body><div id="layout">此处显示id "layout" 的内容</div></body></html>一列二至多块布局<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">body { margin:0; padding:0;}#header { margin:5px auto; width:500px; height:80px; background:#9F9;}#main { margin:5px auto; width:500px; height:400px; background:#9FF;}#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}</style></head><body><div id="header">此处显示id "header" 的内容</div><div id="main">此处显示id "main" 的内容</div><div id="footer">此处显示id "footer" 的内容</div></body></html>纵向导航代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />注释：content-type:text/html。
30多套漂亮的div+css后台模板下载
仿windows桌面Ext 2.0系统管理界面
精致美观的后台管理系统后台模板(带登录)
漂亮的绿色后台模板(带登录界面)
一个非常漂亮的后台登录模板界面
银行国际结算系统后台模板
蓝色电子商务网站管理系统后台模板
漂亮的软件项目管理系统后台模板
蓝色通用左右分栏后台模板
仿windows界面后台模板(TaskMenu 3.0)
漂亮的jquery easyui后台框架
漂亮的某学校网站管理系统后台模板
一个漂亮通用的商家信息管理中心后台模板(带登录界面) 办公管理系统后台界面
深圳市城建管理工作平台模板界面带登录界面
浅绿色通用css后台模板
一个通用信息系统后台模板
通用后台管理系统模板
仿126邮件系统管理后台模板
仿163网易电子邮箱界面后台模板
简单美观的Ext后台管理系统后台模板
漂亮的百度后台管理登录界面
仿windows窗口超市管理系统后台模板
一个非常漂亮的蓝色后台登录界面(可在线演示) 灰色左边菜单可收缩后台管理系统界面
一款非常美观的后台管理中心界面
一个非常漂亮精致的蓝色后台模板
一个非常精致的内容管理系统后台模板
一个大方漂亮的电子商务后台模板
酷气蓝色简洁的css后台模板
一个邮件管理系统后台界面
全部在线演示地址：/article_show/10112.aspx 可以在这里预览各种模板效果以便针对性下载
30套全部打包下载：/file/bewit7nm。
DIV+CSS网页代码注释
DIV+CSS网页代码注释元素和属性定义<head>...</head> 标记HTML文档头部的开始和结束<HTML>...</html> 标记HTML文档的开始和结束<title>...</title> 指示HTML文档的标题(在头部使用)<!--...--> 在THML文档中加注释<body>...</body> 标记HTML文档体的开始和结束backcround=url 指定作为背景的图象(HTML3.2+)bgcolor=color 指定背景色(color可以是名字或十六进制数)(HTML 3.2+) text=color 指定文本颜色(HTML 3.2+)link=color 指定页面的连接颜色(HTML 3.2+)alink=color 指定页面的活动连接颜色 (HTML 3.2+)vlink=color 指定页面也访问过的连接颜色 (HTML 3.2+) leftmargin=n 指定文档左边与浏览器窗口左边缘的距离(Microsoft) topmargin=n 指定文档上边与浏览器窗口上边缘的距离(Microsoft) rightmargin=n 指定文档右边与浏览器窗口右边缘的距离(IE 4.0) bottommargin=n 指定文档下边与浏览器窗口下边缘的距离(IE 4.0) bgproperties=fixed 固定背景图象的位置(也就是不让图象滚动)(Microsoft)scroll=yes/no 打开或关闭滚动条(IE 4.0)onloab=script 载入文档时启动脚本的事件onunloab=script 卸载文档时启动脚本的事件<!doctype html info> 定义文档所用的 dtd (htmlinfo 是 dtd 名) <meta> 提供文档的元信息http-equiv=name 与<meta>文档中数据相关的 http 文件头部content=name 与命名http 头部相关的数据name=name 文档的描述url=url 与元信息联系的url2文档风格类型以下标记用于改变文档中文本的风格,即改变文本显示式样元素属性定义<b>...</b> 使文本为黑体<big>...</big> 使文本成为大字体 (通常大一号)(HTML 3.2+)<basefont> 设置文档的默认字体特性 (HTML 3.2+)color=color 设置字体的默认颜色<blank>...</blank> 使文本闪烁(Netscape)<font>...</font> 文本字体标记size=n 根据值n改变字体的大小 n可以是1~7的任一数字face=fonteame 如果本地系统在指定的字体,则改变字体样式为该字体(HTML4.0)<i>...</i> 使文本成为斜体<marquee>...<marquee> 插入滚动文本的滚动文本框(Microsoft)behavior=behavior 文本滚动形式(scroll,slide或altenate)bgcolor=color 滚动文本框的背景色(color可以是名字或十六进制数)direction=direction 文本滚动方向(left或right)height=n 以像素为单位的滚动文本框高度width=n 以像素为单位的滚动文本框宽度hspace=n 滚动文本框周围总的水平空间vspace=n 滚动文本框周围总的垂直空间loop=n 文本滚动次数scrolldelay=n 刷新间隔(以豪秒计)scrollamount=n 一次刷新滚动的文本数truespeed 用指定的精确延迟值来滚动文本(IE 4.0)<s>...</s> 给文本加上删除线(HTML 3.2+)<strike>...</strike>) 以下标显示文本(HTML 3.2+)<sup>...</sup> 以上标显示文本(HTML 3.2+)<u>...</u> 给文本加上下划线3内容文本类型以下用于改变文档中文本的内容样式,即改变文本的潜在意义。
Div+CSS基础代码网页布局+实例教程
Div+css一，什么是CSSCSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。
二．DIV+CSS简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。
首先认识DIV 是用于搭建html网页结构（框架）标签，像<b>、<h1>、<span>等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。
表格以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。
例子：<table><tr><td height="100">我的高度为100px</td></tr><tr><td height="50">我高度为50px</td></tr></table>分别设置了高度为100px和50px的两行表格DIV的布局方法CSS 代码.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}Html body内代码：<div class="yangshi">演示，内容测试内容高度超出演示实例，divcss5实例</div>完整CSS html最小高度实例代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS 高度实例</title><style>.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}</style></head><body><div class="yangshi">演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例</div></body></html>CSS 宽度传统Html 宽度属性单词：width 如width="300";CSS 宽度属性单词：width 如width:300px;HTML宽度与DIV+CSS对比1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。
CSS重置默认样式
CSS重置默认样式1. 概述1.1 说明css重置样式主要是为了让各个浏览器的CSS样式有⼀个统⼀的基准，使HTML元素样式在跨浏览器时有⼀致性的效果。
备注：浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果不对css初始化往往会出现浏览器之间的页⾯显⽰差异。
但是初始化样式也会对SEO有⼀定的影响，故初始化时尽量使影响最⼩。
1.2 重置⽂件reset.css：传统的重置样式⽂件，重置清零处理来保障统⼀基准，如(*{ margin:0; padding:0; })。
normailze.css：是⼀个很⼩的css，是⼀种为HTML5准备的优质重置⽅案(替代reset.css)。
(https://necolas.github.io/normalize.css/5.0.0/normalize.css)。
1.2.1 Normalize vs Reset1.Normalize.css 保护了有价值的默认值Reset通过为⼏乎所有的元素施加默认样式，强⾏使得元素有相同的视觉效果。
相⽐之下，Normalize.css保持了许多磨⼈的浏览器样式。
这就意味着你不⽤再为所有公共的排版元素重新设置样式。
当⼀个元素在不同的浏览器中有不同的默认值时，Normalize.css会⼒求让这些样式保持⼀致并尽可能与现代标准符合。
2.Normalize.css 修复了浏览器的bug它修复了常见的桌⾯端与移动端浏览器的bug。
这往往超出了Reset所能做到的范围。
关于这⼀点，Normalize.css修复的问题包含了HTML5元素的显⽰设置、预格式化⽂字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3.Normalize.css 不会让你的调试⼯具变的杂乱使⽤Reset最让⼈困扰的地⽅莫过于在浏览器调试⼯具中⼤段⼤段的继承链，在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使⽤是⾮常谨慎的，我们仅会有⽬的地对⽬标元素设置样式。
CSS初始化样式
CSS初始化样式为了消除各浏览器对css默认的设置，保持⽹页在各浏览器中的外观保持⼀致，初始化css就显得⾮常必要了！很多时候出现的样式不兼容问题，都可以通过css初始化代码来解决。
下⾯列举常⽤的⼀些⽅案：1.最耗资源的，最简单的* { padding: 0; margin: 0; border: 0; }2.选择性初始化举例（综合）body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,buttonform,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0;}/* 酌情修改 */body {background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}/* 短引⽤的内容可取值：''或"" */q:before,q:after {content:”;}/* 缩写，图⽚等⽆边框 */fieldset,img,abbr,acronym {border: 0 none;}abbr,acronym {font-variant: normal;}legend {color:#000;}/* 清除特殊标记的字体和字号 */address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal;}/* 上下标 */sup {vertical-align: text-top;}sub {vertical-align: text-bottom;}/* 设置表格的边框被合并为⼀个单⼀的边框, 指定分隔边框模型中单元格边界之间的距离为0*/table { border-collapse: collapse; border-spacing: 0;}/* 表格标题及内容居左显⽰ */caption,th {text-align: left;}input,img,select {vertical-align:middle;}/* 清除列表样式 */ol,ul {list-style: none;}/* 输⼊控件字体 */input,button,textarea,select,optgroup,option {font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}/* 标题元素样式清除 */h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%;}/* 链接样式，颜⾊可酌情修改 */del,ins,a {text-decoration:none;}a:link {color:#009;}a:visited {color:#800080;}a:hover,a:active,a:focus {color:#c00; text-decoration:underline;}/* ⿏标样式 */input[type="submit"] {cursor: pointer;}button {cursor: pointer;}input::-moz-focus-inner { border: 0; padding: 0;}.clear {clear:both;}3.sina的/* 全局样式 */body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}ul,ol{list-style-type:none;}select,input,img,select{vertical-align:middle;}a{text-decoration:none;}a:link{color:#009;}a:visited{color:#800080;}a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}4.yahoo的html {background: none repeat scroll 0 0 #FFFFFF;color: #000000;}body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;}fieldset, img {border: 0 none;}address, caption, cite, code, dfn, em, strong, th, var {font-style: normal;font-weight: normal;}li {list-style: none outside none;}caption, th {text-align: left;}h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}q:before, q:after {content: "";}abbr, acronym {border: 0 none;font-variant: normal;}sup {vertical-align: text-top;}sub {vertical-align: text-bottom;}input, textarea, select {font-family: inherit;font-size: inherit;font-weight: inherit;}input, textarea, select {}legend {color: #000000;}body {font: 13px/1.231 arial,helvetica,clean,sans-serif;}select, input, button, textarea {font: 99% arial,helvetica,clean,sans-serif;}table {font-size: inherit;}pre, code, kbd, samp, tt {font-family: monospace;line-height: 100%;}a {text-decoration: none;}a:hover, a:focus {text-decoration: underline;}strong {font-weight: bold;}input[type="submit"] {cursor: pointer;}button {cursor: pointer;}5.博客园的/*version: 2.7.0*/html,body{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{ font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}.clear{clear:both;}input::-moz-focus-inner{ border: 0;padding: 0;}/*added*/input[type=button],input[type=submit] {-webkit-appearance: button;}。
DIV CSS书写格式范例
DIV CSS书写格式范例
近年来网站如雨后春笋般大批的出现在网络上,对于网站来说web后端开发也变得越来越重要。
下面就让我们来了解一下DIV CSS书写格式。
DIV+CSS的书写格式
好的CSS代码和DIV代码的书写格式有助于顺利快速的开发项目，同时也会形成较好的习惯，同时日后维护也方便。
问题：不工整div和css代码会不会不符合W3C标准
答案：不会造成不符合W3C标准。
因为代码的工整与否是展示的代码排列方式，与兼容和W3C标准无关。
问题2：为什幺有些html网页和css文件的代码都是紧挨着的如
与
或css中CSS样式选择器也是没有空格。
答：这是因为有些网页开发者为了避免新手抄写他的代码，待网页发布上传前将复制一份或直接将CSS代码和html标签间的空格清除，所以我们查看网页源代码时候代码都是一起而且感觉混乱的。
解决办法是用Microsoft Visual Studio中工具整理排列代码或使用DW4代码格式化工具即可实现整理代码即可排列整齐有序。
接下来我们分别来解释与介绍DIV CSS代码书写格式及对应CSS范例教程 1、DIV书写格式
Div书写在html文件里，排列有序缩进有序将给开发和日后维护带来帮助。
典型缩进范例：
注意以上代码缩进-父级与子级有相对缩进。
一般缩进4个空格字符半角英。
CSS样式表初始化代码
CSS样式表初始化代码CSS为什么要初始化？建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法就是： * {padding: 0; margin: 0;} 。
有很多人也是这样写的。
这确实很简单，但有人就会感到疑问：*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。
写过css的都知道每个网页引进的css首先都需要初始化，而出名的css reset有YUI css reset（QQ、淘宝等都出现他的影子），业内用的最多的还有Erik Meyer’s CSS Reset。
花了点时间，把一些门户及大型网站的样式初始化罗列了下来（仅供参考）腾讯QQ官网()样式初始化body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea, select{margin:0;padding:0}body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}a{color:#2d374b;text-decoration:none}a:hover{color:#cd0200;text-decoration:underline}em{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}table{border-collapse:collapse;border-spacing:0}p{word-wrap:break-word}新浪官网(/)样式初始化body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;paddi ng:0;border:0;}body{background:#fff;color:#333;font-size:12px;margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}ul,ol{list-style-type:none;}select,input,img,select{vertical-align:middle;}a{text-decoration:none;}a:link{color:#009;}a:visited{color:#800080;}a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}淘宝官网(/)样式初始化（淘宝的样式是经过压缩的，我自己拷下来格式化过的）body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }网易官网(/)样式初始化html {overflow-y:scroll;}body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockq uote,p{padding:0; margin:0;}table,td,tr,th{font-size:12px;}li{list-style-type:none;}img{vertical-align:top;border:0;}ol,ul {list-style:none;}h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}address,cite,code,em,th {font-weight:normal; font-style:normal;}下面我贴出一段本站的CSS初始化的代码，当然，这并不是最好的写法，大家可以根据自己的习惯和喜好自行删减或增加!也欢迎大家提出更好的建议。
DIVCSS学习(入门)教程
Div+CSS布局入门教程页面布局与计划在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。
在下面的文章中咱们将会用到一些有关于HTML的大体知识，而在你学习这篇入门教程之前，请确信你已经具有了必然的HTML基础。
下面咱们就开始一步一步利用DIV+CSS进行网页布局设计吧。
所有的设计第一步确实是构思，构思好了，一样来讲还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处置软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
下面，咱们需要依照构思图来计划一下页面的布局，认真分析一下该图，咱们不难发觉，图片大致分为以下几个部份：一、顶部部份，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:依照上图，我再画了一个实际的页面布局图，说明一基层的嵌套关系，如此明白得起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与计划已经完成，接下来咱们要做的确实是开始书写HTML代码和CSS。
写入整体层结构与CSS接下来咱们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：<!DOCTYPE html PUBLIC "-ivID。
若是id="divID"那个层中包括了一个<img></img>，那么那个img在CSS中对应的设置语法应该是#divID img {}，一样，若是是包括在class="divID"那个层中时，那么设置语法应该是.divIDimg {}，这一点希望大伙儿要分清楚了。
实验4-2使用DIV+CSS布局网页
实验4-2 使用DIV+CSS布局网页参考P204图10-34实训二，使用Div+CSS布局网页使用Div+CSS布局学院教学成果申报网站网页，布局版式采用固定宽度且居中。
网页使用Div标签划分为若干模块，并采用CSS设置样式。
(1) 打开Dreamweaver，新建一个空白HTML，找到自己的文件夹，命名为chex10-2.html 并保存文件。
(2) 在网页中插入区块标签<div></div>，然后在该区块标签内再插入5对<div></div>，并命名如下。
<div id="container"><div id="top"></div><div id="banner"></div><div id="nav"> </div><div id="main"></div><div id="bottom"></div></div>(3)第3.1步，参考P74-76的行内样式表输入CSS样式如下：<html><head><meta charset="utf-8" /><title>chex10-2.html</title></head><body style="background-image:url(images/11.jpg); background-repeat: repeat-y; margin:0px;"> <div id="container" style="width:1002px; height:auto; background:url(images/05.jpg); margin: 0 auto; overflow:hidden;"><div id="top" style="width:100%; height:84px; background:url(images/s02.jpg);"></div> <div id="banner" style="background:url(images/s04.jpg);height:182px;width:100%;"></div> <div id="nav" style="background:#BEB79E; margin:1px 22px 1px 14px; height:39px;"><ul style="list-style:none; margin:0px 30px; padding:0px;"><li style="float:left; padding:0px; margin:0px; text-align:center;"><a href="#">首页</a></li><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><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="main" style="margin:10px 10px 10px 14px; height:auto; overflow:hidden;"></div> <div id="bottom" style="background:url(images/08.jpg) no-repeat; width:100%; padding:50px 0px 10px 0px;"></div></div></body></html>(3)第3.2步，参考P74-76的内部样式表，在<head></head>中输入CSS样式如下：<html><head><meta charset="utf-8" /><title>chex10-2.html</title><style type="text/css">body {background-image:url(images/11.jpg); background-repeat: repeat-y; margin:0px;} #container {width:1002px; height:auto; background:url(images/05.jpg); margin: 0 auto; overflow:hidden;}#top {width:100%; height:84px; background:url(images/s02.jpg);}#banner {background:url(images/s04.jpg);height:182px;width:100%;}#nav {background:#BEB79E; margin:1px 22px 1px 14px; height:39px;}#nav ul {list-style:none; margin:0px 30px; padding:0px;}#nav li {float:left; padding:0px; margin:0px; text-align:center;}#main {margin:10px 10px 10px 14px; height:auto; overflow:hidden;}#bottom {background:url(images/08.jpg) no-repeat;width:100%;padding:50px 0px 10px 0px;} </style></head><body><div id="container"><div id="top"></div><div id="banner"></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><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><li><a href="#">其它</a></li></ul></div><div id="main"></div><div id="bottom"></div></div></body></html>(3)第3.3步，参考P74-76的外部样式表，在<link></link>中链接外部CSS样式文件如下：<html><head><meta charset="utf-8" /><title>chex10-2.html</title><link href="chex10-22.css" type="text/css" rel="stylesheet"></head><body><div id="container"><div id="top"></div><div id="banner"></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><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><li><a href="#">其它</a></li></ul></div><div id="main"></div><div id="bottom"></div></div></body></html>外部CSS样式文件chex10-22.css的内容如下：@charset "utf-8";body {background-image:url(images/11.jpg); background-repeat: repeat-y; margin:0px;}#container{width:1002px; height:auto; background:url(images/05.jpg); margin: 0 auto; overflow:hidden;}#top {width:100%; height:84px; background:url(images/s02.jpg);}#banner {background:url(images/s04.jpg);height:182px;width:100%;}#nav {background:#BEB79E; margin:1px 22px 1px 14px; height:39px;}#nav ul {list-style:none; margin:0px 30px; padding:0px;}#nav li {float:left; padding:0px; margin:0px; text-align:center;}#main {margin:10px 10px 10px 14px; height:auto; overflow:hidden;}#bottom {background:url(images/08.jpg) no-repeat;width:100%;padding:50px 0px 10px 0px;}注意：标签选择器、类选择器(以小数点.开头)、id选择器(以井号#开头)(4)以第3.2步为例，接着在<div id="main"></div>中添加左、右各一对<div></div>，然后在<div id="left"></div>中插入3对<div></div>，在<div id="right"></div>中也插入3对<div></div>，并在<head></head>中增加相应CSS样式如下：<div id="left"><div id="info"></div><div style="clear:both; height:6px;"></div><div id="person"></div></div><div id="right"><div id="shotcut"><div> </div></div><div style=" clear:both; height:6px;"></div><div id="show"><div id="showinfo"></div></div></div>在<head></head>中增加相应CSS样式如下：#bottom p{ font-size:12px; line-height:22px; text-align:center; color:#666;}#left{ width:192px;height:auto; overflow:hidden; float:left;}#info{ width:190px;background:url(s07.jpg) no-repeat left top #efedec; border:1px solid #b4aead;height:auto;overflow:hidden;}#infoh1{height:38px;line-height:38px;width:100%;text-align:center;font-size:14px;font-weight:bold;color:#401500;}#person{ width:192px; background:url(s11.jpg); height:292px;}#person h1{ height:60px; line-height:60px; width:100%; text-align:center; font-size:14px; font-weight:bold; color:#401500;}#person p{ font-size:12px; line-height:18px; text-indent:2em; margin:6px;}#main a{ color:#ce0000; text-decoration:none;}#main a:hover{ color:#666;text-decoration:none;}#right{ margin:0px 6px; width:768px; float:left;}#shotcut{ height:auto; overflow:hidden; border:1px solid #e1e1e1;}#show{ height:auto; overflow:hidden; border:1px solid #e1e1e1;}#right h1{ height:36px; line-height:36px; width:748px; padding-left:20px; text-align:left; font-size:14px; font-weight:bold; color:#401500; border-bottom:1px solid #e1e1e1;background:#f5f4f4;}#shotcut div{ margin:6px;font-size:12px; line-height:22px;}#show div{ margin:16px; font-size:12px;height:auto; overflow:hidden;}#showinfo ul{ margin:0px; padding:0px; list-style:none;}#showinfo li{ float:left; width:182px; }#showinfo li img{ border:1px solid #d2beb4; padding:1px; width:165px; height:115px;}#showinfo p{ line-height:22px;text-align:center;}(5)分别输入文字和插入图片，主要代码如下：<html><head><meta charset="utf-8" /><title>chex10-2.html</title><style type="text/css">*{ margin:0px; padding:0px;}body {background-image:url(images/11.jpg); background-repeat: repeat-y; margin:0px;} #container {width:1002px; height:auto; background:url(images/05.jpg); margin: 0 auto; overflow:hidden;}#top {width:100%; height:84px; background:url(images/s02.jpg);}#banner {background:url(images/s04.jpg);height:182px;width:100%;}#nav {background:#BEB79E; margin:1px 22px 1px 14px; height:39px;}#nav ul {list-style:none; margin:0px 30px; padding:0px;}#nav li {float:left; padding:0px; margin:0px; text-align:center;}#nav a{ height:38px; width:82px; line-height:38px; display:block; text-decoration:none; color:#fff; font-size:14px; font-weight:bold;}#nav a:hover{ text-decoration:none; color:#831616;}#main {margin:10px 10px 10px 14px; height:auto; overflow:hidden;}#main a{ color:#ce0000; text-decoration:none;}#main a:hover{ color:#666;text-decoration:none;}#bottom {background:url(images/08.jpg) no-repeat;width:100%;padding:50px 0px 10px 0px;}#bottom p{ font-size:12px; line-height:22px; text-align:center; color:#666;}#left{ width:192px;height:auto; overflow:hidden; float:left;}#info{ width:190px;background:url(s07.jpg) no-repeat left top #efedec; border:1px solid #b4aead;height:auto;overflow:hidden;}#info h1{height:38px;line-height:38px;width:100%;text-align:center;font-size:14px;font-weight:bold;color:#401500;}.tinfo{ margin:6px; font-size:12px; width:176px;}.tinfo .tdleft{ line-height:18px; font-weight:bold; color:#222; text-align:right; width:50%;}.tinfo .tdright{ line-height:18px; color:#ce0000; text-align:left; width:50%;}.pimg{ margin:0 50px; border:1px solid #d2beb4;padding:1px;}#person{ width:192px; background:url(s11.jpg); height:292px;}#person h1{ height:60px; line-height:60px; width:100%; text-align:center;font-size:14px; font-weight:bold; color:#401500;}#person p{ font-size:12px; line-height:18px; text-indent:2em; margin:6px;}#right{ margin:0px 6px; width:768px; float:left;}#shotcut{ height:auto; overflow:hidden; border:1px solid #e1e1e1;}#show{ height:auto; overflow:hidden; border:1px solid #e1e1e1;}#right h1{ height:36px; line-height:36px; width:748px; padding-left:20px;text-align:left; font-size:14px; font-weight:bold; color:#401500;border-bottom:1px solid #e1e1e1;background:#f5f4f4;}#shotcut div{ margin:6px;font-size:12px; line-height:22px;}#show div{ margin:16px; font-size:12px;height:auto; overflow:hidden;}#showinfo ul{ margin:0px; padding:0px; list-style:none;}#showinfo li{ float:left; width:182px; }#showinfo li img{ border:1px solid #d2beb4; padding:1px; width:165px; height:115px;}#showinfo p{ line-height:22px;text-align:center;}/*二级页面*/#subnav{ height:auto; overflow:hidden; border:1px solid #e1e1e1; background:#dfdbce;}#subnav h2{ font-size:14px;font-weight:normal;height:32px;line-height:32px;padding-left:20px;} /*变化式表格*/.td_1{ line-height:24px; border-bottom:1px dotted #666666; padding-left:10px;font-size:12px; color:#000; }.td_2{ line-height:24px; border-bottom:1px dotted #666666; padding-left:10px;font-size:12px;color:#000;}.td_1 a{ text-decoration:none; color:#000;}.td_1 a:hover{ text-decoration:none; color:#ff0000;}.td_2 a{ text-decoration:none; color:#000;}.td_2 a:hover{ text-decoration:none; color:#ff0000;}</style></head><body><div id="container"><div id="top"></div><div id="banner"></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><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><li><a href="#">其它</a></li></ul></div><div id="main"><div id="left"><div id="info"><h1>成果信息</h1><table><tr><td></td><td></td></tr></table></div><div style="clear:both; height:6px;"></div><div id="person"><h1>项目负责人</h1><img></img><p>输入文字</p></div></div><div id="right"><div id="shotcut"><h1>成果简介</h1><div>输入文字</div></div><div style=" clear:both; height:6px;"></div><div id="show"><h1>成果展示</h1><div id="showinfo"><ul><li><img></img><p>成果名称</p></li></ul></div></div></div></div><div id="bottom"><p>版权所有</p><p>地址:</p></div></div></body></html>。
DIV CSS入门基础知识教程
DIV+CSS盒子模型CSS盒子模型-什么是CSS盒子模型。
认识日常生活中盒子：常常我们遇到盒子是用于可装东西长方形、正方形的盒子。
如装皮鞋盒子、装电视机盒子，这个是比较具体的盒子。
CSS盒子：根据字面我们可以理解，CSS盒子也是装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。
这个时候我们对其对象设置高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）,即可实现像盒子一样的长方形、正方形平面盒子。
通常我们这样：一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子。
因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）等属性后即可呈现出盒子一样的长方形或正方形。
所以我们CSS盒子模型因此而得来。
日常使用CSS盒子：我们说将什么内容放入一个盒子里，我们就要想到是放入<div></div>里，脑海里就要这个概念。
假如我们说设置一个宽度为100px盒子，我们就要知道如下一个概念：Css样式代码：.yangshi{width:100px;}对应html代码：<div class="yangshi">内容</div>这个时候我们可以将<div class="yangshi">内容</div>看作为一个盒子。
DIV+CSS是什么？DIV+CSS我们可以分为DIV和CSS两个概念。
CSS：我们也讲过是什么，大家可参考网址（CSS是什么）：DIV：这个是网页HTML的标签，通常我们在HTML代码中使用DIV标签配合应用CSS类布局网页。
1、DIV是html其中一个常用标签，如span、table、h1等之类标签2、在HTML中DIV标签我们用的最多，具有代表性3、div配合css类，布局出网页< div>内容</div>< div class="divcss5">内容</div>< div id="divcss5">内容</div>DIV CSS是什么截图您可能需要了解CSS是什么？什么是html？Html代码是什么？css是什么?什么是CSS？CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，所以称之为层叠样式表（Cascading Stylesheet）简称CSS。