CSS基础教程之列表及边框属性

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边框属性:每个元素都可以加边框线

  •  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>


继续学习
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交重置代码
图片放大关闭