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

列表标识符\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>

效果如下：

CSS属性的继承性\color{pink}{CSS属性的继承性}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文本内容：小米小爱音响mini1699元 #dcc0997899人评价一个大容器里面包含两个小容器 --><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>

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

【从入门到入土系列】C语言制作小游戏-贪吃蛇：Copy+运行即可另附注释
系列文章本系列持续更新中,欢迎您的访问! 系列简介本系列由唐文疏撰写,负责记录博主的学习生涯中的一点一滴.独乐乐不如众乐乐,故此分享给大家.欢迎大家一起讨论.学习和批评指点. 博主只是一个普普通通 ...
R语言|for循环————R语言入门到入土系列(八)
R语言入门到入土系列 R语言作为数据科学的第一利器:本人介绍了一些R语言的基础入门知识,希望能帮到大家,往期系列文章点击下面文字直达
HTML+CSS从入门到入土
第一部分 1. 基础HTML 1.1 了解什么是HTML 1.2 编辑器 VS Code 1.2.1 下载方式: 1.2.2 设置 1.2.3 编辑器的基本使用(小小的快捷方式) 1.2.3.1 ct ...
html css表格样式模板_HTML amp; CSS 基础入门【4】列表及其样式
前面网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...
R语言|数据类型————R语言入门到入土系列(一)
本系列将从R语言的基本入门到R语言实战系列,逐步编写R语言的教程. R语言数据类型 R语言的赋值与输出 R语言的数据类型数据类型的查看数据类型的转换 R语言的赋值与输出 R语言赋值语法如下: 赋值 ...
CSS 从入门到放弃系列：CSS的引入方式
css的四种引入方式内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...
【ML从入门到入土系列01】概述
文章目录 1 ML基本概念 1.1 ML分类 1.2 基本术语 2 ML基本流程 3 ML算法 4 ML评估 4.1 评估方法 4.2 评估指标 1 ML基本概念如下图所示,ML 是计算机从数据中学 ...
【Python】pyqt6入门到入土系列，非常详细...
写在前面最近真的是运气不好,国庆前一天,隔壁小区有人中招了,结果国庆出不了门,好不容易国庆结束了,准备上班,结果小区又有个叼毛中招了,搞得我直接国庆放了半个月,还只能在家过,没事干只能这里写写,那里 ...
CSS 外补白(Margin) 内补白(Padding) 边框属性定位（positioning）属性布局(layout)属性
CSS 布局(Layout) Properties 属性 CSS Version 版本 Inherit From Parent 继承性 Description 简介 display CSS1/CSS2 ...

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

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

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

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

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

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

最新文章

热门文章