十天学会div css教程,div css如何布局头部导航条！

标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。

Margin:

Margin属性用于设置两个元素之间的距离。

Padding:

Padding属性用于设置一个元素的边框与其内容的距离。

Clear:

使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。

实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图：

代码：

#Container{ width:1000px; margin:0 auto;/*设置整个容器在浏览器中水平居中*/ background:#CF3;}#Header{ height:80px; background:#093;}#logo{ padding-left:50px; padding-top:20px; padding-bottom:50px;}#Content{ height:600px; /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/ margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/ background:#0FF; }#Content-Left{ height:400px; width:200px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动，实现多列效果，div Css布局中很重要的*/ background:#90C;}#Content-Main{ height:400px; width:720px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动，实现多列效果，div Css布局中很重要的*/ background:#90C;}/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/#Footer{ height:40px; background:#90C; margin-top:20px;}.Clear{ clear:both;}

div css布局的基本流程：

用css也需要切片，但组合的时候要比表格灵活很多，另外在css中切片的目的一般是为了美观而不是布局，比如为图片添加边框,制作导航栏。

css布局一般是把html先做好再用css布局，不过在做html时就要考虑到布局，添加足够的id，class属性，足够的层，有时也要添加必要的空标签.(css的html与表格时期的html有很大不同)

css布局的优势是更灵活,更精确，但也存在很多的问题，最突出的就是兼容性的问题--不同浏览器对同一段css代码会有不同的显示，这个问题困扰了无数网页制作者，如果楼主致力于css布局一定要注意这方面的问题(解决这个问题的方法通常是用 css hack)，同时还要鼓励楼主不要因为这一原因放弃css。

都是一些经典的css作品(所有作品都是完全相同的html)

先要理解一下网页的基本构成，就像人一样，他有

头

身体

脚

一般头和脚都是不变的，然后把各个部位用div做一个大的框架，然后再雕刻细节。

说白了，跟画画一个样，画草图，框架，然后描绘细节。

使用div css制作网页和布局，你必须能够认识各种代码的作用和含义都是什么，想使用DIV CSS进行网页布局最基本的HTML代码是必须要会的，其次CSS层叠样式表代码也必须要会使用

PS模板仅仅是一个模板而已，只是参照而已，=

解决这个问题的方法如下：

1、新建一个html文件，命名为test.html，用于讲解div css布局的基本流程。

2、在test.html文件内，对body进行样式初始化，设置外边距margin为0，内边距padding为0，同时使用text-align设置文字居中。

3、在test.html文件内，为了讲解方便，设置所有的div高度为200px，内容的颜色为红色。

4、在test.html文件内，使用div创建网页的头部，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。

5、在test.html文件内，使用div创建网页的中部，使用margin:0 auto设置div居中，同时设置其宽度为800px。

6、在test.html文件内，在网页的中部，创建两个div，用于将中部为两部分，每一个部分宽度为50%，左部分使用float:left设置左浮动，右部分使用float:right设置右浮动。

7、在test.html文件内，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。同时，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为#000fff。

8、在浏览器打开test.html文件，查看实现的效果，这样问题就解决了。
如何学习DIV CSS及学习路线

编写网页必须要学习的是DIV CSS布局，操作简单，容易上手。作为一个小白，如何学习DIV CSS。下面我们介绍一个快速的学习方法。首先当然是看手册，学习基本的语法和知识点。你可以找到PHP中文网,里面的知识点应有尽有。找到css在线手册，将基本知识点大致熟悉一下。接着就是在网站上找视频学习，有关DIV CSS布局的视频教程。推荐兄弟连高洛峰div css视频教程和网站原创视频独孤九贱(2)_CSS视频教程点开视频目录，先看下目录，因为目录高度概括了一节视频的知识点。点开视频，一个视频是一个知识点，可以详细的学习。若是想看到效果的话，你可以进入图文教程里，可以编写代码，变看到效果。

CSS样式表代码布局基础教程

CSS样式表代码布局基础教程
　　CSS样式表代码布局基础教程—课程10：外部样式表(一) 　　十、外部样式表
　　外部样式表是把各种样式单独存在一个文件里，供其他多个网页调用，下面我们来看一个练习；
　　1、文本编辑器
　　1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；
　　2）点菜单“文件－保存”命令，以“lx10.html”为文件名，类型所有文件，编码 UTF-8，保存到自己的文件夹；
　　3）按照基础02课的方法，输入、和的内容；
　　2、外部样式表
　　1）点菜单“文件－新建”，新建一个空白文档，保存文件名为 style.css ，位置跟 lx10 放一起，这是一个单独的文件；
　　2）在里面输入下面的内容；
　　/* by TeliuTe */
　　body {
　　background-color: #ccffff;
　　font-size:1.2em;
　　span {
　　color:#800000;
　　.myblue {
　　color:blue;
　　3）第一行 /* ... */ 是注释，注明作者版权用途等，根据自己的需要，
　　下面的内容跟内部样式表相同，各个标签和它的样式，保存一下文件；
　　4）回到 lx10.html 文档中，在 head 区内加上下面一行外部引用标识；
　　5）然后在 body 区内，输入下面的内容；
　　1）点菜单“文件－新建”，新建一个空白文档，保存文件名为 style.css ，位置跟 lx10 放一起，这是一个单独的文件；
　　6）保存一下文件，回到自己文件夹中，打开 lx10 网页，看一下效果；
　　7）在多个网页具有相同样式时，使用外部样式表可以节省空间和减小网页大小；
　　本节学习了外部样式表的使用方法，你成功地完成了本教程，欢迎继续学习本站的其他课程！
　　本教程由86团学校TeliuTe制作 http://teliute.laxjyj.com
　　（计算机基础知识，电脑知识入门学习，请到http://电脑知识网）
　　CSS标签大全(一) 　　 字体属性：(font)
　　大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
　　样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
　　行高 line-height: normal;(正常) 单位：PX、PD、EM
　　粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
　　变体 font-variant: small-caps;(小型大写字母) normal;(正常)
　　大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
　　修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
　　常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
　　 背景属性：(background)
　　色彩background-color: #FFFFFF;
　　图片background-image: url();
　　重复background-repeat: no-repeat;
　　滚动background-attachment: fixed;(固定) scroll;(滚动)
　　位置background-position: left(水平) top(垂直);
　　简写方法 background:#000 url(..) repeat fixe辅助图片一律用背景处理d left top;
　　 区块属性： (Block)
　　字间距letter-spacing: normal; 数值
　　对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
　　缩进text-indent: 数值px;
　　垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
　　词间距word-spacing: normal; 数值
　　空格white-space: pre;(保留) nowrap;(不换行)
　　显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)
　　 方框属性：(Box)
　　width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左
　　 边框属性： (Border)
　　border-style: dotted(点线); dashed(虚线); solid(实线); double(双线); groove(槽线); ridge;(脊状) inset;(凹陷) outset;
　　border-wid
　　th:; 边框宽度
　　border-color:#;
　　简写方法border：width style color;
　　 列表属性： (List-style)
　　类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
　　位置list-style-position: outside;(外) inside;
　　图像list-style-image: url(..);
　　 定位属性： (Position)
　　Position: absolute; relative; static;
　　visibility: inherit; visible; hidden;
　　overflow: visible; hidden; scroll; auto;
　　clip: rect(12px,auto,12px,auto) (裁切) css属性代码大全
　　 一 CSS文字属性： 　　color : #999999; /*文字颜色*/
　　font-family : 宋体,sans-serif; /*文字字体*/
　　font-size : 9pt; /*文字大小*/
　　font-style:itelic; /*文字斜体*/
　　font-variant:small-caps; /*小字体*/
　　letter-spacing : 1pt; /*字间距离*/
　　line-height : 200%; /*设置行高*/
　　font-weight:bold; /*文字粗体*/
　　vertical-align:sub; /*下标字*/
　　vertical-align:super; /*上标字*/
　　text-decoration:line-through; /*加删除线*/
　　text-decoration: overline; /*加顶线*/
　　text-decoration:underline; /*加下划线*/
　　text-decoration:none; /*删除链接下划线*/
　　text-transform : capitalize; /*首字大写*/
　　text-transform : uppercase; /*英文大写*/
　　text-transform : lowercase; /*英文小写*/
　　text-align:right; /*文字右对齐*/
　　text-align:left; /*文字左对齐*/
　　text-align:center; /*文字居中对齐*/
　　text-align:justify; /*文字分散对齐*/
　　 vertical-align属性 　　vertical-align:top; /*垂直向上对齐*/
　　vertical-align:bottom; /*垂直向下对齐*/
　　vertical-align:middle; /*垂直居中对齐*/
　　vertical-align:text-top; /*文字垂直向上对齐*/
　　vertical-align:text-bottom; /*文字垂直向下对齐*/
　　 二、CSS边框空白
　　padding-top:10px; /*上边框留空白*/
　　padding-right:10px; /*右边框留空白*/
　　padding-bottom:10px; /*下边框留空白*/
　　padding-left:10px; /*左边框留空白*/
　　 三、CSS符号属性：
　　list-style-type:none; /*不编号*/
　　list-st
　　yle-type:decimal; /*阿拉伯数字*/
　　list-style-type:lower-roman; /*小写罗马数字*/
　　list-style-type:upper-roman; /*大写罗马数字*/
　　list-style-type:lower-alpha; /*小写英文字母*/
　　list-style-type:upper-alpha; /*大写英文字母*/
　　list-style-type:disc; /*实心圆形符号*/
　　list-style-type:circle; /*空心圆形符号*/
　　list-style-type:square; /*实心方形符号*/
　　list-style-image:url(/dot.gif); /*图片式符号*/
　　list-style-position: outside; /*凸排*/
　　list-style-position:inside; /*缩进*/
　　 四、CSS背景样式：
　　background-color:#F5E2EC; /*背景颜色*/
　　background:transparent; /*透视背景*/
　　background-image : url(/image/bg.gif); /*背景图片*/
　　background-attachment : fixed; /*浮水印固定背景*/
　　background-repeat : repeat; /*重复排列-网页默认*/
　　background-repeat : no-repeat; /*不重复排列*/
　　background-repeat : repeat-x; /*在x轴重复排列*/
　　background-repeat : repeat-y; /*在y轴重复排列*/
　　 指定背景位置 　　background-position : 90% 90%; /*背景图片x与y轴的位置*/
　　background-position : top; /*向上对齐*/
　　background-position : buttom; /*向下对齐*/
　　background-position : left; /*向左对齐*/
　　background-position : right; /*向右对齐*/
　　background-position : center; /*居中对齐*/
　　 五、CSS连接属性：
　　a /*所有超链接*/
　　a:link /*超链接文字格式*/
　　a:visited /*浏览过的链接文字格式*/
　　a:active /*按下链接的格式*/
　　a:hover /*鼠标转到链接*/
　　 鼠标光标样式： 　　链接手指 CURSOR: hand
　　十字体 cursor:crosshair
　　箭头朝下 cursor:s-resize
　　十字箭头 cursor:move
　　箭头朝右 cursor:move
　　加一问号 cursor:help
　　箭头朝左 cursor:w-resize
　　箭头朝上 cursor:n-resize
　　箭头朝右上 cursor:ne-resize
　　箭头朝左上 cursor:nw-resize
　　文字I型 cursor:text
　　箭头斜右下 cursor:se-resize
　　箭头斜左下 cursor:sw-resize
　　漏斗 cursor:wait
　　光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}
　　 六、CSS框线一览表：
　　border-top : 1px solid #6699cc; /*上框线*/
　　border-bottom : 1px solid #6699cc;
　　/*下框线*/
　　border-left : 1px solid #6699cc; /*左框线*/
　　border-right : 1px solid #6699cc; /*右框线*/
　　以上是建议书写方式,但也可以使用常规的方式 如下:
　　border-top-color : #369 /*设置上框线top颜色*/
　　border-top-width :1px /*设置上框线top宽度*/
　　border-top-style : solid/*设置上框线top样式*/
　　其他框线样式
　　solid /*实线框*/
　　dotted /*虚线框*/
　　double /*双线框*/
　　groove /*立体内凸框*/
　　ridge /*立体浮雕框*/
　　inset /*凹框*/
　　outset /*凸框*/
　　 七、CSS表单运用：
　　文字方块
　　按钮
　　复选框
　　选择钮
　　多行文字方块
　　下拉式菜单 选项1选项2
　　 八、CSS边界样式：
　　margin-top:10px; /*上边界*/
　　margin-right:10px; /*右边界值*/
　　margin-bottom:10px; /*下边界值*/
　　margin-left:10px; /*左边界值*/
　　 CSS 属性： 字体样式(Font Style) 　　序号 中文说明 标记语法
　　1 字体样式 {font:font-style font-variant font-weight font-size font-family}
　　2 字体类型 {font-family:"字体1","字体2","字体3",...}
　　3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
　　4 字体风格 {font-style:inherit|italic|normal|oblique}
　　5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
　　6 字体颜色 {color:数值;}
　　7 阴影颜色 {text-shadow:16位色值}
　　8 字体行高 {line-height:数值|inherit|normal;}
　　9 字 间 距 {letter-spacing:数值|inherit|normal}
　　10 单词间距 {word-spacing:数值|inherit|normal}
　　11 字体变形 {font-variant:inherit|normal|small-cps }
　　12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
　　13 字体变形 {font-size-adjust:inherit|none}
　　14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
　　 文本样式(Text Style) 　　序号 中文说明 标记语法
　　1
　　行 间 距 {line-height:数值|inherit|normal;}
　　2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
　　3 段首空格 {text-indent:数值|inherit}
　　4 水平对齐 {text-align:left|right|center|justify}
　　5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
　　6 书写方式 {writing-mode:lr-tb|tb-rl}
　　 背景样式 　　序号 中文说明 标记语法
　　1 背景颜色 {background-color:数值}
　　2 背景图片 {background-image: url(URL)|none}
　　3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
　　4 背景固定 {background-attachment:fixed|scroll}
　　5 背景定位 {background-position:数值|top|bottom|left|right|center}
　　6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
　　 框架样式(Box Style) 　　序号 中文说明 标记语法
　　1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}
　　2 补 白 {padding:padding-top padding-right padding-bottom padding-left}
　　3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}
　　宽度值： thin|medium|thick|数值
　　4 边框颜色 {border-color:数值 数值 数值 数值} 数值：分别代表top、right、bottom、left颜色值
　　5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
　　6 边 框 {border:border-width border-style color}
　　上 边 框 {border-top:border-top-width border-style color}
　　右 边 框 {border-right:border-right-width border-style color}
　　下 边 框 {border-bottom:border-bottom-width border-style color}
　　左 边 框 {border-left:border-left-width border-style color}
　　7 宽 度 {width:长度|百分比| auto}
　　8 高 度 {height:数值|auto}
　　9 漂 浮 {float:left|right|none}
　　10 清 除 {clear:none|left|right|both}
　　 分类列表 　　序号 中文说明 标记语法
　　1 控制显示 {display:none
　　|block|inline|list-item}
　　2 控制空白 {white-space:normal|pre|nowarp}
　　3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
　　4 图形列表 {list-style-image:URL}
　　5 位置列表 {list-style-position:inside|outside}
　　6 目录列表 {list-style:目录样式类型|目录样式位置|url}
　　7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
　　word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。break-word是控制是否断词的。normal是默认情况，英文单词不被拆开。break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。为了解决长串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。所以，综上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
　　CSS样式表代码布局基础教程—课程9：链接样式 　　 九、链接样式
　　使用伪类可以设置链接的样式，比如改变颜色、去掉下划线等，下面我们来看一个练习；
　　1、文本编辑器
　　1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；
　　2）点菜单“文件－打开”命令，打开自己文件夹里的lx7.html
　　3）再点菜单“文件－另存为”命令，保存文件名为 “lx9.html”
　　2、设置伪类
　　1）在 head 区内，输入内部样式表，设定各个 的锚标记样式，如下；
　　2）第一个 a 设定全局锚点的样式，用块显示、宽度是50像素、背景色是浅绿色，接下来是锚点 a 的成员：
　　link 是链接，设定页面中的链接样式，颜色蓝色，不带下划线，
　　visted 是访问过的链接，设定样式为栗色、不带下划线，
　　active 是按下鼠标时的链接，设定颜色为绿色、无下划线，
　　hover 是鼠标移过来悬停，设定颜色为红色、有下划线，背景色改成黄色，hover 放在其他几个成员的后面；
　　3）保存一下文件，回到自己的文件夹中，打开 lx9 网页，试着用鼠标点击、拖动链接，看一下效果；
　　本节学习了设置链接样式的基本方法，如果你成功地完成了练习，请继续学习下一课内容；
　　CSS样式表代码布局基础教程—课程8：内部样式表(一)
　　 八、内部样式表
　　内部样式表放在网页的...区内，集中在一起方便管理，下面我们来看一个练习；
　　1、文本编辑器
　　1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；
　　2）点菜单“文件－保存”命令，以“lx8.html”为文件名，类型所有文件，编码 UTF-8，保存到自己的文件夹；
　　3）按照基础02课的方法，输入、和的内容；
　　2、内部样式表
　　1）对系统标签使用样式，这会影响所有的这种标签，在 head 区输入下面的代码；
　　2）第一行是样式表开始，最后是样式表结束， 是注释标签，
　　首先是对 body 标签设置样式，这样凡是在 body 区里的内容，都会使用这个样式，设置背景色和文字大小
　　然后对 span 标签设置样式，设置内容的颜色，以后凡是用到 span 的地方，都使用这个颜色；
　　3）接着在 body 区里输入下面的内容；
　　1）对系统标签使用样式，这会影响所有的这种标签，在 head 区输入下面的代码；
　　4）保存一下文件，回到自己的文件夹里，打开 lx8 网页，看一下效果；
　　5）自定义样式选择符，除了系统的标签外，也可以自己定义需要的样式标记，在 head 的.样式表里加入下面的代码；
　　.myblue {
　　color:blue;
　　前面的点，表示这是一个通用的样式，可以重复使用，如果是 #号，表示是一个标识符，是专用唯一的 id，myblue 是自定义的样式名称；
　　6）在 body 区里加入下面的代码，加在上一行的前面，再加上
　　标签分成两段；
　　7）这儿使用的是 span，里面的 class 套用的是 myblue 样式，替换了前面设的样式，
　　保存一下文件，到浏览器中看看效果；
　　本节学习了使用内部样式表的基本方法，如果你成功地完成了练习，请继续学习下一课内容；
　　CSS样式表代码布局基础教程—课程7：ul列表(一) 　　 七、ul 列表
　　对于排列有序的条目，可以使用列表来实现，下面我们来看一个练习；
　　1、文本编辑器
　　1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；
　　2）点菜单“文件－保存”命令，以“lx8.html”为文件名，类型所有文件，编码 UTF-8，保存到自己的文件夹；
　　3）按照基础02课的方法，输入、和的内容；
　　2、使用列表（计算机基础知识，电脑知识入门学习，请到http://电脑知识网）
　　1）在后面接着输入下面的代码；
　　第一课
　　第二课
　　第三课
　　2）前面的
　　建立一个列表，里面的各个
　　是列表项，各个列表项排列对齐缩进，前面有一个圆点列表符号，
　　保存一下文件，到自己文件夹里，打开 lx7 网页，看看列表的效果，这儿加了 超级链接；
　　3）如果要去掉前面的圆点，可以在 ul 的样式里设定，前面的缩进也可以设定内边距为 0，输入下面的代码；
　　第一课
　　第二课
　　第三课
　　4）保存一下，再到浏览器里看一下，三个列表都排到了左边对齐；
　　5）如果要排列成横向水平的菜单样式，可以在每个列表项里加上 float 属性，防止重叠再设定一个宽度，代码如下；
　　6）保存一下，再到浏览器里看一下，三个列表项都水平排列了；
　　本节学习了列表的基本使用方法，如果你成功地完成了练习，请继续学习下一课内容；
　　CSS样式表代码布局基础教程—课程6：div布局(一) 　　 六、div 布局
　　默认 div 占据一行，第二个 div 到下一行去，怎样用 div 进行分栏布局，我们来看一个练习；
　　1、文本编辑器
　　1）打开记事本或 gedit、leafpad 文本编辑器，gedit 在查看菜单里选择“HTML”；
　　2）点菜单“文件－打开”命令，打开上次的 lx5 网页，再点“文件－另存为”，以“lx6.html”为文件名，保存到自己的文件夹；
　　3）按照两列并排来进行布局；
　　2、定位布局
　　1）在下面加一个
　　标签，作为主框架，在标签里加入下面的样式；
　　2）前面的 id 是这个 div 的标识符，用来标记这个 div 容器，
　　在里面的样式里设置了颜色、边框、内边距，
　　设定了固定宽度 604，高度 202，这个可以计算出来，根据下面两列的宽度再加上内边距；
　　3）修改里面的古诗的 div 样式，加上背景色、去掉内外边距，最后加上一个左浮动 float:left
　　4）在这个后面，再加上另一个 div，样式相同，里面输入另一首古诗 ；
　　5）这儿的 float:left; 让这个 div 框，跟上一个框并排左对齐，而不是到下一行去，
　　最后再加一个标签，结束最外面的大框架；
　　6）保存一下文件，回到自己文件夹里，打开 lx6 网页看看效果；
　　本节学习了使用 div 布局的基本方法，如果你成功地完成了练习，请继续学习下一课内容；
;

如何从零开始学习DIV CSS_htmlcss_WEB-ITnose

CSS是样式,DIV是层.DIV CSS是网站标准（web标准），通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别.因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV CSS的方式实现各种定位。 1：学会HTML语言，再学习DIV CSS时会得心应手。 看得懂HTML语法，那么世界上80%的网站都能被你看穿。HTML语言很好学，一定要熟记常用的一些代码，因为有了像dreamweaver这样的帮助生成html代码的工具,所以很多人都忽略了HTML的学习.学会了HTML互联网中最基本的语言之后，在学习DIV CSS时，你会发现：原来DIV CSS也就那样，小菜一碟。 推荐网站：HTML在线学习网站：http://www.w3school.com.cn/html/html_intro.asp 2.使用Dreamweaver的代码模式来编写DIV和CSS。 对于网页设计初学者来说，直接使用记事本、Notepad等工具来书写代码很困难。因为Dreamweaver的代码模式有提示功能，可以在保证语法编写的正确性。并且对不熟悉的语法可以一次性书写正确。 如图所示：书写div，html时DW的提供功能。 书写CSS时DW工具栏右侧的CSS可视化编辑功能. 我学习DIV CSS时就是从Dreamweaver的代码模式学起的，也许不是最好，但很实用。 推荐网站：CSS在线学习网站：http://www.w3school.com.cn/css/ 3：养成良好的书写习惯. 有良好的生活习惯，说明这人会过日子，有良好的CSS书写习惯，说明这人做事严谨。写css的时候网上有很多推荐的规范，比如菜单类用menu，版权用copyright（CoryRight），底部用footer等等，在书写顺序上一般是：显示属性-自身属性-文本属性。当然这些都没有硬性的规定，但是遵循一些不成文的规定不是坏事，这样让自己写的代码，容易让别人读懂，搜索引擎也更加喜欢。 4：只有目的明确，结果清晰，过程才最高效，才不会轻易被干扰，被改变方向。 CSS DIV网页样式与布局精通视频教程：http://pcedu.pconline.com.cn/videoedu/ztsp/0904/1618470.html http://www.aa25.cn/div_css/535.shtm

如何使用div css进行网页布局

Div标签，我们称为层，div是块状元素，结合css能够很好的进行网页布局我们先来写一段div css的代码，让大家看下div是什么样的
div{width:300px;height:300px;border:1px solid red}

上面的一段代码，然后我们运行一下，在网页当中显示一个宽高各位300像素，边框为红色的正方形然后我们来如何布局网站首页，首页的样子是这样的上面一块，作为轮播图下面一块是导航，然后是内容部分，内容部分分为左右俩块，然后最下面以块，我们来看看是如何制作的，制作网页，我们要有html基础与css的基础，比如id选择器与类选择器等在使用div css进行网页布局，我们要使用float，如果有小伙伴们不知道这块的知识，可以去参考Gxl网上面的css的视频教程或者文字教程，如上所述，我们要做的例子

*{margin:0;padding:0;}#div{width:100%;height:300px;background:#f69;}#daohang{width:100%;height:50px;background:#f60;}ul li{list-style:none;float:left;line-height:50px;margin-left:130px;}#bdy{width:100%;height:500px;background:green;}#left{width:30%;height:500px;background:red;float:left;}#right{width:70%;height:500px;background:#ccc;float:left;}#but{width:100%;height:200px;background:#f60;}

其实代码并没有多少，也很简单，但是你们注意margin与padding 的区别 这个还是很重要的，margin ,边界与边界之间的距离，padding 内容与边界之间的距离，有很多朋友说css里面的属性记不住，对于这块，我觉得你记不住，是因为你练习地少了，只有自己多写多练，我个人觉得这样才会记住！
怎样用DIV和CSS做导航条

给大家做一个小列子，采用DIV和CSS来实现，同时我们并不用图片来做背景，直接用背景色来实现，鼠标悬停在对应栏目的名称后对应的背景蓝色变深。一般导航条采用ul li列表布局，这里也不例外，也采用列表标签ul li CSS布局。在实际DIV CSS布局项目中，一般不会只使用一次ul li列表，避免干扰其他地方使用ul li布局，避免对ul li设置样式影响其他地方，所以特地这里对ul设置一个#nav命名（一般导航条以nav或menu为CSS命名，这里选择nav），假如导航条背景宽度100%全屏或固定宽度均可，这里就由ul#nav控制，这里就设置100%全屏宽度蓝色背景。这里一个技术点，对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排，从而让li并排布局。然后需要对ul li里的a标签设置display:block的，但a父级li不设置具体宽度，所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。具体布局高度、颜色值、栏目间距距离均需要通过软件获得具体案例p css代码在引人初始化模板基础上进行案例代码布局。新增各代码如下：CSS代码：ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} ul#nav li{display:inline; height:60px} ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px; color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px} ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/这里ul和#nav紧贴没有空格，代表#nav只针对ul标签设置，标签只有ul标签使用id=”nav”设置样式才能生效。以上代码没有在ul外再设置DIV，这样可以节约一个DIV实现同样布局。HTML代码

完整HTML源代码：

完整CSS源代码：@charset "utf-8"; body, p, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} /* \5B8B\4F53 代表 宋体 */ ol, ul ,li{list-style:none} img {border: 0; vertical-align:middle} body{color:#000000;background:#FFF; text-align:center} .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px} a{color:#000000;text-decoration:none} a:hover{color:#BA2636} .red ,.red a{ color:#F00} .lan ,.lan a{ color:#1E51A2} .pd5{ padding-top:5px} .dis{display:block} .undis{display:none} ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto} ul#nav li{display:inline; height:60px} ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px; color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px} ul#nav li a:hover{background:#0095BB}这样就是一份完整的导航条了，用我们的CSS和DIV来实现的，有兴趣的朋友可以深度研究一下。相关阅读：HTML里的checkbo怎么使用链接样式怎么用CSS设置怎么用css写虚线边框
div css如何布局头部导航条！

采用列表标签ul li CSS布局 浮动。
实现代码;
#nav {height: 30px;width: 100%;background-color: #c00;}#nav ul {margin: 0 0 0 30px;padding: 0px;font-size: 12px;color: #FFF;line-height: 30px;white-space: nowrap;}#nav li {list-style-type: none;display: inline;}#nav li a {text-decoration: none;font-family: Arial, Helvetica, sans-serif;padding: 7px 10px;color: #FFF;}#nav li a:hover {color: #ff0;background-color: #f00;}

*{ text-align:center;}span{ font-size:30px;}.head{ width:95%; height:50px; border:3px solid red; color:red; position:fixed; //这个定位方式是最重要的，他可以将盒子固定在指定的位置 top:0px; //这就是定位的位置，距离顶端0px}.head_black{ width:100%; height:56px;}.content{ width:100%; height:1000px; border:3px solid blue; color:blue;}

直接贴我看了题写的实例代码吧。我想你应该是这个意思吧。把导航栏固定在最上部。重点都在里面，如有疑问 欢迎追问

浮动或定位

你最好买本书从基础开始学，最好不要动不动找人要代码，不然你学不会的。

推荐现成的导航源代码，来自渴切-来源中文css框架，供你参考

ul li{
float:left;
/*最好ul标签设置下宽度，宽度足够容纳下所有浮动的li标签，这样就不会导致调整浏览器时影响标题的布局了，
li 标签默认情况下是向下排列的，这种效果一帮做新闻列表等，或纵向的标题菜单。
希望横向排列 li标签， 最重要就是设置 css 的 float ：left；横向标题的基本效果就出来了*/
}

• 标题1
• 标题2
• 标题3
• 标题4

标题大小可以根据自己意愿调宽高

1、新建一个html页面。

2、在html页面上新建三个div标签，分别为这三个div添加class为:header、main、footer。

3、创建style标签用于设置css样式。在title标签下创建一个style标签，然后为header类设置div的高、背景颜色样式。

4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。

5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。

6、保存好html文件后使用浏览器查看效果。

7、在浏览器上看到div标签和浏览器存在一些空白的像素，为了去掉这些空白的像素我们需要把body标签设置外边框。
总结几种常见的div css布局实例

学习前端html和css技术，最重要的是在于实践，无论朋友们看了多少的教程，视频课程或者是相关的书籍，只有亲手去实践才会对这些有全新的认识。有时看别人代码一眼能看懂，自己却无从下手写起；有时不能理解的技术知识与问题，怎么思考也想不明白等等。本篇文章就给朋友们介绍一下各种常见的 div css 布局方式和实践技巧。DIV CSS布局相关内容1. DIV CSS布局样式详解a 符合 W3C标准，微软等公司均为 W3C支持者。b 能够对网页的布局、字体、颜色、背景等图文效果实现更加精确的控制,调整更加方便,现在很多网站均使用p CSS框架模式,更加印证p CSS是大势所趋c 将格式和结构分离，有利于格式的重用及网页的修改维护，在团队开发中更容易分工合作而减少相互关联性d CSS的极大优势表现在简介的代码，制作体积更小，下载更快，节省大量带宽，而且众所周知，搜索引擎喜欢简洁的代码。e 利用CSS样式表，可以将站点上的所有网页都只指向同一个CSS文件，可以实现许多网页同时更新。2. Html CSS布局技巧的代码分享我们都知道，每个人都有不同的嗜好，有的人喜欢吃甜食，有的人喜欢吃辣的东西，有的人不喜欢吃芹菜，有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。而vertical-align呢，是个比较挑食的家伙，它只喜欢吃果冻，从小吃果冻长大，没有了果冻，它就会闹脾气，对你不理不睬。我称之为“果冻依赖型元素”，又称之为“inline-block依赖型元素”，也就是说,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。3. DIV CSS布局中自适应高度的解决方法要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。4. 详解CSS布局之圣杯布局与双飞翼布局示例html代码中，middle部分首先要放在container的最前部分，然后是left，right 1）将三者都设置 float:left, position:relative (因为相对定位后面会用到） 2）middle设置 width:100% 占满一行 3）此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100% 4）这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 210px 5）middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px 6）同理，right要拉到middle所在行的最右边，使用 margin-left:-210px，right:-210px 5. 必看的css布局小技巧分享当页面左右宽度缩小时，为了避免出现左右滚动条的糟糕体验，就可以用到max-width啦！页面比宽度小时，会自动缩小哦～对元素设置box-sizing:border-box后，确定宽度后再设置padding和border，不会改变宽度。可以对全局设置边框自适应内容的大小，不会出现overflow的情况6. CSS布局居中对齐，左侧定宽右侧自适应详细介绍CSS页面布局是web前端开发的最基本的技能，本文将介绍一些常见的布局方法，涉及到盒子布局，column布局，flex布局等内容。本文中，你可以看到一些水平垂直居中的方法，左侧固定宽度，右侧自适应的一些方法。相关问答1. css布局 table cellspacing2. 脚部布局和CSS布局问题3. css布局的设置问题【相关推荐】1. DIV CSS布局入门教程：5个div css零基础入门教程推荐2. DIV CSS 盒子模型知识总结，轻松掌握div css布局

CSS DIV网页制作的一般思路和过程是什么样的呢

楼主你好!
div css书写基础教程:新手学习基本思路
对于新手，感觉乱是正常的，div css最重要的就是的写,去熟悉它的每一个标签跟语法;很多新手因为没有好的方向跟方法去实施它，所以感觉不知道从何入手;
迷失也曾在知道中给人简单解答过这个问题，下面在本站中跟大家聊聊:
1.从局部出发:从一个小的部分的样式写起,目的是让你熟悉css样式的元素有哪些，那些元素都有一些什么作用，怎么样使用这些元素，以及div css的属性有哪些？等等这一步是基础!
比如，我有一个层,里面包括标题列表还有背景图片，层的宽度高度这些属性，还要设置标题列表的字体样式颜色等等，能用的属性都用上，从一个小的层，实现各种能表现出来的形式;
2.整体布局很重要:有了第一步基础，你可以尝试布局框架，把网页分成一块一块，先把框框写好，各浏览器中测试不要错位了，可以先用不同的背景颜色看效果，不错位就行，框架ok了之后,这样你的而已应该就没问题了，你可以尝试更多方式写布局，两栏式，三栏式等都可以.
3.把整体跟局部结合,也就是把你第一步中的基础东西写好，往框架的层里面填充就好了！所以第一步很关键!
建议反复用这三步多加练习，你的css技术一定会上一台阶的!
如果你觉得说得有道理,请加分!
http://www.mianfeimoban.com/dreamwaver_jc/3227.html