CSS ????? ?
?? ?
?? ??????? ?? ?? ???? ???? ?? ?? ?????.
CSS? ???? ??? HTML ?? ?? ???? ?? ?? ?? ? ????.
?? ?? = ?? ??
?? HTML ???? ?? ??? ?????
. ? ???? ?? HTML ?? ?? ??? ?????.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)</title> </head> <body> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">新聞</a></li> <li><a href="#">娛樂(lè)</a></li> <li><a href="#">關(guān)于</a></li> </ul> <p>注意:我們用 href="#"作為測(cè)試連接.用在一個(gè)真正的web站點(diǎn)的url。</p> </body> </html>
?? ?? ??
? ???? ?? ?? ??? ????? <a> ??? ???? ?????
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂(lè)</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</body>
</html>?:
display:block - ?? ??? ?? ??? ???? ?? ?? ??? ??? ? ??? ???(????? ???). ??? ??? ? ????.
width:60px - ?? ?? ???? ?? ?????. ??? 60??? ???? ???.
??: ?? ?? ???? <a> ??? ??? ?????. ??? ???? IE6?? ??? ?? ??? ??? ? ????.
?? ?? ?
?? ?? ?? ??? ???? ? ??? ????. ??? ?? ?? ?? ??? ?????.
? ?? ?? ????, ??? ??? ???? ??? ??? float ??? ???? ???.
??? ?? ??
?? ?? ??? ??? ?? ? ???
??? ???? ????. ?? ??? ?? ??????:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂(lè)</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</body>
</html>??? ?? ??
? ??? ??? ??? ????.
?? ??? ??? ??? ??? <li> ??? ??? <a> ??? ??? ?????.
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">娛樂(lè)</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
<p><b>注意:</b> 如果!DOCTYPE 沒(méi)有定義, floating 可以產(chǎn)生意想不到的結(jié)果.</p>
<p><b>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>
</body>
</html>?? ??:
float:left - ?? ?? ?? ?? ?? ??? ???? ????
display:block - ?? ??? ?? ??? ???? ??? ?? ??? ?? ??(????? ???)?? ????. us ?? ??
??:60px - ?? ??? ????? ?? ?????. ??? 60??? ????? ???
