CSS在UL LI的樣式用法(UI上的應(yīng)用)
發(fā)布時間:2023-05-21 15:03:02 作者:佚名
我要評論
這篇文章主要介紹了CSS在UL LI的樣式用法,主要是UI上的應(yīng)用,我們通過代碼分離的方式通過css完全控制css的樣式
效果圖:
csstest.css
*{
margin-left:0;
margin-top:0;
font-size:12px;
color:White;
}
#biaoge
{
/*對ID為biaoge的標(biāo)簽使用此CSS*/
width:405px; /*列寬100,加上五個為1的邊距,四列就是405*/
margin:45px auto;
border-width:1px;
border-color:Black;
}
#biaoge li
{
/*對ID為biaoge的標(biāo)簽里面的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; /*這里很關(guān)鍵,有了它,li才會根據(jù)ul的寬度來換行*/
}
#biaoge li.biaotou
{
background-color:Black;
}
test.aspx
<ul id="biaoge">
<li class="biaotou">第一列</li>
<li class="biaotou">第二列</li>
<li class="biaotou">第三列</li>
<li class="biaotou">第四列</li>
<li>數(shù)據(jù)1-1</li>
<li>數(shù)據(jù)1-2</li>
<li>數(shù)據(jù)1-3</li>
<li>數(shù)據(jù)1-4</li>
<li>數(shù)據(jù)2-1</li>
<li>數(shù)據(jù)2-2</li>
<li>數(shù)據(jù)2-3</li>
<li>數(shù)據(jù)2-4</li>
<li>數(shù)據(jù)3-1</li>
<li>數(shù)據(jù)3-2</li>
<li>數(shù)據(jù)3-3</li>
<li>數(shù)據(jù)3-4</li>
<li>數(shù)據(jù)4-1</li>
<li>數(shù)據(jù)4-2</li>
<li>數(shù)據(jù)4-3</li>
<li>數(shù)據(jù)4-4</li>
</ul>
再來分享一個腳本之家用的控制表格樣式的css
#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結(jié)構(gòu)就是最簡單的
<table> <tbody> <tr> <td>設(shè)定值</td> <td>描述</td> </tr> <tr> <td>0</td> <td>在隱藏的窗口中打開程序。</td> </tr> <tr> <td>1</td> <td>以正常尺寸打開窗口。如果該窗口已經(jīng)最大化或最小化,則系統(tǒng)會自動將窗口回滾到正常狀態(tài)。</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>以當(dāng)前使用的窗口尺寸和位置打開程序窗口。</td> </tr> <tr> <td>7</td> <td>以最小化打開程序窗口。當(dāng)前激活的窗口仍然激活。</td> </tr> <tr> <td>10</td> <td>以打開程序默認(rèn)的窗口尺寸打開程序窗口。</td> </tr> </tbody> </table>
效果圖

到此這篇關(guān)于CSS在UL LI的樣式用法(UI上的應(yīng)用)的文章就介紹到這了,更多相關(guān)CSS UL LI樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法
這篇文章主要介紹了CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)2020-02-21CSS的ul和li實(shí)現(xiàn)橫向排列和去掉li的點(diǎn)
怎么實(shí)現(xiàn)ul的橫向排列和去掉li那個煩人的點(diǎn),現(xiàn)在找到方法了,在此與大家分享下,感興趣的朋友可以參考下,以備不時之需2013-10-23css中ul li的背景小圖標(biāo)屬性設(shè)置的兩種情況
ul li的背景小圖標(biāo)屬性設(shè)置一般會有兩種情況:定義在ul里及l(fā)i里,這兩種定義在什么情況下使用,在下文給出詳細(xì)的介紹,經(jīng)常div+css布局的朋友不妨參考下,希望對大家有所幫2013-09-27
DIV+CSS里,我們用得最多的就是ul li來顯示數(shù)據(jù),如新聞按鈕等,下面給大家一個css ul li的例子供學(xué)習(xí)
2023-05-21 UL、LI 無序列表實(shí)現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單
三行的純CSS網(wǎng)站導(dǎo)航欄菜單,改改風(fēng)格,讓大家感到新鮮一點(diǎn),其它主要還是使用了Li列表,整體布局簡潔,美觀大方,適合大部分網(wǎng)站使用,顏色和菜單空隙可隨意調(diào)節(jié),希望大
2009-11-08
網(wǎng)頁制作Webjx文章簡介:不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn),繼class和div被濫用后,ul列表也有被不正確使用的趨勢。
今天交流會上,分享前端的開發(fā)經(jīng)
2009-04-02 
