HTML--CSS--边框、列表、表格样式

边框样式

属性:

border-width 边框宽度
border-style 边框外观
border-color 边框颜色
需要同时设定三个属性

border-width 边框宽度

取值为像素值

border-style 边框样式

none 无样式
dashed 虚线
solid 实线

border-color 边框颜色

如示例:
div设定了一个边框,虚线,宽度10像素,颜色是红色

<!DOCTYPE html>
<html>
<head> <title>表单</title><meta charset="utf-8"/><style type="text/css"></style>
</head>
<body><div style="border-style: dashed; border-width: 10px; border-color: red;"><p style="text-transform: uppercase;"> my room Case</p><p style="text-transform: lowercase;"> MY ROOOM Case</p><p style="text-transform: capitalize;"> my room case</p></div>
</body>
</html>

效果:
在这里插入图片描述
另一写法:简写,将配置都写进border里,效果是一样的

style="border: dashed 10px red;"

局部样式 单独设定上下左右边框线,属性一致

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

如下例子:

<!DOCTYPE html>
<html>
<head> <title>表单</title><meta charset="utf-8"/><style type="text/css">div{border-top: dashed 10px red;border-bottom: solid 20px yellow;border-left: solid 15px blue;border-right-color: green;border-right-width: 2px;border-right-style: dashed;}</style>
</head>
<body><div ><p style="text-transform: uppercase;"> my room Case</p><p style="text-transform: lowercase;"> MY ROOOM Case</p><p style="text-transform: capitalize;"> my room case</p></div>
</body>
</html>

效果:
在这里插入图片描述
PS:假如设定边框宽度为0px,则去除掉了边框

列表样式 list-style-type

之前提过列表分为有序列表 ol 和无序列表 ul
参考:HTML–列表
这里的列表样式就是针对这两种列表的

用法 list-style-type:取值;

有序列表属性:

decimal 阿拉伯数字(默认值)
lower-roman 小写罗马数字: i,ii,iii…
upper-roman 大写罗马数字:I,II,III,IV…
lower-alpha 小写英文单词:a,b,c…
upper-alpha 大写英文单词:A,B,C…

无序列表属性:

disc 实心圆(默认)
circle 空心圆
square 正方形

由此可见,其实跟HTML中列表参数基本一致,参数不太一样而已

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>ol,ul{list-style-type: none;}</style>
</head>
<body><ol type="a"><li>列表1</li><li>列表2</li><li>列表3</li></ol>
</body>
</html>

效果:
可以看到list-style-type优先级比ol的type属性优先级更高,即使我定义了列表序号,但是使用list-style-type可以去除掉,或者重新定义成新的样式
在这里插入图片描述

列表项图片 list-style-image

作用:使用图片代替列表项的序列号

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style>ol,ul{list-style-image: url(x.gif);}</style>
</head>
<body><ol type="a"><li>列表1</li><li>列表2</li><li>列表3</li></ol>
</body>
</html>

这里定义x.gif为列表序列号,效果:
在这里插入图片描述

表格样式

表格标题位置 caption-side

用法:
caption-side:取值;
属性:

top 标题在顶部(默认值)
bottom 标题在底部

参考之前的文章: HTML–表格

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style type="text/css">table,tr,td{border: 2px solid silver;}table{caption-side: bottom;}</style>
</head>
<body><table><caption>这是表格的标题</caption><tr><td>姓名</td><td>性别</td></tr><tr><td>小黑</td><td></td></tr><tr><td>小白</td><td>不详</td></tr></table></body>
</html>

效果:
在这里插入图片描述

表格边框合并 border-collapse

属性:

separate 边框分开,有空隙(默认值)
collapse 边框合并,无空隙
用法:
table{border-collapse: collapse;}

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style type="text/css">table,tr,td{border: 2px solid silver;}table{caption-side: bottom;}table{border-collapse: collapse;}</style>
</head>
<body><table><caption>这是表格的标题</caption><tr><td>姓名</td><td>性别</td></tr><tr><td>小黑</td><td></td></tr><tr><td>小白</td><td>不详</td></tr></table></body>
</html>

效果:
在这里插入图片描述

表格边框间距 border-spacing(注意这个需要边框是分开的才能生效)

用法:
border-spacing:像素值;

<!DOCTYPE html>
<html>
<head> <title>这是一个标题</title><meta charset="utf-8"/><style type="text/css">table,tr,td{border: 2px solid silver;}table{caption-side: bottom;}table{border-collapse: separate;border-spacing: 10px;}</style>
</head>
<body><table><caption>这是表格的标题</caption><tr><td>姓名</td><td>性别</td></tr><tr><td>小黑</td><td></td></tr><tr><td>小白</td><td>不详</td></tr></table>
</body>
</html>

效果:
在这里插入图片描述

三级标题

四级标题
五级标题
六级标题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/239538.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言中关于指针的理解及用法

关于指针意思的参考&#xff1a;https://baike.baidu.com/item/%e6%8c%87%e9%92%88/2878304 指针 指针变量 地址 野指针 野指针就是指针指向的位置是不可知的&#xff08;随机的&#xff0c;不正确的&#xff0c;没有明确限制的&#xff09; 以下是导致野指针的原因 1.指针…

JAVA毕业设计122—基于Java+Springboot+Vue的摄影跟拍预订管理系统(源代码+数据库+万字论文+PPT)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootVue的摄影跟拍预订管理系统(源代码数据库万字论文PPT)122 一、系统介绍 本项目前后端分离&#xff0c;本系统分为管理员、用户、摄影师三种角色 1、用户&#…

k8s的存储卷(数据卷)

1、存储卷&#xff1a;容器内的目录和宿主机的目录进行挂载 2、容器在系统上的生命周期是短暂的&#xff0c;delete&#xff0c;k8s用控制器创建的pod&#xff0c;delete相当于重启&#xff0c;容器的状态也会恢复到初始状态&#xff0c;一旦回到初始状态&#xff0c;所有的后…

时间序列数据的季节性检测

时间序列分析是统计学和数据科学的一个基本研究领域&#xff0c;它为理解和预测序列数据中的模式提供了一个强大的框架。特别是时间序列数据&#xff0c;它捕获连续时间间隔内的信息&#xff0c;使分析师能够揭示趋势&#xff0c;季节性模式和其他时间依赖性。在时间序列分析的…

css深度选择器 /deep/

一、/deep/的含义和使用 /deep/ 是一种 CSS 深度选择器&#xff0c;也被称为深度组合器或者阴影穿透组合器&#xff0c;主要用在 Web 组件样式封装中。 在 Vue.js 或者 Angular 中&#xff0c;使用了样式封装技术使得组件的样式不会影响到全局&#xff0c;也就是说组件内部的…

远程访问及控制

文章目录 远程访问及控制一、SSH远程管理1、SSH&#xff08;Secure Shell&#xff09;协议定义2、SSH的优点3、OpenSSHell 二、配置OpenSSH服务端1、sshd_config配置文件的常用选项2、sshd服务支持的两种验证方式2.1 密码验证2.2 秘钥对验证 三、SSH客户端程序的使用1、基本用法…

数据结构(三)堆和哈希表

目录 哈希表和堆什么是哈希表 &#xff1f;什么是堆 &#xff1f;什么是图 &#xff1f;案例一&#xff1a;使用python实现最小堆案例二 &#xff1a; 如何用Python通过哈希表的方式完成商品库存管理闯关题 &#xff08;包含案例三&#xff1a;python实现哈希表&#xff09; 本…

鸿鹄电子招投标系统源码实现与立项流程:基于Spring Boot、Mybatis、Redis和Layui的企业电子招采平台

随着企业的快速发展&#xff0c;招采管理逐渐成为企业运营中的重要环节。为了满足公司对内部招采管理提升的要求&#xff0c;建立一个公平、公开、公正的采购环境至关重要。在这个背景下&#xff0c;我们开发了一款电子招标采购软件&#xff0c;以最大限度地控制采购成本&#…

canvas创建图像数据,并在画布上展示

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

简单整理FFmpeg相关命令集

FFmpeg相关命令集 简单整理了FFmpeg相关命令&#xff0c;主要包括ffplay播放控制和媒体播放命令、ffmpeg命令相关参数以及常用的提取音视频等命令。 &#x1f3a1;导航小助手&#x1f3a1; FFmpeg相关命令集1.ffmpeg命令分类查询2.ffplay命令2.1 ffplay播放控制2.2 ffplay命令…

【J-Flash基本使用总结】

【J-Flash基本使用总结】 VX&#xff1a;hao541022348 ■ 烧录文件■ 创建新的工程■ 烧录模式-SWD模式■ J-Flash下载程序到单片机 ■ J-Flash拼接多个hex或bin文件■ J-Flash读单片机的option byte■ J-Flash读单片机Flash数据■ 将读出来的文件用jflash烧录到其他的芯片■ 设…

【C++ 程序设计入门基础】- 第4节-函数

1、函数 函数是对实现某一功能的代码的模块化封装。 函数的定义&#xff1a; 标准函数&#xff1a; 输入 n 对整数的 a、b &#xff0c;输出它们的和。 #include <iostream> #include <windows.h> using namespace std;int add(int a,int b);//函数原型声明int…

Python数据分析案例34——IMDB电影评论情感分析(Transformer)

电影评论的情感分析 案例背景 很多同学对电影系列的数据都比较喜欢&#xff0c;那我就补充一下这个最经典的文本分类数据集&#xff0c;电影情感评论分析。用神经网络做。对国外的英文评论文本进行分类&#xff0c;看是正面还是负面情感。 数据集介绍 数据集&#xff1a;IMDb…

java每日一题——ATM系统编写(答案及编程思路)

前言&#xff1a; 基础语句学完&#xff0c;也可以编写一些像样的程序了&#xff0c;现在要做的是多加练习&#xff0c;巩固下知识点&#xff0c;打好基础&#xff0c;daydayup! 题目&#xff1a;模仿银行ATM系统&#xff0c;可以创建用户&#xff0c;存钱&#xff0c;转账&…

VMware workstation安装debian-12.1.0虚拟机(最小化安装)并配置网络

VMware workstation安装debian-12.1.0虚拟机&#xff08;最小化安装&#xff09;并配置网络 Debian 是一个完全自由的操作系统&#xff01;Debian 有一个由普罗大众组成的社区&#xff01;该文档适用于在VMware workstation平台安装最小化安装debian-12.1.0虚拟机。 1.安装准…

索引和视图

索引和视图 一、实验目的 学会使用SQL语句CREATE INDEX创建索引。学会使用SQL语句DROP INDEX删除索引。学会使用SQL语句CREATE VIEW创建视图的用法。掌握使用SQL语句ALTER VIEW修改视图的方法。了解删除视图的SQL语句DROP VIEW的用法。 二、实验内容SQL语句CREATE INDEX创建索…

谷粒商城-缓存使用分布式锁SpringCache(5天)

缓存使用 1.1.1 哪些数据适合放入缓存 即时性、 数据一致性要求不高的 访问量大且更新频率不高的数据&#xff08;读多&#xff0c; 写少&#xff09; 例如&#xff1a;电商类应用&#xff0c; 商品分类&#xff0c; 商品列表等适合缓存 本地缓存 使用Map进行本地缓存 本地缓存…

基于JavaWeb+BS架构+SpringBoot+Vue智慧党建系统设计与实现

基于JavaWebBS架构SpringBootVue智慧党建系统设计与实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 1 概 述 1 1.1 课题研究背景 1 1.2 课题研究意义 1 1.3 课题研究内容 2 2 系统开…

MySQL 基于 GTID 主从复制

GTID 定义 GTID 是 MySQL 事务标识&#xff0c;为每一个提交的事务都生成一个标识&#xff0c;并且是全局唯一的&#xff0c;这个特性是从 MySQL5.6 引进的。 组成 GTID 是由 UUID TID&#xff0c;UUID 是MySQL的唯一标识&#xff0c;每个MySQL实例之间都是不同的。TID是代表…

速度之巅-位图算法

1:简单通俗来讲就是速度非常之快 以字节为单位,用一位一位寻找 #include <iostream> using namespace std; //加载数据 //就是将能被3整除的位设置为:1 void init(char* data, int len) {unsigned int n len * 8;for (unsigned i 0; i < n; i){if (i%30){//判断能被…