如何给页面添加虚线
如何 添加 页面 虚线
2023-09-14 09:13:39 时间
很多写代码的新手,在做一些简单项目的时候,总会遇到页面有虚线的存在,那么虚线应该怎么添加?
这是一个令人头疼的问题,当然,这个问题博主也头疼过。对于只是掌握html和css的初学者,针对这一问题,其实也是有比较简单的解决办法。下面我就来讲一讲,相信大家都能学会。
首先我们想一想,哪一板块学习过线?
- 下划线,删除线。这是对于文本来说,属于文本属性。如果单纯在页面上做一条虚线,这个角度肯定是不行的。
- <hr>标签,大家都知道,这是一个单标签,是一条实线。我们只需要添加一些属性,就可以改变显示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#xuxian{
border:1px dashed #000;
}
</style>
</head>
<body>
<hr id="xuxian">
</body>
</html>
3.还有一个办法,我们可以设置一个空div,对空div进行操作。
我们知道<div></div>标签是块级元素,设置宽高,以及背景颜色,它就会显示出一个方框。
但如果,我们将这个空div的高设置成0px,会怎么样呢?
没错,将高设置为0px,之后,也就意味着这个方框的上下两条线重合了,左右两条线因为高度是0,所以变成了一个点,这样就变成一条线了。再设置这个div的border属性,也就是边框属性进而改变成虚线。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .xuxian { border-top-style: dashed; border-top-width: 1px; border-top-color: rgba(221, 73, 0, 1.0); height: 0px; /* width:自己调整 */ } </style> </head> <body> <div class="xuxian"></div> </body> </html>
效果:
说明一下: 实线solid
虚线dashed
点线dotted
相关文章
- 如何在eclipse中添加android ADT
- 如何在win10系统的电脑中添加桌面办公提醒小工具?
- 如何创建一个每日计划清单来安排你的一天?
- 如何快速的给你的项目添加icon图标
- JAVA Eclipse中如何简易的实现消息机制
- Win7如何自定义鼠标右键菜单 添加新建WORD文档
- Sharpdevelop如何在项目中添加类文件
- WIN7如何替换开机登录画面
- 云端软件平台 如何为自制的软件添加说明文档的快捷方式
- Discuz常见小问题-如何人为地添加用户并分配小组
- H5中https://j.map.baidu.com/e7/M6hJ的地址是如何生成的
- 如何在 C#中添加 dll 文件
- 如何在列表操作列区域添加按钮及控制已有按钮显示
- android UI中添加一张图片如何将这张图片中某一部分设为透明的
- 129. 如何给 SAP UI5 SmartField 添加 Value Help 功能
- 使用apache的HttpClient进行http通讯,隐藏的HTTP请求头部字段是如何自动被添加的
- 如何使用Windows10自带的photo应用给视频添加字幕
- 如何把新建的UI component添加到新的workcenter里
- 用友软件系统管理员账号admin密码忘记了,如何解决?
- 如何处理使用 SAP UI5 消费真实的 OData 服务时遇到的跨域问题
- 如何修复损坏数据库中的数据表
- Linux IPTables:如何添加防火墙规则
- 在Win10中、如何把常用的应用添加到高效工作窗口呢?
- 如何设置Win11弹出外置硬盘
- 23. 如何给 SAP ABAP SEGW 开发的 OData 服务添加 Access-Control-Allow-Origin 响应头
- 【大数据开发运维解决方案】通过降低term在文档出现频率的权重案例教你Solr/Elasticsearch如何自定义Similarity