網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)三
橫向導航菜單
■橫向列表菜單
■用圖片美化的橫向導航
■css Sprites
一、橫向列表菜單
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="">首頁</a></li>
<li><a href="">網頁版式布局</a></li>
<li><a href="">div+css教程</a></li>
<li><a href="">div+css實例</a></li>
<li><a href="">常用代碼</a></li>
</ul>
</div>
</body>
</html>
為了用戶體驗更加友好，還是把a轉換成塊級元素，也可給a設置背景色或背景圖片來更加美觀了，另外再設置鼠標放上時的樣式。
#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;}
二、 用圖片美化的橫向導航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="">首頁</a></li>
<li><a href="">網頁版式</a></li>
<li><a href="">web教程</a></li>
<li><a href="">web實例</a></li>
<li><a href="">常用代碼</a></li>
</ul>
</div>
</body>
</html>
三、 CSS Sprites技術
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="">首頁</a></li>
<li><a href="">網頁版式</a></li>
<li><a href="">web教程</a></li>
<li><a href="">web實例</a></li>
<li><a href="">常用代碼</a></li>
</ul>
</div>
</body>
</html>
下拉及多級彈出菜單
■帶下拉子菜單的導航菜單
■絕對定位和浮動的區別和運用
■css自適應寬度滑動門菜單
一、帶下拉子菜單的導航菜單
html代碼增加二級菜單的代碼：
<div id="menu">
<ul>
<li><a id="current" href="">首頁</a></li>
<li><a href="#">網頁版式</a>
<ul>
<li><a href="">自適應寬度</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實例</a></li>
<li><a href="">常用代碼</a></li>
</ul>
</div>
二級菜單的背景和浮動清除掉
#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;}
二級菜單隱藏
#menu ul li ul { display:none; border:1px solid #ccc;}
#menu ul li:hover ul { display:block;}
二、絕對定位和浮動的區別和運用
當一個元素使用絕對定位后，它的位置將依據瀏覽器左上角開始計算或相對于父容器（在父容器使用相對定位時）。 絕對定位使元素脫離文檔流，因此不占據空間。普通文檔流中元素的布局就當絕對定位的元素不存在時一樣。因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。
而浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間。它只是改變了文檔流的顯示，而沒有脫離文檔流，理解了這一點，就很容易弄明白什么時候用定位，什么時候用浮動了。
三、 css自適應寬度滑動門菜單
需要在文字上增加一個輔助標簽，如span，分別在a上和span上設置背景，一個左側對齊，一個右側對齊
綠色部分為span，然后定義它的背景圖片靠右側對齊，而左側的部分為a的背景圖片，定義靠左側對齊。當文字多時，會把span撐開，這實現了自適應寬度的按鈕了。
CSS表單設計
■改變文本框和文本域樣式
■用圖片美化按鈕
■改變下拉列表樣式
■用label標簽提升用戶體驗
一、改變文本框和文本域樣式
.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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>請選擇項目：</p>
<p>
<select name="select" id="select" class="select">
<option>請選擇----------------</option>
<option>標準之路</option>
</select>
</p>
<div class="tip">看看誰能把我擋著</div>
</body>
</html>
高效整潔CSS代碼原則
1. 使用Reset但并非全局Reset *{ margin:0; padding:0; }
/** 清除內外邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */
th, td, /* table elements 表格元素 */
img/* img elements 圖片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 設置默認字體 **/
body,button, input, select, textarea {
font: 12px/1.5 '宋體',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { 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. 良好的命名習慣
無疑亂七八糟或者無語義命名的代碼 .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 清理浮動方式
/* 清理浮動 */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}
相關內容：
網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一
網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二
網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)三
上一篇：網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二
除非注明,本站所有文章皆為本人原創,可隨意轉載但請保留鏈接或名字,謝謝!
相關標簽： html教程divcss石家莊做網站石嘴山做網站雙鴨山做網站四川做網站肅北蒙古做網站肅南裕固做網站綏芬河做網站隨州做網站臺山做網站太倉做網站太原做網站泰興做網站泰州做網站唐山做網站天津做網站調兵山做網站鐵嶺做網站通化做網站
