DIVCSS基础网页开发设计.ppt

DIVpadding:0;,作用就是重置可能用到的标签,#logo,#Nav,#Banner,#Content,#Footer width:900px; margin:0 auto;,一般网站都会做到点击logo，就会回到主页，代码一般会这么写,【第二步布局Logo栏】,另外一种方法，将图片做成链接a 的背景，同样可以达到上面说的效果，并且HTML 代码就会更精简，少了，, ,HTML 代码：,CSS代码,【第二步布局Logo栏】,#Logo height:80px;/*公共代码中没有定义高度，在这里定义*/ #logoLink display: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】, HOME PHOTOS ABOUT LINKS CONTACT ,CSS代码,#Navheight:42px; #Nav ul height:42px; list-style-type:none; background:#56990c; #Nav ul liheight:42px; float:left; #Nav ul li a display:block;/*转化成块状元素，因链接是内链元素，若想给它定义下面的属性，必须 将它转化成块状元素，*/ height:42px; color:#FFF; padding:0 10px; line-height:42px; font-size:14px; font-weight:bold; font-family:Arial; text-decoration:none;/*去除链接样式，默认是有下划线的，加上这句就没有任何样式， 下划线也没有了*/ float:left;/*这句一定要加，不然在IE6中会出现，这种效果*/ #Nav ul li a:hoverbackground:#68acd3;,有两种方法 第一种：将图片作为背景 第二种：直接将图片插入：,【第四步Banner布局】,CSS代码：,#Banner height: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布局】,#Footer text-align:center; background:#68acd3; padding: 10px 0; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#fff; line-height:20px; , 版权归xxxxxxx (www. )所有 CSS 交流QQ 群:xxxxxxx/xxxxxxx ,Content部分细化,结构分析：包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。 标题用标签，原因如下 第一:标签字体加粗，不用再定义字体粗细 第二:标题用的话，搜索引擎会首先抓取里面的内容，然后提取关键词 对于文章内容，我们就放到,【第七步内容左侧板块(ContentL)布局】,HTML 代码：, 标题 内容 ,CSS代码：,#Content #ContentL h1 height: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 p font-size:12px; line-height:20px; text-indent:2em;/*文章第一行缩进两个汉字，记住这句话就OK 了*/ ,图片围绕 #Content #ContentL p img float:left; ,【第八步内容右侧板块(ContentR)布局】,HTML 代码：,加入我们！,CSS代码：,#Content #ContentR h1 height:40px; line-height:40px;/*设置行距，目的是保证h1中的文字垂直居中*/ font-size:16px; color:#900; border-bottom:1px #969696 dashed;/*设置h1的下边框为宽度1像素的虚线*/ margin-bottom:10px;/*设置外边距，让h1和下面的内容区域p 保持10像素的距离*/ ,两行红色的QQ 群信息怎么做？其实这个有很多办法 方法一：ul、li 或者dl、dt、dd 来布局 方法二：表格(Table)来布局 方法三：用单纯的标签来布局比如、等标签, 1群：5505810 2群：87951377 3群：73513641 4群：72263578 ,#Content #ContentR table font-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 代码就有变,#Logo height:80px; #logoLink display:block; width:173px; height:46px; background:url(logo.gif); float:left; margin-top:20px; ,用“浮动+外边距”布局的，将#logoLink 定位在距离顶部20 像素，左侧0 像素的地 方；,#Logo height:80px; position:relative;/*相对定位*/ #logoLink display: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为辅！,