一個(gè)無(wú)序列表UL鼠標(biāo)激活顯示背景色的實(shí)例_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
鼠標(biāo)激活顯示背景色,我們?cè)撊绾尉帉戇@樣的代碼呢?我們來(lái)整理一下思路:把a(bǔ)里的部分設(shè)置成一個(gè)塊元素,然后定義鼠標(biāo)放上后的樣式。CSS1中:hover只對(duì)a元素起作用,CSS2中:hover應(yīng)用于所有元素.而IE7也沒(méi)同樣沒(méi)有支持CSS2中的這個(gè)標(biāo)準(zhǔn)。所以為了適應(yīng)所有瀏覽器還是要定義在a中。
我們看最終的效果:
我們看下面的xhtml代碼:
我們對(duì)上面的xhtml編寫css代碼:
我們看最終的運(yùn)行效果:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
我們看最終的效果:
我們看下面的xhtml代碼:
示例代碼 [m.dounai2.com]
<div id="links">
<ul>
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml css div css - mb5u.com</em> <span>m.dounai2.com</span></a></li>
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml css div css - mb5u.com</em> <span>m.dounai2.com</span></a></li>
</ul>
</div>
<ul>
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml css div css - mb5u.com</em> <span>m.dounai2.com</span></a></li>
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml css div css - mb5u.com</em> <span>m.dounai2.com</span></a></li>
</ul>
</div>
我們對(duì)上面的xhtml編寫css代碼:
示例代碼 [m.dounai2.com]
#links ul {
list-style-type: none;
width: 280px;
}
#links li {
border: 1px dotted #06f;
border-width: 1px 0;
margin-bottom: 16px;
}
#links li a {
color: #00f;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 8px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 280px;
}
#links li a:hover {
background: #f0f0f0; color:#036;
}
#links a em {
color: #666;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #999;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
list-style-type: none;
width: 280px;
}
#links li {
border: 1px dotted #06f;
border-width: 1px 0;
margin-bottom: 16px;
}
#links li a {
color: #00f;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 8px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 280px;
}
#links li a:hover {
background: #f0f0f0; color:#036;
}
#links a em {
color: #666;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #999;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
我們看最終的運(yùn)行效果:
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- DOV CSS表單:超炫的單選框與復(fù)選框效果!-Adam
- CSS實(shí)例:ULli打造CSS橫向菜單藍(lán)色地平線
- 用CSS打造評(píng)分星級(jí)效果的一個(gè)實(shí)例
- DIVCSS布局實(shí)例:DIV CSS新聞列表制作
- ul列表中包含input時(shí)line-height屬性失效的解決辦法
- CSS菜單:明快清新的格調(diào)闡述CSS當(dāng)前頁(yè)效果的實(shí)現(xiàn)
- CSS布局欣賞:淘寶首頁(yè)布局效果
- DIVCSS布局實(shí)例:各種2欄3欄布局實(shí)例(附下載)
- CSS中以圖片替換文字的表現(xiàn)方法
- CSS表格樣式:CSS JS打造可伸縮的表格
猜你也喜歡看這些
- 本人使用的頁(yè)面常用布局及樣式代碼
- 文本輸入框與文本不對(duì)齊(input對(duì)齊同一行的文字)怎么辦?
- CSS BUG 順口溜,輕松記住IE6常見(jiàn)BUG
- 如何使用list-style項(xiàng)目符號(hào)?
- WEB2.0標(biāo)準(zhǔn)教程:第五天head區(qū)的其他設(shè)置
- li中出現(xiàn)兩個(gè)以上浮動(dòng)時(shí)列表標(biāo)記出現(xiàn)問(wèn)題的解決辦法
- CSS的margin邊界疊加深度剖析
- WEB2.0標(biāo)準(zhǔn)教程:第八天CSS布局入門
- Div CSS教程:html中的換行造成空格問(wèn)題的探討
- 如何定義標(biāo)題最恰當(dāng)符合Web標(biāo)準(zhǔn)?
- 相關(guān)鏈接:
- 教程說(shuō)明:
DIV+CSS實(shí)例-一個(gè)無(wú)序列表UL鼠標(biāo)激活顯示背景色的實(shí)例。