《DIVCSS基础网页开发设计.ppt》由会员分享，可在线阅读，更多相关《DIVCSS基础网页开发设计.ppt（29页珍藏版）》请在金锄头文库上搜索。
1、DIV&CSSDIV&CSS测井培训之网络技术及应用5 5、浮动（、浮动（floatfloat）页面布局）页面布局这样HTML 就很容易写出来了【第一步整体布局与公共第一步整体布局与公共CSSCSS定义定义】5块的宽度都是900像素，并且都是水平居中的，所以相应CSS 代码如下【第一步整体布局与公共第一步整体布局与公共CSSCSS定义定义】body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dlMargin:0;padding:0;作用就是重置可能用到的标签#logo,#Nav,#Banner,#Content,
2、#Footerwidth:900px; margin:0 auto;一般网站都会做到点击logo，就会回到主页，代码一般会这么写【第二步布局第二步布局LogoLogo栏栏】另外一种方法，将图片做成链接a 的背景，同样可以达到上面说的效果，并且HTML 代码就会更精简，少了，HTML HTML 代码：代码：CSSCSS代码代码【第二步布局第二步布局LogoLogo栏栏】#Logoheight:80px;/*公共代码中没有定义高度，在这里定义*/#logoLinkdisplay:block;/*将链接a 转化成块状元素，这样才能显示出背景*/width:177px;height:51px;Back
3、ground-image:url(“img/logo.jpg”);float:left;/*为了让ie6和ff 显示效果一样，如果不加上这句话，后面的margin-top:20px;两个浏览器解析不一样，大家可以去掉这句话，看看两者显示效果差别*/margin-top:20px;/*设置a 的顶部外边距为20像素，这样才能和浏览器顶部有段距离，才能和图片中做的一样*/HTML 代码：【第三步布局导航栏第三步布局导航栏NavNav】HOMEPHOTOSABOUTLINKSCONTACTCSSCSS代码代码#Navheight:42px;#Nav ulheight:42px;list-style-
4、type:none;background:#56990c;#Nav ul liheight:42px; float:left;#Nav ul li adisplay:block;/*转化成块状元素，因链接是内链元素，若想给它定义下面的属性，必须将它转化成块状元素，*/height:42px;color:#FFF;padding:0 10px;line-height:42px;font-size:14px;font-weight:bold;font-family:Arial;text-decoration:none;/*去除链接样式，默认是有下划线的，加上这句就没有任何样式，下划线也没有了*/f
5、loat:left;/*这句一定要加，不然在IE6中会出现，这种效果*/#Nav ul li a:hoverbackground:#68acd3;有两种方法第一种：将图片作为背景第二种：直接将图片插入：【第四步第四步BannerBanner布局布局】CSSCSS代码：代码：#Bannerheight:290px;Background-image:url(img/banner.jpg);内容板块分为左右两个区域，左边ContentL 宽度是600px，右边ContentR宽度是300px,内边距设置成15px【第五步内容第五步内容ContentContent板块布局板块布局】HTML 代码：代码
6、：此处为左边ContentL此处为左边ContentRCSS代码代码:#Content #ContentL,#Content #ContentRfloat:left; padding:15px;/*为什么都要左侧浮动*/#Content #ContentLwidth:600px; background:#f0f0f0;#Content #ContentRwidth:300px; background:#d3e7f2;【第六步第六步FooterFooter布局布局】#Footertext-align:center;background:#68acd3;padding: 10px 0;font-s
7、ize:12px;font-family:Arial, Helvetica, sans-serif;color:#fff;line-height:20px;版权归xxxxxxx (www. )所有CSS 交流QQ 群:xxxxxxx/xxxxxxxContentContent部分细化部分细化结构分析：包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。标题用标签，原因如下第一:标签字体加粗，不用再定义字体粗细第二:标题用的话，搜索引擎会首先抓取里面的内容，然后提取关键词对于文章内容，我们就放到【第七步内容左侧板块第七步内容左侧板块(Co
8、ntentL)(ContentL)布局布局】HTML 代码：代码：标题内容CSS代码：代码：#Content #ContentL h1height:40px;line-height:40px;/*设置行距，目的是保证h1中的文字垂直居中*/font-size:16px;color:#054d73;border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/margin-bottom:10px;/*设置外边距，让h1和下面的内容区域p 保持10像素的距离*/#Content #ContentL pfont-size:12px;line-height
9、:20px;text-indent:2em;/*文章第一行缩进两个汉字，记住这句话就OK 了*/图片围绕#Content #ContentL p imgfloat:left;float:left;【第八步内容右侧板块第八步内容右侧板块(ContentR)(ContentR)布局布局】HTML 代码：代码：加入我们！CSS代码：代码：#Content #ContentR h1height:40px;line-height:40px;/*设置行距，目的是保证h1中的文字垂直居中*/font-size:16px;color:#900;border-bottom:1px #969696 dashed;
10、/*设置h1的下边框为宽度1像素的虚线*/margin-bottom:10px;/*设置外边距，让h1和下面的内容区域p 保持10像素的距离*/两行红色的QQ 群信息怎么做？其实这个有很多办法方法一：ul、li 或者dl、dt、dd 来布局方法二：表格(Table)来布局方法三：用单纯的标签来布局比如、等标签1群：55058102群：879513773群：735136414群：72263578#Content #ContentR tablefont-size:12px;color:#900;如果用positionposition来布局页面，父级元素的position position 属性必须
11、为属性必须为relativerelative，而定位于父级内部某个位置，而定位于父级内部某个位置的的元素，最好用absoluteabsolute，因为它不受父级元素的，因为它不受父级元素的padding padding 的属性影响，当然你也可以的属性影响，当然你也可以用positionposition，不过到时候计算的时候不要忘记不过到时候计算的时候不要忘记padding padding 的值的值6 6、定位、定位 (position)(position)绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，有以下属性：1)如果没有TR
12、BL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。2)如果设定TRBL，并且父级没有设定position 属性，那么当前的absolute 则以浏览器左上角为原始点进行定位，位置将由TRBL 决定。3)如果设定TRBL，并且父级设定position 属性(无论是absolute 还是relative)，则以父级的左上角为原点进行定位，位置由TRBL 决定。即使父级有Padding 属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的pad
13、ding对其根本没有影响。【position:absoluteposition:absolute】以上三点可以总结出，若想把一个定位属性为absolute 的元素定位于其父级元素内，只有满足两个条件，第一：设定TRBL第二：父级设定Position 属性属性相对定位，他是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL 进行定位，当父级内有padding 等CSS 属性时，当前级的原始点则参照父级内容区的原始点进行定位，有以下属性：1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute 第一条一样)，如
14、果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolut 不同)。2)如果设定TRBL，并且父级没有设定position 属性，仍旧以父级的左上角为原点进行定位(和absolut 不同)3)如果设定TRBL，并且父级设定position 属性(无论是absolute 还是relative)，则以父级的左上角为原点进行定位，位置由TRBL 决定(前半段和absolut 一样)。如果父级有Padding 属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolut 不同)。以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上
15、角进行定位，但是父级的Padding 属性会对其影响。【position:relativeposition:relative】属性为relative 的元素可以用来布局页面，属性为absolute 的元素用来定位某元素在父级中的位置如果用positionposition来布局页面，父级元素的来布局页面，父级元素的positionposition属性必须为属性必须为relativerelative，而定位于父级内部，而定位于父级内部某个位置的元素，最好用absoluteabsolute，因为它不受父，因为它不受父级元素的paddingpadding的属性影响，当然你也可以用的属性影响，当然你也可
16、以用positionposition，不过到时候计算的时候不要忘记不过到时候计算的时候不要忘记paddingpadding的值。的值。总结：总结：头部blog 区域用定位(position)来布局一下7 7、定位应用、定位应用HTML 代码和原来的没有区别：CSS 代码就有变#Logoheight:80px;#logoLinkdisplay:block;width:173px;height:46px;background:url(logo.gif);float:left;margin-top:20px;用“浮动+外边距”布局的，将#logoLink 定位在距离顶部20 像素，左侧0 像素的地方
17、；#Logoheight:80px;position:relative;/*相对定位相对定位*/#logoLinkdisplay:block;width:173px;height:46px;background:url(logo.gif) no-repeat;position:absolute;top:20px;left:0;position 方法，首先给#logo 加上“position:relative;”，给#logoLink 加上“position:absolute;”,然后让#logoLink 距离上面20 像素，左侧0 像素，布局页面，布局页面，FloatFloat为主，为主，PositionPosition为辅！为辅！
