效果图:
csstest.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
*{ margin-left : 0 ; margin-top : 0 ; font-size : 12px ; color :White; } #biaoge { /*对ID为biaoge的标签使用此CSS*/ width : 405px ; /*列宽100,加上五个为1的边距,四列就是405*/ margin : 45px auto ; border-width : 1px ; border-color :Black; } #biaoge li { /*对ID为biaoge的标签里面的LI使用此CSS*/ list-style-type : none ; width : 100px ; height : 30px ; background-color :Gray; line-height : 30px ; text-align : center ; margin-left : 1px ; margin-bottom : 1px ; float : left ; /*这里很关键,有了它,li才会根据ul的宽度来换行*/ } #biaoge li.biaotou { background-color :Black; } |
test.aspx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
< ul id = "biaoge" > < li class = "biaotou" >第一列</ li > < li class = "biaotou" >第二列</ li > < li class = "biaotou" >第三列</ li > < li class = "biaotou" >第四列</ li > < li >数据1-1</ li > < li >数据1-2</ li > < li >数据1-3</ li > < li >数据1-4</ li > < li >数据2-1</ li > < li >数据2-2</ li > < li >数据2-3</ li > < li >数据2-4</ li > < li >数据3-1</ li > < li >数据3-2</ li > < li >数据3-3</ li > < li >数据3-4</ li > < li >数据4-1</ li > < li >数据4-2</ li > < li >数据4-3</ li > < li >数据4-4</ li > </ ul > |
再来分享一个服务器之家用的控制表格样式的css
1
2
3
4
5
6
7
8
9
10
11
12
|
#content table{ border : 1px solid #cccccc ; border-collapse : collapse ; text-align : center ; margin-top : 0.54em ; clear : both ; width : 100% ;} #content table th,#content table td{ padding : 8px ; border : 1px solid #C1DAD7 ; line-height : 22px ; text-align : left } #content table th{ background : #CAE8EA ;} #content table thead, #content table.jbborder tr { background-color : #fff ;} #content table tr:nth-child(even){ background-color : #f5fafa } #content table tbody tr:hover { background : rgba( 255 , 255 , 153 ,. 4 )} #content table th img{ display : block ; margin : 5px auto 0 ;} #content table td{ text-align : left } #content table td.version{ font-weight : bold ;} #content table pre { width : auto ; margin : 0 ; padding : 0 ; border : 0 ; background : transparent } #content table td p{ margin : 0 ; padding : 0 ; line-height : 22px ;} #content table ul{ margin-top : 2px ;} |
html结构就是最简单的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
< table > < tbody > < tr > < td >设定值</ td > < td >描述</ td > </ tr > < tr > < td >0</ td > < td >在隐藏的窗口中打开程序。</ td > </ tr > < tr > < td >1</ td > < td >以正常尺寸打开窗口。如果该窗口已经最大化或最小化,则系统会自动将窗口回滚到正常状态。</ td > </ tr > < tr > < td >2</ td > < td >用最小化窗口打开程序。</ td > </ tr > < tr > < td >3</ td > < td >用最大化窗口打开程序。</ td > </ tr > < tr > < td >4</ td > < td >以最近使用的窗口尺寸和位置打开程序窗口。激活的窗口仍然激活。</ td > </ tr > < tr > < td >5</ td > < td >以当前使用的窗口尺寸和位置打开程序窗口。</ td > </ tr > < tr > < td >7</ td > < td >以最小化打开程序窗口。当前激活的窗口仍然激活。</ td > </ tr > < tr > < td >10</ td > < td >以打开程序默认的窗口尺寸打开程序窗口。</ td > </ tr > </ tbody > </ table > |
效果图
到此这篇关于CSS在UL LI的样式用法(UI上的应用)的文章就介绍到这了,更多相关CSS UL LI样式内容请搜索服务器之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持服务器之家!