您现在的位置是: 首页 » 网页代码 » 如何使用CSS更改hr标签的厚度?
网页代码

如何使用CSS更改hr标签的厚度?

网站优化小编十一月 23, 2019 14人已围观

如何使用CSS更改hr标签的厚度?下面本篇文章就来给大家介绍一下使用CSS更改hr标签的厚度的方法,希望对大家有所帮助。

网站运营中栏目排名优化技巧

HTML <hr> 标签在 HTML 页面中创建一条水平线;水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

<hr> 标签的厚度可以使用CSS中的height属性设置;最小高度可以是1px,因为可用的最小单位是1像素。也可以使用CSS属性来设置<hr> 标签的样式以使hr标签在外观上更加美观。

示例1:使用CSS height属性来设置<hr> 标签的厚度

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
		div { 
            width: 300px; 
        } 
          
        h1, h3 { 
            color: green; 
        } 
          
        hr { 
            position: relative; 
            top: 20px; 
            border: none; 
            height: 12px; 
            background: black; 
            margin-bottom: 50px; 
        } 
		</style>
	</head>

	<body>
	     <center> 
	        <div> 
	           <p>测试文字!水平线上端。</p>
		   <hr />
		   <p>测试文字!水平线下端。</p>
	        </div>
             </center> 
	</body>
</html>

效果图:

网站运营中栏目排名优化技巧

示例2:使用CSS属性来设置<hr> 标签的样式

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			div { 
	            width: 200px; 
	        } 
	          
	        body { 
	            background-color: #f0f0f0; 
	            width: 80px; 
	            float: center; 
	        } 
	          
	        hr.class-1 { 
	            border-top: 10px solid #8c8b8b; 
	        } 
	          
	        hr.class-2 { 
	            border-top: 3px double #8c8b8b; 
	        } 
	          
	        hr.class-3 { 
	            border-top: 1px dashed #8c8b8b; 
	        } 
	          
	        hr.class-4 { 
	            border-top: 1px dotted #8c8b8b; 
	        } 
	          
	        hr.class-5 { 
	            background-color: #fff; 
	            border-top: 2px dashed #8c8b8b; 
	        } 
	          
	        hr.class-6 { 
	            background-color: #fff; 
	            border-top: 5px dotted #8c8b8b; 
	        } 
		</style>
	</head>

	<body>
	    <div> 
	        <hr class="class-1" /> 
	        <br /> 
	        <hr class="class-2" /> 
	        <br /> 
	        <hr class="class-3" /> 
	        <br /> 
	        <hr class="class-4" /> 
	        <br /> 
	        <hr class="class-5" /> 
	        <br /> 
	        <hr class="class-6" /> 
	    </div> 
	</body>
</html>

效果图:

网站运营中栏目排名优化技巧

相关文章

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:222天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:3011 条
  • 文章评论:17 条
  • 微信公众号:扫描二维码,关注我们