当前位置： 首页 > news >正文

55.0/CSS 的应用(详细版)

news 2026/2/8 18:30:12

目录

55.1.1 设计边框样式

55.1.2 调整边框的粗细

55.1.3 边框颜色

55.1.4 复合设置边框

55.2 模块的边距

55.3 模块的内边距

55.4 层的应用

55.4.1 层的建立

55.4.2 浮动——float

55.4.3 清除浮动

55.4.4 层的定位

55.4.5 设置层的溢出——overflow

55.4.6 设置鼠标指针——cursor

55.4.7 小实例——给图片签名

55.5 盒子模型

55.1.1 设计边框样式

border-style 属性可以用来设置边框的样式。其取值说明见下表

 

border-style 是一个符合属性，可以取一到四个值：
  1.  取一个值表示四条边框都取这个值；
  2.  取两个值表示上下边框取第一个值，左右边框使用第二个值，两个值中
  3. 间用空格隔开。
  4.  取三个值或四个值，四条边框按照上、右、下、左的顺序调用取值（取
  5. 三个值时第四条边框与对面的边框取同一个值，也就是左和右都取第二
  6. 个值）。取值之间也要以空格隔开

<html>
<head>
<title>边框样式</title>
<style type="text/css">
.p1{border-style: solid;}
.p2{border-style: dashed double;}
.p3{border-style: double solid dashed;}
.p4{border-style: solid dotted dashed double;}
</style>
</head>
<body><p class="p1">这是第一个段落</p><p class="p2">这是第二个段落</p><p class="p3">这是第三个段落</p><p class="p4">这是第四个段落</p>
</body>
</html>
在浏览器中打开网页，效果如下：

 除了用 border-style 一起设置四条边框的边框样式外，还可以分别设置：

border-top-style 用来设置上边框样式
border-bottom-style 用来设置下边框样式
border-right-style 用来设置右边框样式
border-left-style 用来设置左边框样式上例中的 border-style: solid dotted dashed double; 等同于：
border-top-style: solid;
border-bottom-style: dashed;
border-right-style: dotted;
border-left-style: double;

55.1.2 调整边框的粗细

调整边框的粗细使用 border-width 属性，其取值通常为数字。和上节中所
讲的一样，可以用 border-width 统一设置四条边框的粗细，也可以使用
border-top-width 、 border-bottom-width 、 border-right-width 、 border-left-width 分
别设置。 
<html>
<head>
<title>边框粗细</title>
<style type="text/css">
.p1{border-style: solid;border-width: 1px;}
.p2{border-style: dashed double;border-top-width: 1px;border-right-width: 5px;border-bottom-width: 10px;border-left-width: 15px;}
</

相关文章：

55.0/CSS 的应用(详细版)

目录 55.1.1 设计边框样式 55.1.2 调整边框的粗细 55.1.3 边框颜色 55.1.4 复合设置边框 55.2 模块的边距 55.3 模块的内边距 55.4 层的应用 55.4.1 层的建立 55.4.2 浮动——float 55.4.3 清除浮动 55.4.4 层的定位 55.4.5 设置层的溢出——overflow 55.4.6 设置鼠…...

编程日记 2023/12/22 20:04:29

磁盘类型选择对阿里云RDS MySQL的性能影响

测试说明 这是一个云数据库性能测试系列&#xff0c;旨在通过简单标准的性能测试&#xff0c;帮助开发者、企业了解云数据库的性能&#xff0c;以选择适合的规格与类型。这个系列还包括&#xff1a; * 云数据库(RDS MySQL)性能深度测评与对比 * 阿里云RDS标准版(x86) vs 经济…...

编程日记 2023/12/22 20:03:28

数据结构---算法的时间复杂度

文章目录 前言计算机重要存储数据结构与算法数据结构概念算法 数据库概念 算法的复杂度时间复杂度概念为什么有时间复杂度大O渐进表示法时间复杂度实例实例1&#xff1a;时间复杂度&#xff1a;O&#xff08;N&#xff09;实例2&#xff1a;这里输入参数是不确定的所以 时间复杂…...

编程日记 2023/12/22 20:01:27

后缀为.vue是什么文件

.vue是一种文件格式&#xff0c;它是用于构建Web应用程序的前端框架Vue.js的组件文件 Vue.js是一个流行的JavaScript框架&#xff0c;用于构建用户界面 在Vue.js中&#xff0c;应用程序被组织为一组可重用的组件&#xff0c;而.vue文件就是用来定义这些组件的 一个.vue文件包…...

编程日记 2023/12/22 20:00:26

前端微信小程序AES加密解密踩坑

项目场景&#xff1a; 今天蛮沮丧的&#xff0c;在和别人对接的时候aes加解密的时候踩了坑。今天有个同事请假了&#xff0c;所以本来他和别人对接的活&#xff0c;老大给了我&#xff0c;然后我就正式踏上了战战兢兢的对接之路。 1.一开始的时候对面先是问用的啥加密方法。这…...

编程日记 2023/12/22 19:57:24

代码随想录算法训练营第五十八天| 739 每日温度 496 下一个更大元素 |

目录 739 每日温度 496 下一个更大元素 | 739 每日温度 求后面第一个比他大的元素的位置&#xff0c;单调栈如果递增 求后面第一个比他小的元素的位置&#xff0c;单调栈需要递减 class Solution { public:vector<int> dailyTemperatures(vector<int>& tempe…...

编程日记 2023/12/22 19:56:23

配置自定义RedisTemplate 解决redis序列化java8 LocalDateTime

目录 配置自定义RedisTemplate 引入依赖 配置连接redis 编写测试类 出现问题 配置序列化 解决redis序列化java8 LocalDateTime 问题背景 问题描述 问题分析 解决方案一&#xff08;全局&#xff09; 解决方案二&#xff08;单个字段&#xff09; 配置自定义RedisTe…...

编程日记 2023/12/22 19:55:22

华为---登录USG6000V防火墙---console、web、telnet、ssh方式登录

目录 一、环境搭建 二、第一次登录USG6000V防火墙&#xff0c;即通过console方式登录 三、用户配置 四、web登录USG6000V防火墙 1. 用web创建的用户通过web方式登录USG6000V防火墙 2. 命令行创建的用户通过web方式登录USG6000V防火墙 五、ssh方式登录USG6000V防火墙 1. 用…...

编程日记 2023/12/22 19:52:20

css图片属性，图片自适应

CSS 图片属性指南&#xff1a;background-size 和 object-fit 在前端开发中&#xff0c;使用图片是非常常见的。为了让图片在网页中显示得更好&#xff0c;CSS 提供了多种属性来调整和控制图片的大小和布局。其中&#xff0c;background-size 和 object-fit 是两个常用的属性&a…...

编程日记 2023/12/22 19:50:18

【Python百宝箱】数据科学的黄金三角：数据挖掘和聚类

数据之舞&#xff1a;Python数据科学库横扫全场 前言 在当今数据驱动的时代&#xff0c;Python成为数据科学家和分析师的首选工具之一。本文将介绍一系列强大的Python库&#xff0c;涵盖了数据处理、可视化、机器学习和自然语言处理等领域。无论你是初学者还是经验丰富的数据…...

编程日记 2023/12/22 19:47:15

【数据结构和算法】最大连续1的个数 III

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一&#xff1a;滑动窗口 2.2 滑动窗口解题模板 三、代码 3.1 方法一&#xff1a;滑动窗口 四、…...

编程日记 2023/12/22 19:45:13

AngularJS

理解实现代码的逻辑为主要&#xff0c;代码怎么写为次要。 参考资料&#xff1a; 《AngularJS入门与进阶》&#xff0c;江荣波著 前端开发常用框架 React&#xff1a;由Facebook开发&#xff0c;用于构建用户界面的JavaScript库&#xff0c;以组件化和虚拟DOM著称。 Angular&…...

编程日记 2023/12/22 19:44:12

初级数据结构（七）——二叉树

文中代码源文件已上传&#xff1a;数据结构源码 <-上一篇 初级数据结构&#xff08;六&#xff09;——堆 | NULL 下一篇-> 1、写在前面 二叉树的基本概念在《初级数据结构&#xff08;五&#xff09;——树和二叉树的概念》中已经介绍得足够详细了。上一…...

编程日记 2023/12/22 19:43:11

对比学习综述

1.简介 2.相关工作 2.1、Inst Disc 代理任务&#xff1a;个体判别。把每一个图片看作是一种类别&#xff0c;把每一个图片都区分开来。 正负样本选择&#xff1a;正样本是图片本身&#xff0c;负样本是数据集里的其他图片&#xff0c;该文章从memory bank中随机抽取4096个负…...

编程日记 2023/12/22 19:42:10

R语言【cli】——cli_warn可以更便捷的在控制台输出警告信息

Package cli version 3.6.2 cli_warn(message, ..., .envir parent.frame()) 参数【message】&#xff1a;它是通过调用 cli_bullets() 进行格式化的。进一步地&#xff0c;还需要调用 inline-makeup&#xff08;内联标记&#xff09;。 参数【...】&#xff1a;传递给 rlan…...

编程日记 2023/12/22 19:39:06

从零开始创建GPTs 人人都可以编写自己的ChatGPT产品

在这个人工智能迅猛发展的时代&#xff0c;GPT&#xff08;生成式预训练变换器&#xff09;已经成为一项令人兴奋的技术&#xff0c;它打开了创意和知识的新大门。无论你是一名编程新手、一位热爱探索的学生&#xff0c;还是对未来充满好奇的专业人士&#xff0c;GPTs都可以为你…...

编程日记 2023/12/22 19:37:04

人工智能对网络安全的影响

技术的快速发展带来了不断增长的威胁环境&#xff0c;网络犯罪分子和恶意行为者利用我们互联世界中的漏洞。在这个数字时代&#xff0c;数据泄露和网络攻击呈上升趋势&#xff0c;仅靠传统的安全措施已经不够了。人工智能 &#xff08;AI&#xff09; 的进步彻底改变了网络安全…...

编程日记 2023/12/22 19:35:02

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TextInput输入框组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之TextInput输入框组件 一、操作环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、TextInput 接口 TextInput(value?:{placeholder?: ResourceStr, tex…...

编程日记 2023/12/22 19:34:01

【C++入门到精通】互斥锁 (Mutex) C++11 [ C++入门 ]

阅读导航 引言一、Mutex的简介二、Mutex的种类1. std::mutex &#xff08;基本互斥锁&#xff09;2. std::recursive_mutex &#xff08;递归互斥锁&#xff09;3. std::timed_mutex &#xff08;限时等待互斥锁&#xff09;4. std::recursive_timed_mutex &#xff08;限时等待…...

编程日记 2023/12/22 19:29:57

安全狗云原生安全-云甲·云原生容器安全管理系统

随着云计算的快速发展&#xff0c;容器技术逐渐成为主流。然而&#xff0c;随着容器的普及&#xff0c;安全问题也日益突出。为了解决这一问题&#xff0c;安全狗推出了云原生容器安全管理系统——云甲。 云甲是安全狗云原生安全的重要组成部分&#xff0c;它采用了先进的云原生…...

编程日记 2023/12/22 19:25:54

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2026/2/2 18:33:19

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2026/2/6 11:08:25

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2026/2/5 5:03:25

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07

第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

编程新知 2026/1/31 20:22:32

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...

编程新知 2026/1/23 17:06:01