CSS基礎(chǔ)教程之列表及邊框?qū)傩?/h1>
CSS列表屬性
項目符號或編號前面的各種符號無法改變樣式,所以在實(shí)際中我們一般不用。
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:粗細(xì) 線型 線的顏色;
線型:none(無線)、solid(實(shí)線)、dashed(虛線)、dotted(點(diǎn)狀線)
舉例: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列表屬性
項目符號或編號前面的各種符號無法改變樣式,所以在實(shí)際中我們一般不用。
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:粗細(xì) 線型 線的顏色;
線型:none(無線)、solid(實(shí)線)、dashed(虛線)、dotted(點(diǎn)狀線)
舉例: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>