li的簡單應用

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

作者:eoe
雖然自己天天寫CSS~~
可是來了原創文章這裡~~不知道要寫什麼~~

今天就先寫個LI 的簡單應用~~以後慢慢加好了

這是一個普通的LI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>li的簡單應用</title>
</head>
<body>
<div id="test">
<ul>
<li>測試清單的
</li>
<li>測試清單的
</li>
<li>測試清單的
</li>
<li>測試清單的
</li>
</ul>
</div>
</body>
</html>
提示：你可以先修改部分代碼再運行

加了點CSS樣式定義可以這樣

引用:
*{margin:0;padding:0;} 習慣性把所有的元素的內補丁外補丁定義為0
0可以沒有單位~~理論上是要單位的~不過0px 0pt 0em 都是0 所以~懶了~~

#test ul li 是包含選擇符
定義ID為test 裡面的ul裡的li
margin:~在基本所有的瀏覽器解析都是一樣~
這裡之所有要寫兩個是因為~
在li裡面有我用到border,IE5.x對border的解析與其他瀏覽器不一樣
margin/**/: 這樣的話~IE5.x是不認識的~~
當然還有其他的寫法如:
voice-family : "\"}\"";voice-family :inherit;等~
可參考http://bbs.51js.com/viewthread.php?tid=50475&fpage=1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>li的簡單應用</title>
<style type="text/css">
*{margin:0;padding:0;}
#test
{
width:300px;
margin:5px;
}
#test ul li
{
margin:3px;/* for IE5.x*/
margin/*\*/:1px;
list-style-type:none;
font:normal normal normal ಌpx/2em helvetica,Arial, verdana;
border:1px #004080 solid;
background: #fefefe url('http://bbs.51js.com/images/smilies/icon1.gif') no-repeat left center;
padding-left:20px;

}

</style>
</head>
<body>
<div id="test">
<ul>
<li>測試清單的
</li>
<li>測試清單的
</li>
<li>測試清單的
</li>
<li>測試清單的
</li>
</ul>
</div>
</body>
</html>
提示：你可以先修改部分代碼再運行

再加上類如日期之類的內容

引用:
span定義為float:right 他會跟在後面

}
#test ul li span
{
margin:0px 5px;
float:right;
}
</style>
</head>
<body>
<div id="test">
<ul>
<li><span>12-11</span>測試清單的
</li>
<li><span>12-11</span>測試清單的
</li>
<li><span>12-11</span>測試清單的
</li>
<li><span>12-11</span>測試清單的
</li>
</ul>
</div>
</body>
</html>
提示：你可以先修改部分代碼再運行

再加更多的內容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>li的簡單應用</title>
<style type="text/css">
*{margin:0;padding:0;}
#test
{
width:300px;
margin:5px;
}
#test ul li
{
margin:3px;/* for IE5.x*/
margin/*\*/:1px;
list-style-type:none;
font:normal normal normal ಌpx/1em helvetica,Arial, verdana;
border:1px #004080 solid;
}
#test ul li h4
{
font:normal normal normal ಌpx/2em helvetica,Arial, verdana;
padding-left:20px;
background: #fefefe url('http://bbs.51js.com/images/smilies/icon1.gif') no-repeat left center;

}
#test ul li p
{
padding:2px;
}
#test ul li span
{
margin:0px 5px;
float:right;
}
</style>
</head>
<body>
<div id="test">
<ul>
<li><h4><span>12-11</span>測試清單的</h4>
<p>測試清單的測試清單的測試清單的測試清單的測試清單的</p>
</li>
<li><h4><span>12-11</span>測試清單的</h4>
<p>測試清單的測試清單的測試清單的</p>
</li>
<li><h4><span>12-11</span>測試清單的</h4>
<p>測試清單的測試清單的測試清單的</p>
</li>
<li><h4><span>12-11</span>測試清單的</h4>
<p>測試清單的測試清單的測試清單的</p>
</li>
</ul>
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

li的簡單應用

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support