html如何修改hr水平直线的粗细
hr是常见的超文本标签,是一条水平直线,要设置该直线变粗一些。可以先把hr本身的border隐藏掉,然后设置border-top-width,也就是只留上边框,如图:hr的默认高度height是0,所以不会显示矩形边框,实际hr是有边框的,而且是上下左右四个边框值为1的,可以在浏览器里查看下默认hr的各种边距和边框,但height设置高之后,就可以看出hr本身的带的矩形边框。
必须要把hr本身的border设置为none,因为hr默认是有个四边为1的边框的,去掉其他个边框,然后设置只对上边框进行设置。
hr一般用于水平直线,所以不需要给hr加这种矩形边框,可以只设置上边框,上边框是一个真正的一条线,然后设置上边框的宽度(粗细),就可以设置粗一些的水平直线。
代码:border:none;border-top:30px solid #00ff00;
上面这个代码是简写形式,border-top后面跟的是三个参数分别写:
分别写代码:border:none;border-top-width:30px;border-top-style:solid;border-top-color:#00ff00;
测试代码:
<div id="d1">
<p style="margin:0;"> (1)</p><!--默认height是0-->
<hr style="border-color:#0000ff;" > <p style="margin:0;"> (2)</p><!--高度不为0,显示出边框-->
<hr style="height:5px;border-color:#0000ff;"/> <p style="margin:0;"> (3)</p><!--不显示边框,设置上边框30px 实线 颜色-->
<hr style="border:none;border-top:30px solid #00ff00;" /> <p style="margin:0;"> (4)</p><!--同(3),分开写模式-->
<hr style="border:none;border-top-width:30px;border-top-style:solid;border-top-color:#00ff00;" /> -----------------------------------------------------------------------------------------------------
<p style="margin:0;"> (5)错误</p><!--没把border设置为none-->
<hr style="border-top:30px solid #00ff00;" /> <p style="margin:0;"> (6)错误</p><!--错误写法的1,设置border-style而不是border-top-style-->
<hr style="border:none;border-top-width:30px;border-style:solid;border-top-color:#00ff00;" />
</div>
图示:
如图:
默认hr的默认样式:上边距margin 8px,下边距margin 8px,左右无margin,上下左右border都为1px,高为0.
给默认hr加了height:5px的样式:其余同上,高度变为5px(由于高度改变,四周的1px的边框都显现出来)
设置单上边线并加粗的样式:margin和高同默认,左右和下边无边框,上边框为 30px。
html如何修改hr水平直线的粗细的更多相关文章
- <hr> 水平样式分隔线
<hr> 水平样式分隔线 <html> <body> <p>hr 标签定义水平线:</p> <hr /> <p>这 ...
- 你不知道的Node.js性能优化,读了之后水平直线上升
本文由云+社区发表 "当我第一次知道要这篇文章的时候,其实我是拒绝的,因为我觉得,你不能叫我写马上就写,我要有干货才行,写一些老生常谈的然后加上好多特技,那个 Node.js 性能啊好像 D ...
- 【非lodop的】JS和html相关博文索引
JS: eval()方法:JS-JAVASCRIPT的eval()方法. Date()对象.getFullYear() 方法.getDate()方法.console.dir()方法:LODOP打印用J ...
- html_js_jq_css
// ----- JQ $(function(){$(div').bind('mouseout mouseover', function () {// 移入和移出分别执行一次alert('bind 可 ...
- <hr />标签的颜色和粗细设定
设置<hr />的颜色和粗细,不需要用到style,直接用标签的color和size属性: <hr color="red" size="0.5" ...
- Android 设置EditText光标Curso颜色及粗细
在android的输入框里,如果要修改光标的颜色及粗细步骤如下两步即可搞定: 1.在资源文件drawable下新建一个光标控制color_cursor.xml <?xml version=&qu ...
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- OpenCV-Python教程(9、使用霍夫变换检测直线)
相比C++而言,Python适合做原型.本系列的文章介绍如何在Python中用OpenCV图形库,以及与C++调用相应OpenCV函数的不同之处.这篇文章介绍在Python中使用OpenCV的霍夫变换 ...
- LODOP直线px转换mm变斜线
LODOP中打印项顶边距左边距,宽高,可以选择的单位很多,详细可在LODOP官网下载参考LODOP技术手册. 关于LODOP打印直线和虚线,可查看本博客相关博文:Lodop如何打印直线.Lodop打印 ...
随机推荐
- ES 基础理论 配置调优
一.简介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为 ...
- DBA 有哪些工作
首先,我们看看DBA的工作有哪些?DBA的工作实际上都是围绕数据库展开,包含但不限于这些工作: 1. 数据库.主机.操作系统.交换机.存储选型,预算,架构设计,部署,参数优化: 2. 数据库备份.恢复 ...
- mage Ansible学习2 Playbook
一.上集回顾 1.运维: 手动 --> 标准化 --> 工具化 --> 自动化 --> 智能化 2.工具化 OS Install:PXE ,Cobbler:Virutaliza ...
- windows错误代码摘录
Windows API 错误代码定义在winerror.h里,当我们得到一个Error Code不知其意时,可以查阅这个文件 这里定义了绝大部分的错误,摘录翻译如下 [0]-操作成功完成. [1]-功 ...
- zeebe 集成elasticsearch exporter && 添加operate
zeebe 的operate是一个功能比较强大的管理工具,比simple-monitor 有好多方面上的改进 安全,支持用户账户的登陆 界面更友好,界面比较符合开团队工作流引擎的界面 系统监控更加强大 ...
- 0915 N校联考
树上路径(phantasm) 题目背景 Akari是一个普通的初中生. 题目描述 Akari的学校的校门前生长着一排n棵树,从西向东依次编号为1∼n.相邻两棵树间的距离都是1.Akari上课的教学楼恰 ...
- 1、ES6声明变量的方式
1.es5的声明方式var的问题 1)是var在同一个作用域内部,是可以重复声明一个变量的,后面的会把前面的覆盖掉 2)var存在变量提升到的问题,就是在使用var声明变量前是可以先使用此变量的 2. ...
- 数据库blob图片文件,多图片打包下载
数据库存储blob图片文件,前端打包下载 数据库图片文件实体类 package com.cmrh.mspserver.pos.dto; import java.io.Serializable; imp ...
- BS4库详解
from bs4 import BeautifulSoup html = """ <html><head><title>This is ...
- 2018-2019 20165226 Exp9 Web安全基础
2018-2019 20165226 Exp9 Web安全基础 目录 一.实验内容说明及基础问题回答 二.实验过程 Webgoat准备 XSS攻击 ① Phishing with XSS 跨站脚本钓鱼 ...