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

1、Div+CSS基础代码网页布局+实例教程Div+css 一，什么是CSS CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。2DIV+CSS 简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构（框架）标签，像、等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。表格以前html直接设置高度 width=300这种

2、方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。例子：我的高度为100px我高度为50px分别设置了高度为100px和50px的两行表格DIV的布局方法CSS 代码.yangshi height:50px; width:50px; overflow:hidden; border:1px solid #666;Html body内代码：演示，内容测试内容高度超出演示实例，divcss5实例完整CSS html最小高度实例代码： CSS 高度实例.yangshi min-height:50px; _height:50px;width:150px;border:1px solid #6

3、66;演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例CSS 宽度 传统Html 宽度属性单词：width 如width=300; CSS 宽度属性单词：width 如width:300px;HTML宽度与DIV+CSS对比1、传统html中宽度width=300，即设置对应元素宽度为300px（像素）。而宽度值后无需跟单位，默认情况下以像素（px）为单位。 如：我的宽度为300px 即：设置了对应表格td的宽度为300px.2、div css中宽度设置width:300px;，即设置对应CSS样式为300px，这里需要跟单位。 如：#header wi

4、dth:300px; 即：定义header CSS选择器样式为300px宽度。而在标签运用：我的宽度为300px宽度CSS 宽度自适应常常我们看见一个网页宽度随浏览器宽度改变而自动改变，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。如果网页总宽度为80%即width:80%;，将使此宽度知道自适应宽度为浏览器80%。当然前提是设置最外层没有宽度限制条件下。DIV CSS 自适应宽度例子：CSS样式代码： body margin:0 auto; text-align:center;.yangshi width:80%; border:1px solid #003; margin:0 au

5、to;Html中body div代码： 我是80%自适应宽度CSS边框CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性Html表格控制边框：border=1 bordercolor=#000000说明：控制表格边框宽度为1px，颜色为黑色，默认为实线样式边框DIV CSS边框：border-color:#000; border-style:solid; border-width:1px;说明：以上代码为设置对象边框颜色为黑色、边框为实线、宽度为1px边框。边框样式包括设置上边框：border-top：设置下边框：border-bottom :设置左边

6、框：border-left:设置右边框：border-right ：边框显示样式：border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 参数值解释：none : 无边框。与任何指定的border-width值无关hidden : 隐藏边框。IE不支持dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线so

7、lid : 实线边框double : 双线边框。两条单线与其间隔的和等于指定的border-width值groove : 根据border-color的值画3D凹槽ridge : 根据border-color的值画菱形边框inset : 根据border-color的值画3D凹边outset : 根据border-color的值画3D凸边例子： 设置上边框为1px实线黑色边框。 border-top-color:#000; border-top-style:solid; border-top-width:1px;或简写 border-top:#000 solid 1px;完整DIV CSS实例

8、：实例内容设置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代码： divcss5实例-CSS 边框实例这是一个 CSS 实例CSS 背景background CSS手册查询-background手册background-co

9、lor 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat设置背景平铺重复方向background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。background-position 设置或检索对象的背景图像位置。图片背景样式（固定、滚动）实现这个效果使用CSS单词是background-attachment 当然通常情况下背景默认是固定的如果是自己使用CSS background简写则如上图。background-attachment使用解析：background-attachment:fixed； 背景固

10、定background-attachment:scroll 背景图像是随对象内容滚动浮动 floatfloat的作用：通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。float语法： float : none | left |right 参数值： none : 对象不浮动left : 对象浮在左边right : 对象浮在右边效果图：如下。Css样式实例内容，我们让文字和图片在一个固定宽度div层内，让蓝色背景文字内容居右，小图片居左。例子： 1、首先我们设置一个最外层的宽度为300px，高度为200px的css命名为box的css选择器代码如下（知识点px是什么意思）.

11、boxwidth:300px; height:200px; 2、设置box内的文字内容部分css样式命名为yangshi，并设置背景为蓝色，宽度为120px，居右浮动 .yangshi width:120px; float:right; background:#0066FF; 3、设置图片居左浮动div+css样式 img float: left; 4、body内的div布局，代码如下 网站，测试内容 说明：这里img标签是链接外部图片，图片名为demo.gif接下来我们演示使用div+css让这里小图片居右（上个例子是居左），蓝色背景文字内容区居左。这里我们只需要改变yangshi的floa

12、t:right;为float:left和图片css样式img float: left;为img float: right;CSS代码如下： .boxwidth:300px; height:200px;.yangshi width:120px; float:right; background:#0066FF;img float:left;CSS 文字 css fontDIV+Css开发中设置字体常用css属性单词英文css fontfont、font-family(字体)、font-size（字大小）、font-style（字样式）、font-weight（加粗）、text-decoration

13、（下划线）、font-variant（字母大小写）、text-transform（英文大小写）、letter-spacing（间隔）例子：加粗Html常规加粗标签以前html直接对对象加粗的标签如下：或两者效果相同。加粗实例，代码如下： 我被加粗 我也被加粗了 我未被加粗CSS 加粗基础技巧实例CSS 代码 .yangshi1 font-weight:bold.yangshi2 font-weight:800Div html代码： 我被加粗我也被加粗了我未被加粗Padding 属性Padding属性包含了padding left ：左补距离（设置距左内边距） ；padding top：头顶补距

14、离（设置距顶部内边距）；padding right ：右补距离（设置距右内边距） ；padding bottom ：底补距离（设置距低内边距）。其二维构建图可见CSS属性二维图。Padding 解析图padding left用法：padding-left:10px; 这个意思距离左边补距10像素，可跟百分比如（padding-left:10%; 距离左边补10%的距离）；padding right用法：padding-right:10px; 这个意思距离右边补距10像素，可跟百分比如（padding-right:10%; 距离右边补10%的距离）；padding top用法：padding-t

15、op:10px; 这个意思距离顶边补距10像素，可跟百分比如（padding-top:10%; 距离顶边补10%的距离）；padding bottom用法：padding-bottom:10px; 这个意思距离低边补距10像素，可跟百分比如（padding-bottom:10%; 距离底边补10%的距离）；注意padding中间的链接“ - ”号，设置距离值时用“ ： ”并赋予值，并以“ ； ”结束，并且全部用小写半角字母。CSS 注解 作用：css注解（css 注释）可以帮助我们对自己写的CSS文件进行说明，如说明某段CSS代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便

16、性，同时在团队开发网页是时候合理适当的注解有利于团队看懂css样式是对应html哪里的，以便顺利快速开发div css网页。CSS注解是以“/*”斜杠一个星号开始，以“*/”星号斜杠结束，注解说明内容放到“/*”“*/”中间。css注解div+CSS注释示例如下：/* css注解实例css注释实例 */* body定义 */body text-align:center; margin:0 auto;/* 头部css定义 */#header width:960px; height:120px;CSS超链接超链接的代码DIV+CSS解析如下：href 后跟被链接地址目标网站地址这里是target

17、_blank - 在新窗口中打开链接 _parent - 在父窗体中打开链接 _self - 在当前窗体打开链接,此为默认值 _top - 在当前窗体打开链接，并替换当前的整个窗体(框架页)CSS可控制超链接样式 css链接样式 如下a:active是超级链接的初始状态 a:hover是把鼠标放上去时的状况 a:link 是鼠标点击时 a:visited是访问过后的情况超链接样式案例1、通常对全站超链接样式化方法acolor:#333;text-decoration:none; /对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none;a:ho

18、ver color:#CC3300;text-decoration:underline;/对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline;2、通过链接内设置类控制超链接样式css方法案例超链接代码CSS对应CSS代码a.yangshicolor:#333;text-decoration:none; a.yangshi:hover color:#CC3300;text-decoration:underline;通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式3、通过对应超链接外的父级的cs

19、s类的css样式来控制超链接的样式案例超链接代码a href=对应CSS代码.yangshi acolor:#333;text-decoration:none; .yangshi a:hover color:#CC3300;text-decoration:underline;这里值得注意的是a.yangshi与.yangshi a的样式css代码区别字体（font-family）CSS运用实例代码：.divcss5 font-family:黑体;我也是黑体字体Html的文字字体设置代码：我是黑体字边距 marginCSS优化CSS代码优化地方：1、border(CSS边框)简写：border-

20、top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;可以简写为：border:1px solid #000;2、padding（CSS padding）简写：padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;可简写为：padding:1px 2px 3px 4px;padding-top:1px;padding-right:1px;padding-bot

21、tom:1px;padding-left:1px;可简写为：padding:1px;3、margin简写margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;可简写为：margin:1px 2px 3px 4px;margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;可简写为：margin:1px;4、background简写background-color:#000;可以简写为background:#000;background-imag

22、e:url(图片地址)可简写为：background:url(图片地址)5、font简写font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;可简写为：font:12px/12px Arial, Helvetica, sans-serif; 2、CSS重用优化这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便CSS实例如下：.yangshi_a width:100px; height:20px; text-align:left; float:left; font-size:24px;.y

23、angshi_b width:100px; height:20px; text-align:right; float:left; font-size:24px;他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同我们就可以提取他们相同属性优化后:.yangshi_a ,.yangshi_b width:100px; height:20px; text-align:left; float:left; font-size:24px;.yangshi_btext-align:right; CSS ID与CSS CLASSCss id 知识 一个网页里ID只能使用一次。当然即使一个id在一个

24、网页内被使用多次，其CSS样式仍然可以实现生效，但是一般规定W3C标准是使用一次id 选择器以 # 来定义，命名CSS选择器。定义命名css id选择器例子：#yangshi1color:#F00;定义红色实例#yangshi2color:#0F0;定义绿色对应html中div引用我颜色为红色我颜色为绿色一个div标签的定义只能使用一个id如：测试内容或测试内容两个都是不正确的，并且CSS样式属性也不能生效- 成为CSS 失效之一。CSS class 知识 与CSS ID 不同 class 可以在网页中多次用到。Class 选择器定义以“.”来定义。定义css class选择器例子：.yangshi1color:#F00; 定义文字为红色.yangshi2font-size:28px;定义文字大小为18px对应html中div+css引用：我颜色为红色我字体大小为28px我颜色为红色文字大小为28px以上即是“yangshi1”“yangshi2”类的正确使用方法图片 img 图片实例Imgpadding:0; border:0;/body 列表 LIli不能单独使用，需要与或配合使用，使用范例：div+css范例div+css范例之lidiv+css范例div+css范例之li此内容来自：唐山小鱼网络工作室 更多内容请访问