Div+CSS基础代码网页布局+实例教程.doc

Div+css 一，什么是CSS CSS全称为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（像素）为单位。 例子： tabletrtd height=100我的高度为100px/td/trtrtd height=50我高度为50px/td/tr/table .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.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /titleCSS 高度实例/titlestyle.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}/style/headbodydiv class=yangshi演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例/div/body/html CSS 宽度自适应 常常我们看见一个网页宽度随浏览器宽度改变而自动改变，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。如果网页总宽度为80%即width:80%;，将使此宽度知道自适应宽度为浏览器80%。当然前提是设置最外层没有宽度限制条件下。DIV CSS 自适应宽度例子：CSS样式代码： style type=text/cssbody{ margin:0 auto; text-align:center;}.yangshi{ width:80%; border:1px solid #003; margin:0 auto;}/style  Html中body div代码： div class=yangshi我是80%自适应宽度/div DIV CSS边框： border-color:#000; border-style:solid; border-width:1px;说明：以上代码为设置对象边框颜色为黑色、边框为实线、宽度为1px边框边框样式包括设置上边框：border-top：设置下边框：border-bottom 设置左边框：border-left设置右边框：border-right ： 完整DIV CSS实例：实例内容设置CSS 命名为yangshi的css 选择器，设置该属性选择器样式为边框为1px宽度实线黑色边框、宽度为200px,高度为50px的矩形。CSS 代码： div,body{ border:0; margin:5px; padding:0;}/* 初始化网页样式 */.yangshi{ border:1px solid #000; width:200px; height:50px;}/* 设置对象样式 */  HTML中对应DIV代码： div class=yangshidivcss5实例-CSS 边框实例br / CSS 实例/div CSS 背景 background CSS手册查询-background手册background-color 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat设置背景平铺重复方向background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。background-position