最近整理了CSS導航欄及彈窗，具體如下：
CSS導航
先來看下效果：
| <!doctype html> <html> <head> <title>Insert your title</title> <meta charset="utf-8"> <style> body{ font-size:12px; } #discuss{ width:990px; margin:0 auto; } #mt{ /*高度：30px，邊框，上邊框，背景顏色*/ height:30px; border:1px solid #ddd; border-top:2px solid #9d9d9d; background:#F7F7F7; } #discuss-content{ border-bottom:1px solid #ddd; padding-bottom:2px; } #discuss-datas{ width:990px; } #discuss-datas thead td{ /*加粗，上下內(nèi)邊距，下邊框，文本居中對齊*/ font-weight:bold; padding:5px 0; border-bottom:1px solid #ddd; text-align:center; color:#666; } /*處理 .col1 的樣式 (每行第一列的效果)*/ #discuss-datas td.col1{ width:620px; text-align:left; } /*內(nèi)容行中所有的列*/ #discuss-datas tbody td{ /*虛線下邊框，上下內(nèi)邊距，文本水平居中對齊，文本顏色*/ border-bottom:1px dotted #ddd; padding:5px 0; text-align:center; color:#9c9a9c; } /*處理所有超鏈接*/ #discuss a{ color:#005aa0; text-decoration:none; } #discuss a:hover{ text-decoration:underline; } /*曬，論 兩幅圖*/ #discuss-datas b{ /*寬度，高度，背景屬性*/ padding-left:21px; padding-bottom:2px; padding-top:3px; background-image:url(../Images/iconlist_1.png); background-repeat:no-repeat; margin-right:5px; } b.shai{ background-position:-110px -220px; } b.lun{ background-position:-152px -220px; } /*2017-01-09 浮動練習*/ #mt a{ float:left; width:100px; height:30px; text-align:center; line-height:30px; } #mt a.current{ /*左右上邊框，背景顏色，文本顏色*/ border:1px solid #ddd; border-bottom:none; border-top:2px solid #E4393C; background-color:#fff; color:#E4393C; /*位置上調(diào):margin-top 給負值*/ margin-top:-6px; height:35px; line-height:35px; } #extra p{margin:0;} /*方案1*/ /*#extra p.new{ float:left; } #extra p.total{ float:right; } #extra{ overflow:hidden; }*/ /*方案2*/ #extra p.total{ float:right; } </style> </head> <body> <!-- 練習 --> <!-- #discuss : width:990px --> <div id="discuss"> <!-- 頁簽 #mt : height:30px; ,邊框，背景 --> <div id="mt"> <a href="#">網(wǎng)友討論圈</a> <a href="#" class="current">曬單帖</a> <a href="#">討論帖</a> <a href="#">圈子帖</a> <a href="#">問答帖</a> </div> <!-- 內(nèi)容 #discuss-content : 下邊框 --> <div id="discuss-content"> <!-- 表格 --> <table id="discuss-datas"> <thead> <tr> <td class="col1">主題</td> <td>回復/瀏覽</td> <td>作者</td> <td>時間</td> </tr> </thead> <tbody> <tr> <td class="col1"> <b class="shai"></b> <a href="#"> 好大一瓶，不錯 </a> </td> <td>0/0</td> <td> <a href="#">2001年冬天</a> </td> <td> 2011-11-11 11:11:11 </td> </tr> <tr> <td class="col1"> <b class="lun"></b> <a href="#"> 好大一瓶，不錯 </a> </td> <td>0/0</td> <td> <a href="#">2001年冬天</a> </td> <td> 2011-11-11 11:11:11 </td> </tr> <tr> <td class="col1"> <b class="shai"></b> <a href="#"> 好大一瓶，不錯 </a> </td> <td>0/0</td> <td> <a href="#">2001年冬天</a> </td> <td> 2011-11-11 11:11:11 </td> </tr> <tr> <td class="col1"> <b class="lun"></b> <a href="#"> 好大一瓶，不錯 </a> </td> <td>0/0</td> <td> <a href="#">2001年冬天</a> </td> <td> 2011-11-11 11:11:11 </td> </tr> </tbody> </table> <!-- 其他內(nèi)容(略) --> <div id="extra"> <p class="total"> 共900個話題 <a href="#">瀏覽全部話題</a> </p> <p class="new"> 有問題與其他用戶討論 <a href="#">[發(fā)表帖子]</a> </p> </div> </div> </div> </body> </html> |
