【CSS学习笔记五】列表和表格

2024-05-26 01:18:56

一.列表

使用CSS，主要是可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记

使用list-style-type属性指定列表项标记的类型

参考值：

disc：默认，实心圆
circle：空心圆
square：实心方块
decimal：数字
upper-roman：大写罗马数字(I, II, III, IV, V等)
lower-roman：小写罗马数字(i, ii, iii, iv, v等)
upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E等)
lower-alpha：小写英文字母The marker is upper-alpha (a, b, c, d, e等)

图像作为列表项标记

使用list-style-image属性指定列表项标记的图像
语法：

ul
{list-style-image: url('图片路径');
}

简写

使用list-style属性
按照

list-style-type
list-style-position (属性指示如何相对于对象的内容绘制列表项标记,参考值有：inside outside)
list-style-image

的顺序填写

实例：

<!DOCTYPE html>
<html><head><style>ul.sai{list-style:square url('sai.jpg');}ul.circle{list-style:circle;}ol.upper-roman{list-style:upper-roman inside;}ol.upper-alpha{list-style:upper-alpha outside;}</style><meta charset = "utf-8"/><title>列表</title></head><body><ul class = "sai"><li>可乐</li><li>雪碧</li><li>芬达</li></ul><ul class = "circle"><li>可乐</li><li>雪碧</li><li>芬达</li></ul><ol class = "upper-alpha"><li>可乐</li><li>雪碧</li><li>芬达</li></ol><ol class = "upper-roman"><li>可乐</li><li>雪碧</li><li>芬达</li></ol></body>
</html>

结果：

二.表格

1.表格边框

指定CSS表格边框，使用border属性。
宽度和高度也是由width和height设置
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table,th,td
{border:5px solid red;border-collapse:collapse;height:50px;width:20%;
}

2.文字对齐

与文本设置一样
text-align属性设置水平对齐方式
同理，
背景background属性设置，
填充padding
字体颜色color

table
{color:blue;text-align:center;
}
td
{padding:15px;
}

实例：

<!DOCTYPE html>
<html><head><style>table,th,td{border:5px solid red;border-collapse:collapse;background:yellow;width:20%;height:50px;text-align:center;}th{color:blue;}td{padding:15px;}</style><meta charset = "utf-8"/><title>表格</title></head><body><table><tr><th>主食</th><th>饮料</th></tr><tr><td>汉堡</td><td>可乐</td></tr><tr><td>薯条</td><td>芬达</td></tr></table></body>
</html>

结果：

【CSS学习笔记五】列表和表格相关推荐

HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
css学习笔记 day two
CSS学习笔记 Day two 13.3 css边框属性属性: 边框样式:border-style:solid/double/groove/ridge/insert/outset; 说明:第一个表示 ...
python函数是一段具有特定功能的语句组_Python学习笔记(五)函数和代码复用
本文将为您描述Python学习笔记(五)函数和代码复用,具体完成步骤: 函数能提高应用的模块性,和代码的重复利用率.在很多高级语言中,都可以使用函数实现多种功能.在之前的学习中,相信你已经知道Pyth ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
ROS学习笔记五：理解ROS topics
ROS学习笔记五:理解ROS topics 本节主要介绍ROS topics并且使用rostopic和rqt_plot命令行工具. 例子展示 roscore 首先运行roscore系列服务,这是使用R ...
Python学习笔记五：控制语句
Python学习笔记五:控制语句 Pycharm 开发环境的下载安装配置_项目管理控制语句 Pycharm 开发环境的使用 Pycharm 下载和安装激活和选择不同UI 风格创建项目和初始化配置 ...

最新文章

热门文章