CSS基礎(chǔ)教學(xué)之列表及邊框?qū)傩?/h1>
CSS清單屬性
項目符號或編號前面的各種符號無法改變樣式,所以在實際中我們一般不用。
list-style:清單樣式,取值:none。去掉項目符號或編號前面的各種符號。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
ul,li{list-style:none;}/*去掉前面的符號*/
</style>
</head>
<body>
<ul>
<li>HTML+CSS</li>
<li>JavaScript</li>
<li>MySQL</li>
<li>PHP</li>
</ul>
</body>
</html>
CSS邊框?qū)傩裕好總€元素都可以加上邊框線
?border-left:左邊框線。
?格式:border-left:粗細?線型?線的顏色;
?線型:none(無線) 、solid(實線)、dashed(虛線)、dotted(點狀線)
#?舉例:border-left:5px ?dashed ?red;
- border-right:右邊框線。
- border-top:上邊框線。
- border-bottom:下邊框線。
border:同時為四個邊加上邊框線。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
background-color:#66ff66;
width:200px;
height:200px;
border-left:6px solid red;
border-right:3px dashed blue;
border-top:5px dotted black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
#########
CSS清單屬性
項目符號或編號前面的各種符號無法改變樣式,所以在實際中我們一般不用。
list-style:清單樣式,取值:none。去掉項目符號或編號前面的各種符號。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> ul,li{list-style:none;}/*去掉前面的符號*/ </style> </head> <body> <ul> <li>HTML+CSS</li> <li>JavaScript</li> <li>MySQL</li> <li>PHP</li> </ul> </body> </html>
CSS邊框?qū)傩裕好總€元素都可以加上邊框線
?border-left:左邊框線。
?格式:border-left:粗細?線型?線的顏色;
?線型:none(無線) 、solid(實線)、dashed(虛線)、dotted(點狀線)
#?舉例:border-left:5px ?dashed ?red;
- border-right:右邊框線。
- border-top:上邊框線。
- border-bottom:下邊框線。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .box{ background-color:#66ff66; width:200px; height:200px; border-left:6px solid red; border-right:3px dashed blue; border-top:5px dotted black; } </style> </head> <body> <div class="box"></div> </body> </html>#########