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 设置鼠标指针——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;}
</

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

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

相关文章

Linux开发工具——vim篇

vim开发工具的使用 文章目录 vim开发工具的使用认识vimvim常用三种模式vim正常模式命令集模式切换移动光标删除文字赋值替换撤销上一次操作更改跳到指定的行 vim末行模式命令集列出行号跳到文件中的某一行&#xff1a;保存文件离开vim查找字符&#xff1a; 总结题外话&#xff…

spring使用@Autowired @Lazy 注解 解决循环依赖

今天在启动项目时报错&#xff1a;org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name ‘colorController’: Unsatisfied dependency expressed through field ‘projectService’; nested exception is org.springframework.…

使用Dropzone提升开发效率的全方位指南

开发过程中&#xff0c;文件上传、图像处理、脚本执行等任务常常是不可或缺的环节。为了提升开发效率&#xff0c;开发者需要一个强大且灵活的工具。在这方面&#xff0c;Dropzone 是一个非常优秀的选择。本文将介绍如何在各种使用场景下&#xff0c;利用 Dropzone 工具来提高开…

【数据结构和算法】子数组最大平均数 I

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

异步编程Promise

文章目录 前言一、关于 Promise 的理解与使用1.相关知识补充区别实例对象和函数对象同步回调异步回调Js中的错误&#xff08;error&#xff09;和错误处理 2.promise是什么 二、Promise 原理三、Promise 封装 Ajax四、async 与 await总结 前言 在项目中&#xff0c;promise的使…

Easyrecovery2024手机版文件数据恢复软件

Easyrecovery是著名数据恢复厂商Kroll Ontrack推出文件的恢复软件&#xff0c;因病毒、误删、U盘故障等问题导致的word/excel/ppt/照片等文件丢失的情况&#xff0c;Easyrecovery能做到较高的恢复成功率&#xff01;Easyrecovery是全球著名数据恢复厂商Kroll Ontrack推出的文件…

.Net Attribute 什么是特性、预定义特性使用(一)

什么是特性&#xff1f; 特性&#xff08;Attribute&#xff09;是用于在运行时传递程序中各种元素&#xff08;比如类、方法、结构、枚举、组件等&#xff09;的行为信息的声明性标签。您可以通过使用特性向程序添加声明性信息。一个声明性标签是通过放置在它所应用的元素前面…

Git报错x509: certificate signed by unknown authority

下载报错&#xff1a; Error downloading object: model-00001-of-00008.safetensors (ed3ac49): Smudge error: Error downloading model-00001-of-00008.safetensors (ed3ac4983f682a999b0e4b6f072aad294c4fd9a7e968e90835ba5c4b466d3c7c): LFS: Get https://cdn-lfs.huggin…

【matlab】绘制横状单组渐变柱状图

% matlab绘制横状渐变柱状图 clear;clc;close all; x1:20; a[1 -1 2 -2 3 -3 4 -4 5 -5 6 -6 7 -7 8 -8 9 -9 10 -10]; close all; b0.8; figure barh(a,b,‘FaceColor’,‘none’) % 颜色包 cmap load(‘D:\matlab_work\函数名为colormore的颜色索引表制作\colormore_txt\colo…

Redis-网络模型

参考资料 &#xff1a;极客时间 Redis&#xff08;亚风&#xff09; 前置知识 系统隔离 为了避免⽤户应⽤导致冲突甚⾄内核崩溃&#xff0c;⽤户应⽤与内核是分离的&#xff1a; 进程的寻址空间会划分为两部分&#xff1a;内核空间、⽤户空间 • ⽤户空间只能执⾏受限的命令&…

Linux笔记---系统信息

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux学习 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 命令 1. uname - 显示系统信息 2. hostname - 显示或设置系统主机名 3. top - 显示系统资源使用情况 4. df - 显示磁盘空间使用情…

【2023 英特尔On技术创新大会直播 |我与英特尔的初次相遇】—— AIPC探索下一代的物联网时代

&#x1f308;个人主页: Aileen_0v0 &#x1f525;系列专栏:英特尔技术学习专栏 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 硅谷经济的发展与挑战 Intel开发者云与AI技术的应用 AI压缩技术的发展与应用 英特尔与阿里巴巴在AI领域的合作 AIPC时代的…

【已解决】解决Springboot项目访问本地图片等静态资源无法访问的问题

今天在开发一个招聘系统的时候&#xff0c;有投递简历功能&#xff0c;有投递就会有随之而来的查看简历对吧&#xff0c;我投递过的简历&#xff0c;另存为一个文件夹&#xff0c;就是说本地磁盘(或者服务器)有一个专门存放投递过的简历的文件夹&#xff0c;用于存放PDF&#x…

重新配置torch1.8 cuda11.1 torchtext0.9.0虚拟Pytorch开发环境

这里写目录标题 起因发现选择安装cuda 11.1核对下自己的显卡是否支持下载该版本的CUDACUDA下载地址CUDA安装过程 在anaconda中创建一个虚拟环境1.以下是环境的配置过程2.查看虚拟环境列表3.激活虚拟环境 安装torch和torchtext包的过程1.输入下面这句代码&#xff0c;就可以直接…

韩语中的一次多用-柯桥基础韩语学习

1.动词&#xff0c;写 일기를 쓰다 写日记 2.动词&#xff0c;戴&#xff08;帽子&#xff0c;眼镜&#xff0c;口罩&#xff09; 안경을 쓰다 戴眼镜 3.动词&#xff0c;使用&#xff08;材料&#xff0c;道具&#xff0c;手段&#xff09; 세제를 쓰다 使用洗剂 4.动词&am…

大创项目推荐 深度学习 大数据 股票预测系统 - python lstm

文章目录 0 前言1 课题意义1.1 股票预测主流方法 2 什么是LSTM2.1 循环神经网络2.1 LSTM诞生 2 如何用LSTM做股票预测2.1 算法构建流程2.2 部分代码 3 实现效果3.1 数据3.2 预测结果项目运行展示开发环境数据获取 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天…

Ethernet/IP 之IO 连接简要记录

IO连接 EIP的IO连接提供了在一个生产者和多个消费者之间的特定的通信路径&#xff0c;以达到IO数据在IO连接下传输。 生产者对象产生IO数据通过生产者IO连接管理者对象将连接ID和数据组帧发送给消费者IO连接管理者对象然后将IO数据发送给消费者对象。 显示消息连接 显式消息传…

《信息安全工程师教材》-蒋建春、信息安全完全参考手册-Mark Rhodes Ousley、CISSP官方学习指南第九版、ISO27002学习

文章目录 介绍关系学习顺序重复内容学习方法建议学习时间可能重合的部分更详细的学习计划 介绍 《信息安全工程师教材》- 蒋建春&#xff1a;这本教材可能是针对中国地区信息安全工程师的认证考试而编写的&#xff0c;它可能会涵盖信息安全的基本概念、技术和政策&#xff0c;特…

【点选验证码识别】某招标网站反爬虫分析与验证码自动识别

文章目录 1. 写在前面2. 风控描述3. 验证码裁剪4. 验证码识别 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感兴趣…

winlator模拟器汉化版是款功能非常强大的安卓游戏模拟器。

winlator模拟器 可以支持玩家在手机上运行各种经典游戏&#xff0c;拥有强大的兼容性&#xff0c;不同芯片、系统和手机都可以完美的运行。进入软件后&#xff0c;可以对显卡配置等进行改变&#xff0c;有利于帮助运行较新的游戏&#xff0c;同时也能够跳过配置检查。相比于其…