欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html中ul和li標(biāo)簽的用法詳解

  發(fā)布時(shí)間：2023-02-20 10:27:59   作者：DemonHunter211   我要評(píng)論
普通的顯示數(shù)據(jù)的時(shí)候，ul就是項(xiàng)目列表，li就是列表項(xiàng)，可以用來(lái)顯示數(shù)據(jù)，如果用于DIV＋CSS布局的話，ul+li可以替換表格的作用，具體的設(shè)置，如果寬度高度、行間距、背景邊框需要配合CSS一起設(shè)置，這篇文章主要介紹了html中ul和li標(biāo)簽的用法詳解,需要的朋友可以參考下

普通的顯示數(shù)據(jù)的時(shí)候，ul就是項(xiàng)目列表，li就是列表項(xiàng)?？梢杂脕?lái)顯示數(shù)據(jù)。如果用于DIV＋CSS布局的話，ul+li可以替換表格的作用，具體的設(shè)置，如果寬度高度、行間距、背景邊框等需要配合CSS一起設(shè)置。

一.做導(dǎo)航，居中 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>做導(dǎo)航</title>
<style type="text/css">

#menu{
    width:1000px;
    height:35px;
    float:right;
    margin:0px; 
    clear:both; 
    vertical-align:bottom;
} 
#ul li{
    list-style-type:none; /*去掉項(xiàng)目符號(hào)的，比如你用了<ul><li></li><li></li></ul>默認(rèn)的li里邊的字是有列表符號(hào)的，小圓點(diǎn)。這個(gè)list-style-type: none就是不要列表符號(hào)*/
    clear:both;
    width:100px;
    display:inline; /*li {display: inline} 讓 li 不再獨(dú)占一行, 寬度上只會(huì)得到必要的而不是占有所在容器的全寬*/
    font-size: larger;
    text-decoration:none;
} 
a{
    text-decoration:none;   /*去掉下劃線*/
}
</style>
</head>

<body>

<div id="menu"> 
<ul id="ul"> 
<li><a title="" href="http://localhost:1435/BookShop/index.aspx">首頁(yè) </a></li> 
<li><a title="" href="http://localhost:1435/BookShop/hybooks.aspx">行業(yè)圖書 </a></li> 
<li><a title="" href="http://localhost:1435/BookShop/Clothing.aspx">服飾潮流 </a></li> 
<li><a title="" href="http://localhost:1435/BookShop/">美容會(huì)所 </a></li> 
<li><a title="" href="http://localhost:1435/BookShop/">媽咪寶貝 </a></li> 
<li><a title="" href="http://localhost:1435/BookShop/">禮品書籍 </a></li> 
<li><a title="" href="http://localhost:1435/BookShop/">新聞資訊 </a></li> 
<li><a title="" href="http://localhost:1435/BookShop/">用戶留言 </a></li> 
<li><a title="" href="http://localhost:1435/BookShop/">聯(lián)系我們 </a></li> 
</ul> 
</div> 

</body>
</html>

二.少量數(shù)據(jù)表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
</style>
</head>

<body>

<div>默認(rèn)是豎排，并且?guī)A點(diǎn) 
<ul> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
</ul> 
</div> 

</body>
</html>

三.少量數(shù)據(jù)表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

</style>
</head>

<body>

<div> 
<ul> 
<li style="list-style:none;">去掉圓點(diǎn)</li> 
<li style="display:inline;">hello</li> 
<li>hello</li> 
<li style="display:inline;">hello</li> 
</ul> 
</div> 

</body>
</html>

四.少量數(shù)據(jù)表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
#myul li{
    float:left;
    width:100px;
} 
</style>
</head>

<body>
<!--制作表格的原理，ul寬度為300px,li寬度為100px，則成三列--> 
<div style="text-align:center;background:#eef"> 
<ul id="myul" style="width:300px;background:#eee"> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
</ul> 
</div> 
</div> 
</body>
</html>

五.少量數(shù)據(jù)表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
#myul li{
    float:left;
    width:100px;
} 
</style>
</head>

<body>
<!--橫向的方法,如果要居中，需要設(shè)置寬度才可以，這個(gè)寬度要和里面的li總長(zhǎng)度一樣。--> 
<div style="text-align:center;background:#def"> 
<ul id="myul" style="width:500px;background:#eee;"> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
<li>hello</li> 
</ul> 
</div> 
</body>
</html>

到此這篇關(guān)于html中ul和li標(biāo)簽的用法詳解的文章就介紹到這了,更多相關(guān)html中ul和li標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論