div+css 学习概要

最新推荐文章于 2022-04-23 16:18:37 发布

iteye_9214

最新推荐文章于 2022-04-23 16:18:37 发布

阅读量106

点赞数

文章标签： xhtml

学了一下div+css，虽然说没有什么技术含量，但前台这东西还是挺能考验一个人的耐心的，尤其是浏览器兼容问题，那个烦躁啊没的说，看了一下午，真佩服自己能做的住，要是能天天像这样的心态，嘎嘎。多好写一下笔记，(～ o ～)~zZ

div 部分：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="pd.css" /> </head> <body> <div id="container"> <div id="header"> <div id="logo"> </div> <div id="banner"> </div> <div id="tool"> </div> <div class="nav"></div> <div id="menu"> <ul> <li><a href="#">联系我们</a></li> <li class="tiao"></li> <li><a href="#">联系我们</a></li> <li class="tiao"></li> <li><a href="#">联系我们</a></li> <li class="tiao"></li> <li><a href="#">联系我们</a></li> <li class="tiao"></li> <li><a href="#">联系我们</a></li> <li class="tiao"></li> <li><a href="#">联系我们</a></li> <li class="tiao"></li> <li><a href="#">联系我们</a></li> <li class="tiao"></li> <li><a href="#">联系我们</a></li> </ul> </div> </div> <div class="nav"></div> <div id="main"> <div class="leftbox"> <div class="left"> <div class="tit"><h3 align="left">热门文章</h3></div> <div class="content"> <ul> <li><a href="#">aaaaaaaaaaaa</a></li> <li><a href="#">aaaaaaaaaaaa</a></li> <li><a href="#">aaaaaaaaaaaa</a></li> <li><a href="#">aaaaaaaaaaaa</a></li> <li><a href="#">aaaaaaaaaaaa</a></li> </ul> </div> </div> <div class="right"> </div> <div class="nav"></div> <div class="left"> </div> <div class="right"> </div> </div> <div class="rightbox"> </div> <div class="nav"></div> <div class="leftbox"> <div class="left"> </div> <div class="right"> </div> <div class="nav"></div> <div class="left"> </div> <div class="right"> </div> </div> <div class="rightbox"> </div> </div> <div class="nav"></div> <div id="footer"> </div> </body> </html>
css部分：

/* 在最新的浏览器版本，主流的浏览器几乎是表形式很少区别了 ,但这只是对最新版本的而言，并非所有的人用的都是最新的*/ body{ margin:0px; padding:0px;/*去除网页各标签的缝隙--内外边距text-align:center;*/ font:12px Arial, 宋体; text-align:center; } /* 1.高度设的太小了，导致下面有空隙*/ #container{ width:960px;/*由于显示器大小宽度的设置不能过宽*/ height:800px; margin:auto;/*设置最外层容器居中居中问题出现了差异*/ } #header{ width:100%; } #header #logo{ margin-right:10px; float:left; width:200px; height:90px; background:#FF00FF; } #header #banner{ float:left; width:600px; height:90px; background:blue; } #header #tool{/* ff如果使用浮动则是正常的而ie非，确保安全的话，都脱离文档流*/ float:right; width:140px; height:90px; background:#a12bbf;/*ie会自动调整高度；而ff不会，制定多高就是多高不会撑开外围的高度，所以把外围header的高度给去掉就可以撑开了最新版本ie和火狐一致都不会撑开但是会占用下面的div*/ } #header #menu{ float:left; width:100%; background:#aaa; clear:both; /*左右都不挨浮动块就下来了clear 属性规定元素的哪一侧不允许其他浮动元素。*/ } #main{ float:left; width:100%; } #main .leftbox{ float:left; width:750px; } #main .rightbox{ float:right; background:red; width:200px; height:400px; } .leftbox .left{ float:left; width:300px; height:200px; background:yellow; } .tit{ float:left; width:100%; height:42px; background:url(logorad.gif) no-repeat right; } /*特别注意一下*/ .content{ float:left; width:298px; !important;/*专门为ff设置的*/ width:298px; /*新版本的是另算两者都是且important不管用了*/ height:158px;/*此值是相减而来，特别注意此处 */ border:1px solid #bbb;/*火狐加上边线总宽度， ie却另外算2px*/ } .content li{ width:100%; text-align:left; line-height:25px; } .content li a{ text-decoration:none; background:url(news.gif) no-repeat 0 center; padding-left:20px; } /* 用css做特效*/ a:hover{ position:relative; top:1px; color:red;/* 相对自己1px*/ } h3{ line-height:42px; padding-left:10px; margin:0px; width:100%; height:42px; background:url(logorad.gif) no-repeat 0 left;/*圆角的实现*/ } .leftbox .right{ float:right; width:440px; height:200px; background:yellow; } #footer{ float:left; width:100%; height:90px; background:blue; } ul{ background:yellow; /*width:100%;*/ margin:0px; padding:0px; list-style:none; } li{ height:28px; line-height:28px;/*字体居中方法行高*/ float:left; width:80px; } #menu a{ color:white; } #header #menu .tiao{/*菜单中链接之间的竖线*/ width:1px; height:12px; margin-top:8px; overflow:hidden; background:#000; } .nav{ float:left; width:100%; height:10px; clear:both; overflow:hidden;/*ie指定的最小高度为18px,所有小于18的都按18px ff为唯一所以超出部分隐藏最新版本ie 和ff一致*/ }