學了一下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和Firefox一致都不會撐開但是會佔用下面的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;/*Firefox加上邊線總寬度， 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一致*/}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
