网页布局练习资料

1、实操练习四Div布局练习，其中红色字体为div的css属性设置，蓝色字体为实验步骤或含义解释部分练习1、一列布局（1 ） 一列固定宽度VDOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Tran sitio nal/EN /TR/xhtml1/DTD/xhtml1-tra nsitio nal.dtd#layout height: 300px; width: 400px; backgrou nd: #99FFcc; 此处显示id layout 的内容 步骤:第一步、新建divDw 丈粹豪妙tDIS盘迎厘声.熾 童口爼）昔加呛* 亍

2、1 = 1 白 faFH1睢19伽（1打找is Z -4|E 7 UnH ffi.J匝3栽停CD：）F y 戈苟（EJ| !Oirt航 3J .元IBOJ 吏IF Fivwa LaYa-djciE J吨13施动 ff：E y JMM g E O圧 O Stnir玉暮悶站塞逛 臣 Q roim db第二步、点击“新建 css规则”，设置div属性：方框的宽、高，及背景色EIHKffCD 则Ip Ki 9AA. 爾测附型 令时型 E迥 的強|耳ft A 0| B回*务4 0谢且A冷” |沽”0韶前担lrt ； Q IOM IUW H I K / I IS?怎lEtkEV他站F y VliT 広：）

3、F y tti* 叭巨3卫苕ffij 臣 l|_JLika d#layout height: 300px; width: 400px; background: #99FFcc; margin:auto; 此处显示id layout 的内容 步骤：前面和上面一题一样，新建div，设置相关属性，再添加 margin : auto属性Hfit W.t 泗炮 C百：hbt ft nluLil!wiRm 程丸g压4岭幻I篇筍現HIF 9 VliT 広订F y tti* 叭E LJ JitY-n-L Lika dbody margin: 0;#layout height: 300px; width: 80

4、%; backgrou nd: #99FFcc; 此处显示id layout 的内容 步骤如上题，宽度属性设置使用%单位(4 ) 一列自适应宽度居中Tran sitio nal/ENTran sitio nal/ENVDOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0/TR/xhtml1/DTD/xhtml1-tra nsitio nal.dtdbody margin: 0;#layout height: 300px; width: 80%; background: #99FFcc; margin:auto; 此处显示id layou

5、t 的内容 步骤如上一题，增加 body标签的margin属性设置(5) 一列二至多块布局VDOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 /TR/xhtml1/DTD/xhtml1-tra nsitio nal.dtdbody margin:。； paddi ng:0;#header margin: 5px auto; width:500px; height:80px; backgro un d:#9F9;#ma in margi n:5px auto; width:500p x; height:400px; backgro u

6、n d:#9FF;#footer margin :5px auto; width:500px; height:80px; backgro un d:#9f9; 此处显示id header的内容 此处显示id main的内容 此处显示id footer 的内容 步骤如上面一题，分别设置三个div的方框属性：宽、高、背景色和外边距margin练习2、二列和三列布局(1 )二列自适应宽度VDOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Tran sitio nal/EN /TR/xhtml1/DTD/xhtml1-tra nsitio

7、nal.dtd#side backgrou nd: #99FF99; height: 300px; width: 120px; float: left; #main background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; 此处显示 id side的内容 此处显示 id main的内容 步骤1、新建两个div，分别设置id为side和ma in2、设置side和main方框属性：:J 开始毎阿站ah.枣i ft地bltlWE习化. 厂程卸虬耳屋矗齢.r- 乍 畋岛二!JD环EE:5E(2 )二列固定宽度居中VDOCT

8、YPE html PUBLIC -/W3C/DTD XHTML 1.0Tran siti on al/EN/TR/xhtml1/DTD/xhtml1-tra nsitio nal.dtd#content width:470px; margin:0 auto;#side backgrou nd: #99FF99; height: 300px; width: 120px; float: left; #main background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; 此处显示 id s

9、ide的内容 此处显示 id main的内容 步骤1、新建父层 co nte nt，新建子层 side和 ma in2、 进行content, side, main方框属性设置，margin:0 auto使得父层居中，(3)定义阅读：xhtml的块级元素(div)和内联元素(span) ，float属性块级元素：就是一个方块，像段落一样，默认占据一行出现；内联元素：又叫行内元素，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。一般的块级元素诸如段落、标题.、列表, 、表格、表单、DIV 和 BODY 等元素。内联元素则如：表单元素、超级链接、图像、块级元素的显著特点是：每个块级元素都

10、是从一个新行开始显示，而且其后的元素也需另起一行 进行显示。如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。有了 css以后，可以改变这种html的默认布局模式，把块元素摆放到想要的位置上去。而不是每次都另起一行。可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变 为块元素。float是重点。float让元素向左、右浮动，在 CSS中，任何元素都可以浮动。浮动元素会生成一 个块级框，且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时， 它会跑到下一行，直到拥有足够放下它的空间。因此，我们利

11、用浮动属性来实现列的布局(4 )三列自适应宽度:Tran sitio nal/ENVDOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 /TR/xhtml1/DTD/xhtml1-tra nsitio nal.dtd body margin: 0;#side backgrou nd: #99FF99; height: 300px; width: 120px; float: left; #side1 background: #99FF99; height: 300px; width: 120px; float: right; #main

12、 background: #99FFFF; height: 300px; margin:0 120px; 此处显示 id side的内容 此处显示 id side1的内容 此处显示 id main的内容 其中，左div左浮动，右div右浮动，中间 main不设置宽度(5)三列固定宽度VDOCTYPEhtml PUBLIC-/W3C/DTDXHTML1.0Tran sitio nal/EN/TR/xhtml1/DTD/xhtml1-tra nsitio nal.dtd body margin: 0;#content width:470px; margin:0 au

13、to;#side backgrou nd: #99FF99; height: 300px; width: 120px; float: left; #side1 background: #99FF99; height: 300px; width: 120px; float: right; #main background: #99FFFF; height: 300px; margin:0 120px; 此处显示 id side的内容 此处显示 id side1的内容 此处显示 id main的内容 练习3、纵向导航菜单和二级弹出式菜单(1)纵向列表VDOCTYPEhtml PUBLIC -/W3

14、C/DTD XHTML 1.0Tran sitio nal/EN /TR/xhtml1/DTD/xhtml1-tra nsitio nal.dtd body fon t-family: Verda na; fon t-size: 12px; lin e-height: 1.5; a color: #000; text-decoration: none; a:hover color: #F00; #menu width: 100px; border: 1px solid #CCC; #me nu ul list-style: none; margin: 0px;

15、padd ing: 0px; #me nu ul li backgro und: #eee; paddi ng: 0px 8px; height: 26px; lin e-height: 26px; border-bottom: 1px solid #CCC; 首页 网页版式布局 div+css 教程 div+css 实例 常用代码 站长杂谈 技术文档 资源下载 图片素材步骤第一步，新建div，并添加列表和链接 首页 网页版式布局 div+css 教程 div+css 实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第二步，设置 body、a、和a： hover的样式第三步：设置列表属

16、性#menu width: 100px; border: 1px solid #CCC; 菜单 div 的宽度、边线设置#me nu ul list-style: none; marg in: 0px; padd ing: 0px; 列表取消原点、外边距、内边距设置为0#me nu ul li backgro und: #eee; paddi ng: 0px 8px; height: 26px; lin e-height: 26px; border-bottom: 1px solid #CCC; 每一个li颜色为#eee,高度和行间距为26px，底线设置1px solid #CCC和menu的

17、Clear jC:Margin回全部相同他）边界颜色一样，内边距设置如下图，#enu ul 1i的css規则定义X分粪方电Flo it (T):帮助01）确定取消应用|一般padding,margin都有四个方向的，按顺序为：上，右，下，左，如果只写两个方法的话，就 表示上下为多少，左右为多少。（2 ）定义学习：标签的默认样式大多数标签都有自己的默认样式，比如body默认外边距，ul前的圆点及左侧的内边距，h1-h6字体大小各不相同，但有时这些默认样式对我们没用，需要清除掉，为了方便，建议用标签重定 义方式，这样可以很简单地把全局的样式给统一起来。例如，通常的设置方法body, ul, li,

18、 hi, h2, h3, h4, h5, h6, p, form, dl, dt, dd margin: Opx; padding: Opx; font-size: 12px; fon t-weight: no rmal; ul list-style: non e; img border-style: non e; (3)定义：css派生选择器派生选择器可以帮助我们节约大量的class定义，例如，上例中#me nu ul list-style: none; margin: Opx; padd ing: 0px; #me nu ul li backgro und: #eee; paddi ng:

19、 0px 8px; height: 26px; lin e-height: 26px; border-bottom: 1px solid #CCC; #menu ul和#menu ul li即为派生选择器，定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的 ul生效。#menu ul li是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。(4 )定义：css选择器的分组可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需

20、要分组的选 择器分开。例如，所有的标题元素都是绿色的，p段落、div分区、span都是20像素字体。h1,h2,h3,h4,h5,h6 color: gree n; p,div,spa n fon t-size:20px; 参考代码：菜单横竖转换!-bodybackgrou nd-color:#84BAE8;div font-family:幼圆;div ul list-style-type:non e;marg in: Opx;padd in g:0px;div li border-bottom:1px solid #ED9F9F; float:left; width:150px;div li

21、 adisplay:block;padd in g:5px 5px 5px 0.5em;text-decoratio n:none;border-left:12px solid #EBEBEB;border-right:1px solid #EBEBEB;div li a:link, div li a:visitedbackgrou nd-color:#F0F0F0;color:#461737;div li a:hoverbackgrou nd-color:#7C7C7C;color:#ffff00; 首页 产品 下载 购买 服务 (5)纵向二级列表VDOCTYPEhtml PUBLIC-/W

22、3C/DTDXHTML 1.0Tran sitio nal/EN/TR/xhtml1/DTD/xhtml1-tra nsitio nal.dtdbody fon t-family: Verda na; fon t-size: 12px; lin e-height: 1.5; img border-style: non e; a color: #000; text-decoration: none; a:hover color: #F00; #menu width: 100px; border: 1px solid #CCC; border-bottom:none

23、;#me nu ul list-style: none; margin: 0px; padd ing: 0px; #me nu ul li backgro und: #eee; paddi ng: 0px 8px; height: 26px; lin e-height: 26px; border-bottom: 1px solid #CCC; positio n:relative; #me nu ul li ul display:none; positi on: absolute; left: 100px; top: 0px; width:100px; border:1px solid #cc

24、c; border-botto m:non e; #me nu ul li.curre nt ul display:block; #me nu ul li:hover ul display:block; 首页 网页版式布局自适应宽度 固定宽度div+css 教程 新手入门 视频教程 常见问题 div+css 实例 首页网页版式布局 div+css?J程 div+css 实例 常用优码 站长杂谈 常用代码 站长杂谈 技术文档 资源下载 图片素材（思考：将本题的纵向菜单，修改CSS参数为横向菜单）（6 ）定义学习：相对定位和绝对定位 定位标签：positi on包含属性：relative （相对）

25、absolute （绝对）position: relative :如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素”相对于它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）position: absolute:表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，

26、它显示的越在上层。）父容器使用相对定位，子元素用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是 相对于父容器左上角相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即 使用上又使用下，或即使用左，又使用右。练习4、HTML列表（1）横向图文列表蚌埠台肥淮北福州南平汕头聚川湛江璧庆三亚 三亚 第一步：插入列表 div 三亚三亚三亚三亚三亚三亚三亚三亚三亚三亚三亚三亚三亚三亚第二步：添加全局样式body margi n:0 auto; fon t-siz

27、e:12px; fon t-family:Verda na; lin e-height:1.5; Ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form padding:0; margin:0;ul list-style: non e;img border:0px;a color:#05a; text-decorati on:non e;a:hover color:#f00;第三步：添加列表样式#layout width:390px; border:2px solid #ccc; paddi ng-bottom:20px; overflow:auto; zoom:1;#layou

28、t ul li width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center; #layout ul li a display:block;#layout ul li a img paddi ng:1px; border:1px solid #e1e1e1; marg in-bottom:3px; display:block; #layout ul li a:hover img padd in g:0px; border:2px solid #f98510;练习 5、带下拉子菜单的导航菜单we

29、阪例常用代码自适应宽度第一步：添加列表 div主定沁 首页 网页版式 自适应宽度 固定宽度 web 教程 新手入门 视频教程 常见问题 web 实例 常用代码 第二步：设置全局样式body font-family: Verdana; font-size: 12px; line-height: 1.5; a color: #000; text-decoration: none; a:hover color: #F00; 第三步：设置列表样式#menu width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;

30、#menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li float:left; margin-left:2px;#menu ul li a display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url( 0 0 no-repeat; font-size:14px;#menu ul li a:hover background:url( 0 0 no-repeat;#menu ul li a#curre

31、nt background:url( 0 0 no-repeat; font-weight:bold; color:#fff;#menu ul li ul border:1px solid #ccc; display:none; position:absolute;#menu ul li ul li float:none; width:87px; background:#eee; margin:0;#menu ul li ul li a background:none;#menu ul li ul li a:hover background:#333; color:#fff;#menu ul

32、li:hover ul display:block;#menu ul li.sfhover ul display:block;练习五、 css 综合练习 1，用 div+css 制作下面的网站李四的网站关于丰四我的信艳日右2011.0S.12Qtl#相册-个人档笑孑讦乐地1*-*萸爭奸热J乐早上起忠届紳祁昏況，直到现在都殳机器还在咱甫， 左冋早电趣，所朝找不去开空倜，只盘爭自就凤再大空。舶空可 盘的扎1在我的陨应底下辛苦的干看活，又脏又累.毬怎么怨.心? ? ?把博工酝工礎出去晒了，丸阳出未史进去，到底融 么电視不起剜L?这些工作邮做主，唱了1郝沮开水，汗擁泱 背、衣服湿1ST，脑袋氓摊昏沉

33、15舍里很店枸*不如道昱自己 的圧网还是环境就沱样？m年掘爸爸在20也上，漫有號応，注冇空训，貝要一把I日邑昴用就 虞辻了几牛夏天，何况范貌上还有一台电阿馬，比起佗豹垠辛怡返 又算卄也。啊艇專主放了关干備的书鉛还冇咅斥，毎天重豆 焉E去悲,区些吕乐旧討必捋别底迤一有空闲就韻听嘶览样的 台乐看看迟些书“也*1*宋就是一群黑喬目的人门，址Tw 恩导泪得養诗的人叩，塑到伦和我視柠心耐;忘1百，昨天感曾T曲欣气下込龍感臥晚上吃了黄會天航坷X軒押 奇呵，昌标不辭服一刑商就可以洽疝，效栄I不舒压丁谖怎命泊第一步：编写div布局 李四 的网站 博客首页 a href=i ndex.htma href=i n

34、dex.htma href=i ndex.htma href=i ndex.htma href=i ndex.htm关于李四给我留言 友情链接 我的信箱 社区 2011.08.12 晚上 好热啊，早上起来脑袋都昏沉，直到现在都是。机器还在响着，车间里更热，所以我不去开空调，只希望自然风再大些。那些可爱的人们在我的眼皮底下辛苦的干着活，又脏又累，我怎么忍心？ ？把褥子被子都拿出去晒了，太阳出来又进去，到底是怎么啦提不起劲儿？这些工作都做完，喝了一杯温开水，汗流浃背，衣服湿透了，脑袋依然昏沉。宿舍里很压抑，不知道是自己的原因还是环境就这样？当年张爸爸在工地上，没有风扇，没有空调，只要一把旧芭蕉扇就度过了几个夏天，何况我晚上还有一台电风扇，比起他的艰辛我这又算什么。 张妈妈在家里放了关于佛的书籍还有音乐， 每天重复着大慈大悲， 这些音乐听得我特别感动， 一有空闲就想听听这样的音乐看看这些书。 们本来就是一群超善良的人们，过于懂得感恩是值得善待的人们，想到他们我就特心疼特忘情。昨天感冒了，这种天气下还能感冒，晚上吃了药今天就好了