DIVCSS基础网页开发设计.ppt

DIVpadding:0;,作用就是重置可能用到的标签,#logo,#Nav,#Banner,#Content,#Footerwidth:900px;margin:0auto;,一般网站都会做到点击logo，就会回到主页，代码一般会这么写,【第二步布局Logo栏】,另外一种方法，将图片做成链接a的背景，同样可以达到上面说的效果，并且HTML代码就会更精简，少了，,HTML代码：,CSS代码,【第二步布局Logo栏】,#Logoheight:80px;/*公共代码中没有定义高度，在这里定义*/#logoLinkdisplay:block;/*将链接a转化成块状元素，这样才能显示出背景*/width:177px;height:51px;Background-image:url(“img/logo.jpg”);float:left;/*为了让ie6和ff显示效果一样，如果不加上这句话，后面的margin-top:20px;两个浏览器解析不一样，大家可以去掉这句话，看看两者显示效果差别*/margin-top:20px;/*设置a的顶部外边距为20像素，这样才能和浏览器顶部有段距离，才能和图片中做的一样*/,HTML代码：,【第三步布局导航栏Nav】,HOMEPHOTOSABOUTLINKSCONTACT,CSS代码,#Navheight:42px;#Navulheight:42px;list-style-type:none;background:#56990c;#Navulliheight:42px;float:left;#Navulliadisplay:block;/*转化成块状元素，因链接是内链元素，若想给它定义下面的属性，必须将它转化成块状元素，*/height:42px;color:#FFF;padding:010px;line-height:42px;font-size:14px;font-weight:bold;font-family:Arial;text-decoration:none;/*去除链接样式，默认是有下划线的，加上这句就没有任何样式，下划线也没有了*/float:left;/*这句一定要加，不然在IE6中会出现，这种效果*/#Navullia:hoverbackground:#68acd3;,有两种方法第一种：将图片作为背景第二种：直接将图片插入：,【第四步Banner布局】,CSS代码：,#Bannerheight:290px;Background-image:url(img/banner.jpg);,内容板块分为左右两个区域，左边ContentL宽度是600px，右边ContentR宽度是300px,内边距设置成15px,【第五步内容Content板块布局】,HTML代码：,此处为左边ContentL此处为左边ContentR,CSS代码:,#Content#ContentL,#Content#ContentRfloat:left;padding:15px;/*为什么都要左侧浮动*/#Content#ContentLwidth:600px;background:#f0f0f0;#Content#ContentRwidth:300px;background:#d3e7f2;,【第六步Footer布局】,#Footertext-align:center;background:#68acd3;padding:10px0;font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#fff;line-height:20px;,版权归xxxxxxx()所有CSS交流QQ群:xxxxxxx/xxxxxxx,Content部分细化,结构分析：包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。标题用标签，原因如下第一:标签字体加粗，不用再定义字体粗细第二:标题用的话，搜索引擎会首先抓取里面的内容，然后提取关键词对于文章内容，我们就放到,【第七步内容左侧板块(ContentL)布局】,HTML代码：,标题内容,CSS代码：,#Content#ContentLh1height:40px;line-height:40px;/*设置行距，目的是保证h1中的文字垂直居中*/font-size:16px;color:#054d73;border-bottom:1px#969696dashed;/*设置h1的下边框为宽度1像素的虚线*/margin-bottom:10px;/*设置外边距，让h1和下面的内容区域p保持10像素的距离*/#Content#ContentLpfont-size:12px;line-height:20px;text-indent:2em;/*文章第一行缩进两个汉字，记住这句话就OK了*/,图片围绕#Content#ContentLpimgfloat:left;,【第八步内容右侧板块(ContentR)布局】,HTML代码：,加入我们！,CSS代码：,#Content#ContentRh1height:40px;line-height:40px;/*设置行距，目的是保证h1中的文字垂直居中*/font-size:16px;color:#900;border-bottom:1px#969696dashed;/*设置h1的下边框为宽度1像素的虚线*/margin-bottom:10px;/*设置外边距，让h1和下面的内容区域p保持10像素的距离*/,两行红色的QQ群信息怎么做？其实这个有很多办法方法一：ul、li或者dl、dt、dd来布局方法二：表格(Table)来布局方法三：用单纯的标签来布局比如、等标签,1群：55058102群：879513773群：735136414群：72263578,#Content#ContentRtablefont-size:12px;color:#900;,如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值,6、定位(position),绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，有以下属性：1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。2)如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。3)如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。,【position:absolute】,以上三点可以总结出，若想把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件，第一：设定TRBL第二：父级设定Position属性,相对定位，他是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，有以下属性：1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolut不同)。2)如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolut不同)3)如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定(前半段和absolut一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolut不同)。以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。,【position:relative】,属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置,如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。,总结：,头部blog区域用定位(position)来布局一下,7、定位应用,HTML代码和原来的没有区别：,CSS代码就有变,#Logoheight:80px;#logoLinkdisplay:block;width:173px;height:46px;background:url(logo.gif);float:left;margin-top:20px;,用“浮动+外边距”布局的，将#logoLink定位在距离顶部20像素，左侧0像素的地方；,#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像素，,布局页面，Float为主，Position为辅！,