CSS属性之边框与列表

最新推荐文章于 2023-09-14 16:43:59 发布

Jacky-Summer

最新推荐文章于 2023-09-14 16:43:59 发布

阅读量939

点赞数

分类专栏： HTML+CSS 文章标签： css 列表边框属性

本文链接：https://blog.csdn.net/lxjstudyIT/article/details/52430464

版权

HTML+CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本篇，首先来介绍的是边框属性，内容比较多，还基本还是很简单的。
这里写图片描述

代码演示：

<html>
    <head>
        <title>CSS属性之边框</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width:50px;
                height:50px;
                background-color:#f60;
                float:left;
                margin-right:10px;
                border-width:3px;
                border-color:green blue yellow black;
            }
            .div1{
                border-right-style:solid;
            }
            .div2{
                border-left-style:dashed;
            }
            .div3{
                border-style:dotted;
            }
            .div4{
                border-style:double;
            }
            .div5,.div6,.div7,.div8{
                border-width:20px;
                width:40px;
                height:40px;
                borderground-color:green;
            }
            .div5{
                border-style:groove;
            }
            .div6{
                border-style:ridge;
            }
            .div7{
                border-style:inset;
            }
            .div8{
                border-style:outset;
            }
        </style>
    </head>
    <body>
        <div class="div1">solid</div>
        <div class="div2">dashed</div>
        <div class="div3">dotted</div>
        <div class="div4">double</div>
        <div class="div5">凸槽边框</div>
        <div class="div6">垄状边框</div>
        <div class="div7">inset</div>
        <div class="div8">outset</div>
    </body>
</html>

运行结果：
这里写图片描述

接下来是列表相关的属性，我们知道，html部分我们学过的有个有序列表标签和无序列表标签，但通过css的设置可以实现无序变有序，有序变无序。
这里写图片描述

代码演示（不完整）：

<html>
    <head>
        <title>CSS属性之列表</title>
        <meta charset="utf-8">
        <style type="text/css">
            ul{
                list-style-type:upper-alpha;
            }
            ol{
                list-style-type:disc;
            }
            ul.inside{
                list-style-position:inside;
            }
            ul.outside{
                list-style-position:outside;
            }
        </style>
    </head>
    <body>
        <p>无序列表无序列表无序列表无序列表无序列表无序列表inside</p>
        <ul class="inside">
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>
        <p>无序列表无序列表无序列表无序列表无序列表无序列表outside</p>
        <ul class="outside">
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>
        <p>有序列表有序列表有序列表有序列表有序列表有序列表</p>
        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
    </body>
</html>

运行结果：
这里写图片描述

Jacky-Summer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS属性之边框与列表

本篇，首先来介绍的是边框属性，内容比较多，还基本还是很简单的。代码演示：<html> <head> <title>CSS属性之边框</title> <meta charset="utf-8"> <style type="text/css"> div{ width:50px;
复制链接

扫一扫