【CSS从入门到入土系列】—— 列表边框属性专题

最新推荐文章于 2024-08-24 17:18:32 发布

Bow.贾斯汀

最新推荐文章于 2024-08-24 17:18:32 发布

阅读量1.2k

点赞数 2

分类专栏： HTML与CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_61323055/article/details/122822280

版权

HTML与CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中关于列表的样式控制，包括修改默认列表标识符、设置列表标识符为图片、调整标识符位置、去除标识符等操作，并展示了不同列表类型。同时，讲解了容器边框的设置，如边框大小、线型、颜色以及如何为四个边框单独设置样式。此外，提到了CSS属性的继承性，强调了边框属性不具备继承性。文章还提供了实战代码示例，帮助读者更好地理解和应用这些CSS属性。

摘要由CSDN通过智能技术生成

$\color{pink}{列表标识符}$

（1）修改默认列表标识符

list-style-type

circle 空心圆 square 实心方块
disc 默认 decimal 数字

    <style>
        .box{
            list-style-type:decimal;
        }
    </style>
    
    <ul class = "box">
        <li>测试行一</li>
        <li>测试行二</li>
        <li>测试行三</li>
        <li>测试行四</li>
    </ul>

（2）将列表标识符设置为图片

list-style-image:url();

url 中填图片的地址
图片不能过大

（3）修改列表标识符的位置

list-style-position

当我们为列表设置背景颜色时，会发现默认情况下列表标识符是不在背景中的。
通过这个属性可以改变标识符的位置：list-style-position:inside

（4）修改标识符最常用的操作

在开发中，最常用的操作是去掉列表标识符。
常用操作有一下两种：

list-style:none;
list-style-type:none;

（5）补充：列表的种类

列表分为有序列表、无序列表、自定义列表三种

有序列表通过 ol 标签包含 li 标签来实现
无序列表通过 ul 标签包含 li 标签来实现
自定义列表通过 dl 标签包含 dt 标签和 dd 标签来实现

$\color{pink}{容器边框}$

（1）设置容器边框

border

有三个属性值，分别代表大小（以像素为单位）、线型、颜色【无序】
线型分为以下几种：

solid 直线 dashed 虚线
dotted 点状线 double 双行线

颜色的表示方法：RGB/六位十六进制数/代表颜色的单词

（2）为四个边框单独设置样式

border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框

属性值的设置方法相同
参考代码

<style>
		.box1{
            /*设置容器大小*/
            height:60px;
            width:60px;
            /*直接设置四个边框*/
            border: 2px solid rgb(125,125,125);
        }
        .box2{
            /*设置容器大小*/
            height:60px;
            width:60px;
            /*单独设置四个方向的边框*/
            border-top: 4px solid rgb(70, 100, 88);
            border-bottom: 4px dashed #000;
            border-left: 4px dotted #123456;
            border-right: 4px double rgb(192,185,93);
        }
</style>
<body>
	<div class="box1"></div>
    <br>
    <div class="box2"></div>
</body>

效果如下：

$\color{pink}{CSS属性的继承性}$

父元素添加的属性会被子元素继承
如果想为多个子元素设置相同的属性，可以将属性添加给父元素
border（边框）属性不具有继承性
一般 text、line、font 开头的属性都可以被继承

在这里插入图片描述

$\color{green}{专题练习}$

此处只提供练习题和代码
练习题一：
练习题二：
练习题三：

附属图片

请添加图片描述

参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性练习测试</title>
    <style>
        .test1{
            width:240px;
            height:60px;
            line-height:60px;
            border:4px solid #d1b886;
            text-align:center;
            color:#d1b886;
            font-size:22px;
        }

        .test2 li{
            /*此处使用的是后代选择器*/
            list-style-type:circle;
        }
        .list li:hover{
            color:#d1b886;    
        }
        .hot{
            color:red;
            font-size:12px;
            font-weight:bold;
        }

        /* 去掉图片下方间距 */
        img{
            vertical-align:middle;
        }
        .div{
            width:319px;
            height:411px;
            background-color: #fafafa;
            text-align: center;
        }
        .div01{
            /* 默认与父元素同宽 */
            background-color:#FE4A3C;
            height:33px;
            line-height:33px;
            color:#fff;
        }
        .title{
            font-weight: normal;
        }
    </style>
</head>
<body>
    
    <!--需求分析-->
    <!--
        文本内容：6GB + 64GB
        文本颜色：滴管工具吸取
        文本大小：矩形框选工具
        文本位置：水平居中，垂直居中
        边框样式：直线 滴管工具吸取 矩形框选工具
    -->

    <div class = "test1">      
            6GB + 64GB
    </div>

    <!--需求分析-->
    <!-- div容器
    无序列表
    标识符替换为空心圆圈
    总共有10条，第六条文本设置单独样式
    颜色滴管工具
    文本大小：矩形框选工具 27px

    手机 平板hot
    视频 零食
    家电 通讯hot
    笔记本电脑
    家具
    家用电器 【设置单独样式 #e0c071】
    大牌合作hot
    手机充值
    大减价
    奢侈品 -->
    <!-- 补充部分：
        (1)没有为hot设置单独的样式，此处三个hot的样式是相同的，
        可以设置相同的类名。 
        (2)文本橘色是鼠标移入效果-->
    <div class="test2">
        <ul>
            <li>手机 平板<span class="hot">hot</span></li>
            <li>视频 零食</li>
            <li>家电 通讯<span class="hot">hot</span></li>
            <li>笔记本电脑</li>
            <li>家具</li>
            <li>家用电器</li>
            <li>大牌合作<span class="hot">hot</span></li>
            <li>手机充值</li>
            <li>大减价</li>
            <li>奢侈品</li>
        </ul>
    </div>

    <!-- 需求分析 -->
    <!-- 上边颜色：#FE4A3C
    文本内容：小米小爱音响mini
    1699元 #dcc099
    7899人评价

    一个大容器里面包含两个小容器 -->

    <div class="div">
        <div class="div01">
            减200元
        </div>
        <div class="div02">
            <img src="../img/photography .png" alt="图片加载失败">
        </div>    
       
        <h3 class="title">小米小爱音响mini</h3>
        <p><span style = "color:#dcc099">1699元</span></p>
        <p><span style="color:#707078">7899人评价</p>
           

        
    </div>
</body>
</html>