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:??" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 在線咨詢 在線咨詢
18143453325 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 企業(yè)網(wǎng)站布局樣式要點(diǎn)難點(diǎn)匯總

企業(yè)網(wǎng)站布局樣式要點(diǎn)難點(diǎn)匯總

時(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)匯總:

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:??px; margin:0 auto;}

1.3 設(shè)為首頁and加入收藏

用JavaScript實(shí)現(xiàn)

4. logo區(qū)

設(shè)置.wrap包裹內(nèi)容,以實(shí)現(xiàn)內(nèi)容定寬居中


5. 導(dǎo)航(nav)區(qū)

一般用:有序/無序列表 實(shí)現(xiàn)導(dǎo)航菜單;form實(shí)現(xiàn)搜索框。
5.1 有序/無序列表制作導(dǎo)航菜單


`<ul><li><a href="#">首頁</a><li><a href="#">首頁</a><li><a href="#">首頁</a><li><a href="#">首頁</a></ul>`①利用`li{float:left/right;}`使各個(gè)`<li>`處于同一行
②利用`li{list-style-type:none;}`去除小圓點(diǎn)
③設(shè)置`li{width:?px;}`使各個(gè)`<li>`間距相等
④利用`li{height:?px;}`使`<li>`中的文字垂直居中(行高等于div高)
5.2 form實(shí)現(xiàn)搜索框


<form action="" method="post"> <input type="text" class="search_text"/> </form>①設(shè)置`input{margin-top:?px;}`使搜索框在導(dǎo)航條內(nèi)居中
②搜索框內(nèi)的放大鏡小圖標(biāo):利用背景圖片來設(shè)置


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}`

6. 焦點(diǎn)圖的制作(myFocus)

6.1 使用時(shí)拷貝myFocus Demo v2.0.1/js整個(gè)文件夾到站點(diǎn)中
6.2 在html的標(biāo)簽內(nèi)引入相關(guān)文件



`<!--引入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>注意:
①焦點(diǎn)圖初始化的ID必須與圖片列表最外層id一致
②圖片列表外面必須包裹一個(gè) class="pic" 的 div
③上述class="ad"的div需要設(shè)置樣式:


.ad{height:?px;/*?等于圖片高度*/ overflow:hidden;/*使超出div部分的被隱藏*/}-->

7. 三列布局/兩列布局

①先設(shè)置父div的寬度;
②分別設(shè)置各列的寬度,高度一般只設(shè)置min-height
③設(shè)置各列的float
④利用margin設(shè)置各列的間距

7.1 三列布局


.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;}

8. 新聞列表的頁碼/解決新聞列表的時(shí)間在IE中的錯(cuò)位

8.1 解決新聞列表的時(shí)間在IE中的錯(cuò)位:
將日期放在新聞標(biāo)題的前面,就可以解決
8.2 新聞列表的頁碼


.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;}

9. 插入優(yōu)酷視頻

①找到優(yōu)酷視頻下方“分享給好友”下拉菜單中的html代碼
②復(fù)制-粘貼,稍微修改width和height


10. 底部版權(quán)區(qū)footer/copyright

①使用嵌套的有序/無序列表


<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>
② 設(shè)置li的寬度來實(shí)現(xiàn)上述列表分組(如div寬度為1000px時(shí),設(shè)置li寬度為200px,則可以分為5組)


11. 文字/鏈接/圖片的常用格式

①文字格式:



{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è)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉