DIVCSS基础网页开发设计2.pptVIP

xilingsnow@163.com 测井培训之《网络技术及应用》 这样HTML 就很容易写出来了 div id=Logo/div div id=Nav/div div id=Banner/div div id=Content/div div id=Footer/div 5块的宽度都是900像素，并且都是水平居中的，所以相应CSS 代码如下 body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{Margin:0;padding:0;} 作用就是重置可能用到的标签 #logo,#Nav,#Banner,#Content,#Footer{ width:900px; margin:0 auto;} 一般网站都会做到点击logo，就会回到主页，代码一般会这么写 a href=# id=logoLinkimg src=# //a 另外一种方法，将图片做成链接a 的背景，同样可以达到上面说的效果，并且HTML 代码就会更精简，少了img...， div id=Logo a href=# id=logoLink/a /div HTML 代码： CSS代码 #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 代码： div id=Nav ul lia href=#HOME/a/li lia href=#PHOTOS/a/li lia href=#ABOUT/a/li lia href=#LINKS/a/li lia href=#CONTACT/a/li /ul /div CSS代码 #Nav{height:42px;} #Nav ul{ height:42px; list-style-type:none; background:#56990c; } #Nav ul li{height: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:hover{background:#68acd3;} 有两种方法 第一种：将图片作为div id=Banner/div背景 第二种：直接将图片插入：div id=Bannerimg src=//div CSS代码： #Banner{ height:290px; Background-image:url(img/banner.jpg); } 内容板块分为左右两个区域，左边ContentL 宽度是600px，右边ContentR宽度是300px,内边距设置成15px HTML 代码： div id=Content div id=ContentL此处为左边ContentL/div div id=ContentR此处为左边ContentR/div /div CSS代码: #Content #ContentL,#Content #ContentR{float:left; padding:15px;}/*为什么 都要左侧浮动*/ #Content #ContentL{width:600px; background:#f0f0f0;} #Content #ContentR{width:300px; background:#d3e7f2;} #Footer{ text-align:center; background:#68acd3; padding: 10px 0; font-si