html中hr的各种样式使用
<span style="color: rgb(51, 51, 51); font-family: "Microsoft Yahei", 微软雅黑, arial, 宋体, sans-serif; font-size: 16px; line-height: 28px; text-align: justify;">网页设计当中hr的各种样式，如果使用得当，将会给你的页面增色很多，下面就来详细介绍下各种样式和各种使用方式的方法！</span><p></p><div><span style="color: rgb(51, 51, 51); font-family: "Microsoft Yahei", 微软雅黑, arial, 宋体, sans-serif; font-size: 16px; line-height: 28px; text-align: justify;"><br></span></div><div><span style="color: rgb(51, 51, 51); font-family: "Microsoft Yahei", 微软雅黑, arial, 宋体, sans-serif; font-size: 16px; line-height: 28px; text-align: justify;">我用的编辑器是eclipse，这个根据个人喜好来定，用什么都无所谓的，就算你直接用txt也照样能实现这里的效果，毕竟只是静态。</span></div><div><div class="content-list-text" style="color: rgb(51, 51, 51); font-family: "Microsoft Yahei", 微软雅黑, arial, 宋体, sans-serif; font-size: 16px; line-height: 28px; text-align: justify;"><p>第一种：</p><p><hr style=" height:2px;border:none;border-top:2px dotted #185598;" /></p><p>height:2px;是hr的高度</p><p>border:none;是没有边框</p><p>border-top:2px dotted #185598;是设置横线的样式</p><p>dotted 虚线 #185598 颜色</p></div><div class="content-list-media" style="color: rgb(51, 51, 51); font-family: "Microsoft Yahei", 微软雅黑, arial, 宋体, sans-serif; font-size: 16px; line-height: 28px; text-align: justify;"><div class="content-list-image clearfix" style="zoom: 1; position: relative; padding-top: 10px; padding-bottom: 10px;"><a class="exp-image-wraper" href="http://jingyan.baidu.com/album/af9f5a2d37342c43140a4500.html?picindex=1" log="type:20150831,pos:enter_step,expGroup:G0" target="_self" style="text-decoration: none; color: rgb(45, 100, 179); position: relative; display: block; float: left;"><img class="exp-image-default" alt="html中hr的各种样式使用" src="http://b.hiphotos.baidu.com/exp/w=500/sign=794fe5a09c3df8dca63d8f91fd1072bf/0e2442a7d933c895d8c3732cd21373f082020023.jpg" style="border-width: 0px; border-style: initial; display: block;"></a><div><br></div><div><br></div><div><div class="content-list-text"><p style="text-align: left; line-height: 30px; text-indent: 2em;"><br></p><p style="text-align: left; line-height: 30px; text-indent: 2em;"><span style="text-indent: 2em;">第二种：</span></p><p><hr style="height:1px;border:none;border-top:1px dashed #0066CC;" /></p></div><div class="content-list-media"><div class="content-list-image clearfix" style="zoom: 1; position: relative; padding-top: 10px; padding-bottom: 10px;"><a class="exp-image-wraper" href="http://jingyan.baidu.com/album/af9f5a2d37342c43140a4500.html?picindex=2" log="type:20150831,pos:enter_step,expGroup:G0" target="_self" style="text-decoration: none; color: rgb(45, 100, 179); position: relative; display: block; float: left;"><img class="exp-image-default" alt="html中hr的各种样式使用" src="http://b.hiphotos.baidu.com/exp/w=500/sign=e142197e8518367aad897fdd1e738b68/279759ee3d6d55fbe3e8a2716e224f4a20a4ddbf.jpg" style="border-width: 0px; border-style: initial; display: block;"></a><div><br></div><div><br></div><div><div class="content-list-text"><p>第三种：</p><p><hr style="height:1px;border:none;border-top:1px solid #555555;" /></p></div><div class="content-list-media"><div class="content-list-image clearfix" style="zoom: 1; position: relative; padding-top: 10px; padding-bottom: 10px;"><a class="exp-image-wraper" href="http://jingyan.baidu.com/album/af9f5a2d37342c43140a4500.html?picindex=3" log="type:20150831,pos:enter_step,expGroup:G0" target="_self" style="text-decoration: none; color: rgb(45, 100, 179); position: relative; display: block; float: left;"><img class="exp-image-default" alt="html中hr的各种样式使用" src="http://a.hiphotos.baidu.com/exp/w=500/sign=d89622a9c0fdfc03e578e3b8e43e87a9/a50f4bfbfbedab6413259997f436afc379311e15.jpg" style="border-width: 0px; border-style: initial; display: block;"></a><div><br></div><div><br></div><div><div class="content-list-text"><p>第四种：</p><p><hr style="height:3px;border:none;border-top:3px double red;" /></p></div><div class="content-list-media"><div class="content-list-image clearfix" style="zoom: 1; position: relative; padding-top: 10px; padding-bottom: 10px;"><a class="exp-image-wraper" href="http://jingyan.baidu.com/album/af9f5a2d37342c43140a4500.html?picindex=4" log="type:20150831,pos:enter_step,expGroup:G0" target="_self" style="text-decoration: none; color: rgb(45, 100, 179); position: relative; display: block; float: left;"><img class="exp-image-default" alt="html中hr的各种样式使用" src="http://h.hiphotos.baidu.com/exp/w=500/sign=f72cc44ad72a283443a6360b6bb4c92e/a2cc7cd98d1001e9ae74c058bb0e7bec54e79719.jpg" style="border-width: 0px; border-style: initial; display: block;"></a><div><br></div><div><br></div><div><div class="content-list-text"><p>第五种：</p><p><hr style="height:5px;border:none;border-top:5px ridge green;" /></p></div><div class="content-list-media"><div class="content-list-image clearfix" style="zoom: 1; position: relative; padding-top: 10px; padding-bottom: 10px;"><a class="exp-image-wraper" href="http://jingyan.baidu.com/album/af9f5a2d37342c43140a4500.html?picindex=5" log="type:20150831,pos:enter_step,expGroup:G0" target="_self" style="text-decoration: none; color: rgb(45, 100, 179); position: relative; display: block; float: left;"><img class="exp-image-default" alt="html中hr的各种样式使用" src="http://c.hiphotos.baidu.com/exp/w=500/sign=2372dc0a56fbb2fb342b58127f4b2043/b7003af33a87e9504fb6273b13385343faf2b4c0.jpg" style="border-width: 0px; border-style: initial; display: block;"></a><div><br></div><div><br></div><div><br></div><div><div class="content-list-text"><p>第六种：</p><p><hr style="height:10px;border:none;border-top:10px groove skyblue;" /></p><p>border-top:10px groove skyblue; groove 上颜色 skyblue 下颜色</p></div><div class="content-list-media"><div class="content-list-image clearfix" style="zoom: 1; position: relative; padding-top: 10px; padding-bottom: 10px;"><a class="exp-image-wraper" href="http://jingyan.baidu.com/album/af9f5a2d37342c43140a4500.html?picindex=6" log="type:20150831,pos:enter_step,expGroup:G0" target="_self" style="text-decoration: none; color: rgb(45, 100, 179); position: relative; display: block; float: left;"><img class="exp-image-default" alt="html中hr的各种样式使用" src="http://h.hiphotos.baidu.com/exp/w=500/sign=2801728875c6a7efb926a826cdfaafe9/a71ea8d3fd1f4134581ad229261f95cad1c85ebc.jpg" style="border-width: 0px; border-style: initial; display: block;"></a><div><br></div><div><br></div><div>只要hr样式用的好，会让你的网页活灵活现的哦！</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
页:
[1]