DIV+ul+LI實現表格效果以及div帶滑動條


 寫這個是為了給自己一個好好的筆記,以免下次需要的時候又到處找,費神費事費時費力。開始吧!

1.先看看效果

2.網頁代碼

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head>
 6 <title>divtest</title>
 7 <style>
 8 #t {
 9 width: 404px;
10 margin: 5px auto;
11 padding:0px;
12 border-top: #0066cc 1px solid;
13 border-left: #0066cc 1px solid;
14 display:table;
15 }
16 #t li {
17 float: left;
18 width: 100px;
19 height: 50px;
20 list-style-type: none;
21 border-right:#0066cc 1px solid;
22 border-bottom: #0066cc 1px solid;
23 text-align: center;
24 line-height: 50px;
25 }
26 </style>
27 </head>
28 
29 <body>
30    
31    <div style="overflow:scroll; height:100px; width:200px">
32     <ul>
33     <li>dddddd</li>
34     <li>dddddd</li>
35     <li>dddddd</li>
36     <li>dddddd</li>
37     <li>dddddd</li>
38     <li>dddddd</li>
39     <li>dddddd</li>
40     <li>dddddd</li>
41     <li>dddddd</li>
42     <li>dddddd</li>
43     <li>dddddd</li>
44     <li>dddddd</li>
45     <li>dddddd</li>
46     <li>dddddd</li>
47     <li>dddddd</li> 
48     <li>dddddd</li>
49     <li>dddddd</li>       
50     </ul>
51    </div>
52    <ul id="t">
53 <li style="width:403px;">helloworld</li>
54 <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
55 </ul>
56 
57 </body>
58 </html>

 div 滑動條 

overflow:scroll 和overflow:auto;/*自動出現滾動條,如果要出現豎直滾動條則改成:overflow-y:auto,如果橫向出現滾動條則改成:overflow-x:auto*/

scrollbar-face-color:#F00;/*滾動條凸出部分的顏色(前景色),包括兩端的方形按鈕、水平或豎直滑動的滑塊的顏色*/
scrollbar-track-color:#FFF;/*滾動條的背景顏色,如果省略的話將出現虛點,顏色將采用face-color的顏色*/
scrollbar-arrow-color:#FFF;/*按鈕(上下或者左右可以點擊使滑塊滾動的方形按鈕)上三角箭頭的顏色*/
scrollbar-3dlight-color:#0F0;/*滾動條亮邊的顏色,形成3D效果,有層次感,肉眼觀察在滾動條左邊及上邊出現一條有色線(豎直方向滾動)*/
scrollbar-darkshadow-color:#00F;/*滾動條強陰影的顏色,肉眼觀察出現滾動條下邊及右邊*/
scrollbar-highlight-color:#F0F;/*滾動條空白部分的顏色,肉眼觀察改變不明顯,具體顏色改變出現在左邊和上邊空白處,介於face-color效果與3dlingt-color效果之間有個空白顏色(默認為白色)。此外,滾動條前景色有種凹陷的感覺,周邊線條顏色凸起*/
scrollbar-shadow-color:#006600;/*立體滾動條陰影的顏色,具體出現在滑塊及方形按鈕的右邊及下邊,形成陰影效果,顏色介於face-color效果和darkshadow-color效果之間,不是很明顯*/
scrollbar-base-color:#0f0;/*滾動條的基本顏色,當前面7個效果出現時,滾動條基本顏色設置肉眼很難觀察到,如果不設置前面7個效果,系統將根據base-color自動設置,其中前景色,背景色(虛點表示)顏色一致,其他效果(陰影以黑色填充),沒有什么要求時,建議不設置此效果*/

如果沒有要做這個效果,也許我永遠不知道!實踐是檢驗真理的最好辦法,真的不錯!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM