本文小編為大家詳細(xì)介紹“DIV+CSS網(wǎng)站布局的方法”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“DIV+CSS網(wǎng)站布局的方法”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,成都做網(wǎng)站公司-創(chuàng)新互聯(lián)已向成百上千企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。
一、橫向列表菜單
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { border: 1px solid #CCC; height:26px; background: #eee;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; }
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="">首頁(yè)</a></li>
<li><a href="">網(wǎng)頁(yè)版式布局</a></li>
<li><a href="">div+css教程</a></li>
<li><a href="">div+css實(shí)例</a></li>
<li><a href="">常用代碼</a></li>
</ul>
</div>
</body>
</html>
為了用戶體驗(yàn)更加友好,還是把a(bǔ)轉(zhuǎn)換成塊級(jí)元素,也可給a設(shè)置背景色或背景圖片來更加美觀了,另外再設(shè)置鼠標(biāo)放上時(shí)的樣式。
#menu { width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left;}
#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}
#menu ul li a:hover { background:#333; color:#fff;}
二、 用圖片美化的橫向?qū)Ш?/p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="">首頁(yè)</a></li>
<li><a href="">網(wǎng)頁(yè)版式</a></li>
<li><a href="">web教程</a></li>
<li><a href="">web實(shí)例</a></li>
<li><a href="">常用代碼</a></li>
</ul>
</div>
</body>
</html>
三、 CSS Sprites技術(shù)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;}
#menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="">首頁(yè)</a></li>
<li><a href="">網(wǎng)頁(yè)版式</a></li>
<li><a href="">web教程</a></li>
<li><a href="">web實(shí)例</a></li>
<li><a href="">常用代碼</a></li>
</ul>
</div>
</body>
</html>
下拉及多級(jí)彈出菜單
■帶下拉子菜單的導(dǎo)航菜單
■絕對(duì)定位和浮動(dòng)的區(qū)別和運(yùn)用
■css自適應(yīng)寬度滑動(dòng)門菜單
一、帶下拉子菜單的導(dǎo)航菜單
html代碼增加二級(jí)菜單的代碼:
<div id="menu">
<ul>
<li><a id="current" href="">首頁(yè)</a></li>
<li><a href="">網(wǎng)頁(yè)版式</a>
<ul>
<li><a href="">自適應(yīng)寬度</a></li>
<li><a href="">固定寬度</a></li>
</ul>
</li>
<li><a href="">web教程</a>
<ul>
<li><a href="">新手入門</a></li>
<li><a href="">視頻教程</a></li>
<li><a href="">常見問題</a></li>
</ul>
</li>
<li><a href="">web實(shí)例</a></li>
<li><a href="">常用代碼</a></li>
</ul>
</div>
二級(jí)菜單的背景和浮動(dòng)清除掉
#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}
#menu ul li ul { border:1px solid #ccc;}
#menu ul li ul li { float:none; width:85px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
二級(jí)菜單隱藏
#menu ul li ul { display:none; border:1px solid #ccc;}
#menu ul li:hover ul { display:block;}
二、絕對(duì)定位和浮動(dòng)的區(qū)別和運(yùn)用
當(dāng)一個(gè)元素使用絕對(duì)定位后,它的位置將依據(jù)瀏覽器左上角開始計(jì)算或相對(duì)于父容器(在父容器使用相對(duì)定位時(shí))。 絕對(duì)定位使元素脫離文檔流,因此不占據(jù)空間。普通文檔流中元素的布局就當(dāng)絕對(duì)定位的元素不存在時(shí)一樣。因?yàn)榻^對(duì)定位的框與文檔流無關(guān),所以它們可以覆蓋頁(yè)面上的其他元素。
而浮動(dòng)元素的定位還是基于正常的文檔流,然后從文檔流中抽出并盡可能遠(yuǎn)的移動(dòng)至左側(cè)或者右側(cè)。文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周圍。當(dāng)一個(gè)元素從正常文檔流中抽出后,仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間。它只是改變了文檔流的顯示,而沒有脫離文檔流,理解了這一點(diǎn),就很容易弄明白什么時(shí)候用定位,什么時(shí)候用浮動(dòng)了。
三、 css自適應(yīng)寬度滑動(dòng)門菜單
需要在文字上增加一個(gè)輔助標(biāo)簽,如span,分別在a上和span上設(shè)置背景,一個(gè)左側(cè)對(duì)齊,一個(gè)右側(cè)對(duì)齊
綠色部分為span,然后定義它的背景圖片靠右側(cè)對(duì)齊,而左側(cè)的部分為a的背景圖片,定義靠左側(cè)對(duì)齊。當(dāng)文字多時(shí),會(huì)把span撐開,這實(shí)現(xiàn)了自適應(yīng)寬度的按鈕了。
CSS表單設(shè)計(jì)
■改變文本框和文本域樣式
■用圖片美化按鈕
■改變下拉列表樣式
■用label標(biāo)簽提升用戶體驗(yàn)
一、改變文本框和文本域樣式
。text1 { border:1px solid #f60; color:#03C;}
。text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}
。text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-repeat;}
。text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(bg_9.gif) 0 0 no-repeat;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
。select { border:1px solid #f60; background:#FF9; height:30px;}
。tip { width:50px; border:1px solid #ccc; background:#fff; position:absolute; top:5px; left:70px; font-size:12px; height:100px; padding:5px;}
</style>
</head>
<body>
<p>請(qǐng)選擇項(xiàng)目:</p>
<p>
<select name="select" id="select" class="select">
<option>請(qǐng)選擇----------------</option>
<option>標(biāo)準(zhǔn)之路</option>
</select>
</p>
<div class="tip">看看誰能把我擋著</div>
</body>
</html>
高效整潔CSS代碼原則
1. 使用Reset但并非全局Reset *{ margin:0; padding:0; }
body, h2, h3, h4, h5, h6, h7, hr, p,
blockquote,
dl, dt, dd, ul, ol, li,
pre,
form, fieldset, legend, button, input, textarea,
th, td,
img{
border:medium none;
margin: 0;
padding: 0;
}
body,button, input, select, textarea {
font: 12px/1.5 '宋體',tahoma, Srial, helvetica, sans-serif; }
h2, h3, h4, h5, h6, h7 { font-size: 100%; }
em{font-style:normal;}
ul, ol { list-style: none; }
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
img{ border:0px;}
table { border-collapse: collapse; border-spacing: 0; }
2. 良好的命名習(xí)慣
無疑亂七八糟或者無語(yǔ)義命名的代碼 .aaabb{margin:2px;color:red;}
3. 代碼縮寫
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}
就可以縮寫為:
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
CSS 清理浮動(dòng)方式
。clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
。clearfix {
zoom:1;
}
讀到這里,這篇“DIV+CSS網(wǎng)站布局的方法”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站名稱:DIV+CSS網(wǎng)站布局的方法
轉(zhuǎn)載來于:http://bm7419.com/article42/jcijec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)公司、ChatGPT、軟件開發(fā)、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)