CSS ????? ?
CSS? ???? ??? HTML ?? ?? ???? ?? ???? ??? ? ????.
html? css? ???? ?? ?? ?? ???
li set float:left; ??> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px 50px;/*margin:100px auto無效,不能使ul左右居中*/
text-align:center;
font-size:14px;
}
li{
float:left;/*改動的地方*/
width:80px;
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;/*整體變?yōu)榭牲c擊區(qū)域，而不只是字*/
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
??:
①ul? ??? ??? ? ??? ??:100px ???? ???? ul? ??? ? ????. ??? ?? ②ul? ???? ??? 0??. ③ li? ??? ???? ??? ???? ??? ? ????.
IVli ??? ??? ???? li? ??? ??? ? ????.
⑤ ?? ??? ??? ? ??? ??:??? ??? ? ????.
⑥??? ??? ???? ??? display:inline;
li ?? float? ???? display:inline-block? ???? ???. ; <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px;
text-align:center;
font-size:14px;
}
li{
display:inline-block;/*改動的地方*/
width:80px;
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
①ul? ?? ??:100px ??? ?????. ul? ??? ???? ??? ??? ? ????. ② li? ??? ???? ? li ???? ??? ??? ????.
3 ?? ??? ??? ? ??? ??:??? ??? ? ????.
html? css? ??? ?? ????? ? ???<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:5px; padding:2px; width:250px; font-size: 19px;}
li { background: #ddd url(fasfas.gif) no-repeat 10px center; margin: 0; padding: 2px 35px; border-left: 1px solid #fff;
border-top: 1px solid #fff; border-right: 1px solid #666; border-bottom: 1px solid #aaa;}
</style>
<body>
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>
??? ??:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:0; padding:0;}
li{display:inline;}
</style>
<body>
<div>
<ul>
<li>奇才</li>
<li>村村</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</div>
</body>
</html>
