DivCSS實(shí)例:一個效果很不錯的CSS列表_DIV+CSS實(shí)例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
Div CSS實(shí)例:一個效果很不錯的CSS列表
別人寫了一個效果,他想知道我假如要這樣的效果會怎么寫,于是寫了一個,貼出來,一起看,看這樣合不合理?
最終效果圖片:
CSS代碼:
示例代碼 [m.dounai2.com]
*{ margin:0; padding:0; list-style:none; border:none;}
body{ font-size:12px; font-family: Verdana; line-height:1.8; padding:30px;}
.c{ clear:both;}
a:link,a:visited{color:#FFF;text-decoration:none;}
a:hover,a:active{color:#FFCC00;text-decoration:underline;}
.info{background:#06518A; width:500px; padding:25px 10px 10px 10px;}
.info div{border:2px solid #B48E47; background:url(bg.gif) right top repeat-y #01395C; padding:10px;}
.info h2{ background:url(faq.gif) top center no-repeat; margin-top:-30px; position:absolute; width:480px; height:50px;}
.info span{ text-align:right; display:block}
.info li{ background:url(ic.gif) no-repeat center left; padding-left:10px; float:left; width:225px;}
body{ font-size:12px; font-family: Verdana; line-height:1.8; padding:30px;}
.c{ clear:both;}
a:link,a:visited{color:#FFF;text-decoration:none;}
a:hover,a:active{color:#FFCC00;text-decoration:underline;}
.info{background:#06518A; width:500px; padding:25px 10px 10px 10px;}
.info div{border:2px solid #B48E47; background:url(bg.gif) right top repeat-y #01395C; padding:10px;}
.info h2{ background:url(faq.gif) top center no-repeat; margin-top:-30px; position:absolute; width:480px; height:50px;}
.info span{ text-align:right; display:block}
.info li{ background:url(ic.gif) no-repeat center left; padding-left:10px; float:left; width:225px;}
XHTML代碼:(部分)
示例代碼 [m.dounai2.com]
<div class="info">
<div>
<h2> </h2>
<span><a href=""><img src="more.jpg" alt="more" /></a></span>
<ul>
<li><a href="">css test 001.</a></li>
<li><a href="">css test 002.</a></li>
<li><a href="">css test 003.</a></li>
<li><a href="">css test 004.</a></li>
<li><a href="">css test 005.</a></li>
<li><a href="">css test 006.</a></li>
<li><a href="">css test 001.</a></li>
<li><a href="">css test 002.</a></li>
<li><a href="">css test 003.</a></li>
<li><a href="">css test 004.</a></li>
<li><a href="">css test 005.</a></li>
<li><a href="">css test 006.</a></li>
</ul>
<p class="c"></p>
</div>
</div>
<div>
<h2> </h2>
<span><a href=""><img src="more.jpg" alt="more" /></a></span>
<ul>
<li><a href="">css test 001.</a></li>
<li><a href="">css test 002.</a></li>
<li><a href="">css test 003.</a></li>
<li><a href="">css test 004.</a></li>
<li><a href="">css test 005.</a></li>
<li><a href="">css test 006.</a></li>
<li><a href="">css test 001.</a></li>
<li><a href="">css test 002.</a></li>
<li><a href="">css test 003.</a></li>
<li><a href="">css test 004.</a></li>
<li><a href="">css test 005.</a></li>
<li><a href="">css test 006.</a></li>
</ul>
<p class="c"></p>
</div>
</div>
最終運(yùn)行效果:
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- 圖片邊框變換CSSHover狀態(tài)效果一例
- Div CSS實(shí)例:如何用CSS實(shí)現(xiàn)背景半透明效果
- CSS布局實(shí)例:CSS標(biāo)簽切換代碼實(shí)例教程
- CSS如何實(shí)現(xiàn)單行圖片與文字垂直居中?
- CSS布局教程:DIV CSS三列式布局的實(shí)現(xiàn)方法
- DivCSS布局關(guān)于分辨率與100%自適應(yīng)問題的探討!
- CSS菜單:明快清新的格調(diào)闡述CSS當(dāng)前頁效果的實(shí)現(xiàn)
- CSSFloatLayoutBasics-CSS浮動布局基礎(chǔ)
- 用“ul li”及css制作韓國風(fēng)格菜單
- CSS布局欣賞:淘寶首頁布局效果
猜你也喜歡看這些
- 如何設(shè)計字體的大小以提高訪客的用戶體驗(yàn)?
- CSS畫三角形的方法及應(yīng)用實(shí)例
- IE7新支持的CSS選擇器有哪些?
- float和position屬性的區(qū)別和使用方法
- 鼠標(biāo)經(jīng)過時可以切換CSS嗎?如何實(shí)現(xiàn)?
- XHTMLCSS網(wǎng)頁布局中ID與class的理解應(yīng)用
- web標(biāo)準(zhǔn)中IE無法設(shè)置滾動條顏色解決方法
- CSS如何制作一張圖片多種狀態(tài)的圖象翻轉(zhuǎn)菜單?
- CSS hack 用CSS條件注釋實(shí)現(xiàn)
- 標(biāo)準(zhǔn)下隔行換色的思考
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實(shí)例-DivCSS實(shí)例:一個效果很不錯的CSS列表。