CSS basic tutor...LOGIN

CSS basic tutorial list and border properties

CSS list properties

The various symbols in front of the bullet or number cannot change the style, so in practice we generally don’t use them.

  • list-style: list style, value: none. Remove various symbols before bullets or numbers.

<!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 property: Each element can have a border line

  • border-left: left border line.

  • Format: border-left: Thickness Line type Line color;

  • Line type: none (wireless) , solid (solid line), dashed (dashed line), dotted (dotted line)

  • Example: border-left: 5px dashed red;

  • border-right: right border line.

  • border-top: Top border line.

  • border-bottom: bottom border line.

  • border: Add borders to four sides at the same time.

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


Next Section
<!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>
submitReset Code
ChapterCourseware