1. 清除默認(rèn)樣式*{margin:0;padding:0;font-size:12px;}2. body的背景
body{background-color:??;}3. 頭部(top)
1.1 寬度鋪滿屏幕
.top{width:100%;}1.2 內(nèi)容居中顯示
{width:??" />
時(shí)間:2023-05-03 00:03:02 | 來源:網(wǎng)站運(yùn)營
時(shí)間:2023-05-03 00:03:02 來源:網(wǎng)站運(yùn)營
企業(yè)網(wǎng)站布局樣式要點(diǎn)難點(diǎn)匯總:*{margin:0;padding:0;font-size:12px;}
2. body的背景body{background-color:??;}
.top{width:100%;}
1.2 內(nèi)容居中顯示{width:??px; margin:0 auto;}
`<ul><li><a href="#">首頁</a><li><a href="#">首頁</a><li><a href="#">首頁</a><li><a href="#">首頁</a></ul>`
①利用`li{float:left/right;}`使各個(gè)`<li>`處于同一行 <form action="" method="post"> <input type="text" class="search_text"/> </form>
①設(shè)置`input{margin-top:?px;}`使搜索框在導(dǎo)航條內(nèi)居中 input{background:url(?) no-repeat right center;}
等價(jià)于 input{background-image:url(?);background-repeat:no-repeat;background-position:right center;}
③防止搜索框中輸入的文字遮擋上述小圖標(biāo):設(shè)置內(nèi)邊距等于圖表寬度`input{padding-right:?px}`
`<!--引入myFocus庫文件--><script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script><!--引入所使用的風(fēng)格js文件--><script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script><!--引入所使用的風(fēng)格css文件--><link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css"/>`
6.3 創(chuàng)建myFocus標(biāo)準(zhǔn)的html結(jié)構(gòu),并填充內(nèi)容 <div class="ad" id="picBox"> <div class="loading"><img src="images/loading.gif" alt="圖片加載中" /> </div> <div class="pic"> <ul> <li><img src="images/ad2.jpg" /></li> <li><img src="images/ad3.jpg" /></li> <li><img src="images/ad4.jpg" /></li> </ul> </div> </div>
注意: .ad{height:?px;/*?等于圖片高度*/ overflow:hidden;/*使超出div部分的被隱藏*/}-->
.left{width:340px; } .mid{width:410px; margin:0 7px;} .right{width:230px;} .left,.mid,.right{float:left;}
7.2 兩列布局 .content{height:350px; margin-top:10px;}
.content_left{width:220px; /*height:350px;*/ /*不應(yīng)該設(shè)置固定高度*/ min-height:350px; _height:350px; /* For IE6*/ float:left;}
.content_right{width:770px; /*height:350px;*/ /*不應(yīng)該設(shè)置固定高度*/min-height:350px; _height:350px; /* For IE6*/ float:right;}
.page{height:40px; margin-top:10px; text-align:center;} .page a{display:inline-block; /*將a設(shè)置為既能在同一行顯示,又能設(shè)置寬度 高度等*/ border:1px solid #E8E8E8; text-decoration:none; margin:5px; padding:5px 10px;} .page a:link,.page a:visited{color:#000;} .page a:hover,.page a:active{color:#FFF;background-color:#CC1B1B;}
<ul> <li><a href="#">關(guān)于</a> <ul> <li><a href="#">品牌故事</a> <li><a href="#">聯(lián)系我們</a> </ul> </li> <li><a href="#">留言</a> <ul> <li><a href="#">新浪微博</a> <li><a href="#">騰訊微博</a> </ul> </li> </ul>
{text-align:center;}<!--設(shè)置文字水平居中--> {line-height:?px;}<!--設(shè)置文字垂直居中 行高等于盒子高--> img{vertical-align:middle;}<!--使文字旁的圖片與文字對齊-->
②鏈接格式: a{text-decoration:none;}<!--去除鏈接的默認(rèn)樣式--> a:link,a:visited{} a:hover,a:active{} a:focus{} a{display:inline-block;background-color:red;}<!--使a的整行背景色改變-->
關(guān)鍵詞:難點(diǎn),匯總,樣式,布局,企業(yè)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。