-
2021-06-08 16:28:37
一、普通
1、横线
2、居中横线
size=1>
align
线条位置(可选left、right、center)；width线条长度；color颜色；size厚度
二、特效(效果并不是孤立的，可相互组合)
1、两头渐变透明
SIZE=3>
2、纺锤形
color=#987cb9 SIZE=10>
3、右边渐变透明
color=#987cb9 SIZE=3>
4、左边渐变透明
color=#987cb9 SIZE=3>
5、虚线
color=#987cb9 SIZE=1>
6、双线
color=#987cb9 SIZE=3>
7、立体效果
width="80%" color=#987cb9 SIZE=1>
8、钢针效果
width="80%" color=#987cb9 SIZE=1>
9、垂直分割线
cellspacing="0" style="height:265px;border-left-style:solid;
border-bottom-style:none;border-right-style:none;border-top-style:none">
更多相关内容 -
HTML—讲解分割线标签、文字居中、背景图片充满全图
2019-09-05 20:40:35一丶 分割线标签 <hr> 二丶文字居中 以table为例： <table border="1"align="center"></table> 三丶背景图片铺满整个网页： <html> <head> <meta charset="UTF-8"> ...展开全文一丶 分割线标签
<hr>二丶文字居中
以table为例：<table border="1"align="center"></table>三丶背景图片铺满整个网页：
<html> <head> <meta charset="UTF-8"> <title>img<title> <style type="text/css"> body{ background-image:url(img/index.jpg); background-size:cover; } </style> .... ....注意：URL 路径是放在和网页同一个文件夹时才能直接写图片名字+扩展名，如果还专门创建了一个文件夹放置图片，记得要先写文件夹的名字再写图片名+扩展名！
-
html几种美丽的分割线
2020-05-14 13:28:42普通 <HR> <HR align=center width=300 color=#987cb9 SIZE=1> align 线条位置（可选left、right、center）；width 线条长度；color 颜色；...HR style="FILTER: alpha(opacity=100,finishopacity=0,style...展开全文普通
<HR><HR align=center width=300 color=#987cb9 SIZE=1>
align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度特效（效果并不是孤立的，可相互组合）
1、两头渐变透明：
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>2、纺锤形：
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>3、右边渐变透明：
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>4、左边渐变透明：
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>虚线：
<HR style="border:1 dashed #987cb9" width="80%" color=#987cb9 SIZE=1>
双线：<HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3>
7、立体效果：
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>CSS渲染<hr>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
/* Red border */
hr.new1 {
border-top: 1px solid red;
}
/* Dashed red border */
hr.new2 {
border-top: 1px dashed red;
}
/* Dotted red border */
hr.new3 {
border-top: 1px dotted red;
}
/* Thick red border */
hr.new4 {
border: 1px solid red;
}
/* Large rounded green border */
hr.new5 {
border: 10px solid green;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Style HR</h2>
<p>Default:</p>
<hr>
<p>Different styles of HR:</p>
<hr class="new1">
<hr class="new2">
<hr class="new3">
<hr class="new4">
<hr class="new5">
</body>
</html>
-
html中分割线的使用
2017-04-17 01:08:06width：即表示宽度，属性值默认单位为像素(px)，也可以用百分比来表示分割线所占空间的比例； size：表示分割线的厚度或高度，属性值默认单位也为像素(px)； aling：为对齐方式，类似于的align； color：即颜色...展开全文<hr width="90%" style="height:3px;" color="#000000"/>
<hr width="3px" style="height:100px;" color="#000000"/>
<hr/>标签的多种属性解决了这个问题，常用的属性有width、size、align、color和titile。
width：即表示宽度，属性值默认单位为像素(px)，也可以用百分比来表示分割线所占空间的比例；
size：表示分割线的厚度或高度，属性值默认单位也为像素(px)；
aling：为对齐方式，类似于<p>的align；
color：即颜色，我们可以根据需要设置分割线的不同颜色；
title：这个属性使用的不多，表示当浏览者光标悬停在分割线上时出现属性值的内容提示。
<html>
<head>
<title>建站教程网-为学习HTML,DIV+CSS教程,网站开发制作与建设提供动力</title>
</head>
<body>
<p align="center">HTML教程</p>
<hr/>
<p>建站教程网-xhtml教程提供最全面的html教程，告诉您html是什么，快速学习xhtml知识，并制作html网页页面。</p></body>
</html>
-
html-HR标签分割线
2021-03-01 14:32:01代码 <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3> 参考 html几种美丽的分割线 -
html水平分割线 html 分割线颜色怎么变浅
2021-06-09 15:00:04深入理解es6和es6标准入门...水平分割线的标签是单标签： 默认情况下只占一行。 建站教程网-为学习HTML,DIV+CSS教程,网站开发制作与建设提供动力HTML教程建站教程网-xhtml教程提供最在html网页中插入垂直分割线我知... -
HTML设置水平分割线
2021-06-09 17:09:18在Web中使用水平分割线可以分割不同的文字段落或者其它网页组件，轻松地修饰了段落排版，使之更美观。当然，水平分割线还可以...2. HTML设置水平分割线的宽度水平分割线的宽度为像素(px)或者相对于屏幕宽度的百分比(... -
html水平分割线标签
2015-05-23 01:40:19水平分割线标签： 一般用于页脚footer上，用以分割版权、备案标示与自定义内容，简介、大方。 -
html竖直分割线如何设置？html竖直分割线的代码讲解
2021-05-02 00:37:09我们知道html水平分割线很容易实现，只需要利用标签就可以了，那么html竖直分割线该怎么实现呢？本篇文章就来给大家介绍一下html竖直分割线的实现方法。PS：关于html水平分割线实现方法大家可以看看这篇文章：《html... -
5个CSS3分割线设计和代码实现
2021-06-17 08:01:30CSS语言：CSSSCSS确定.wrapper {padding-bottom: 90px;}.divider {position: relative;margin-top: 90px;height: 1px;}.div-transparent:before {content: "";position: absolute;top: 0;left: 10%;... -
html中水平分割线的九种特效_百科369
2021-06-12 01:09:55html中水平分割线的九种特效_百科3692018-09-142. CSS方法HTML中水平分割线的九种特效1. 右边渐变透明或本例使用了CSS的alpha滤镜。2. 左边渐变透明或3. 纺锤形或4. 两头渐变透明或5. 虚线或本例使用了CSS的border... -
前端html-常用分割线
2021-06-30 14:05:15普通 <HR align=center width=300 color=#987cb9 SIZE=1> align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度 特效（效果并不是孤立的，可相互组合） 1、两头渐变透明： ... -
HTML表格里分割线是否显示的问题
2021-03-22 11:57:05使用HTML制作表格，关于表格中间的分割线显示与否的问题 ** 不显示分割线示例： 此时的代码为：这样的情况下，对于背景颜色的属性设定是加在了table标签后面的bgcolor="red". 此时，表格没有显示分割线。 显示分割线... -
（div，p）等标签之间“分割线”的两种实现方式
2018-08-03 10:59:50在项目、网页中经常会遇到在两个区域之间增加一条“线”来到达分割的效果，我在这里提供两种思路方法，以解决不同的实际问题。...这种方式很简单，也和实用，解决一般的分割线需求是没问题的，但如果... -
HTML设置水平分割线_html/css_WEB-ITnose
2021-06-09 14:07:33在Web中使用水平分割线可以分割不同的文字段落或者其它网页组件，轻松地修饰了段落排版，使之更美观。当然，水平分割线还可以...2. HTML设置水平分割线的宽度水平分割线的宽度为像素(px)或者相对于屏幕宽度的百分比(... -
HTML学习---------1.12 水平分割线标签 <hr>
2017-06-02 15:22:40在展示信息时,有时会需要添加一些用于分割的横线,这样会是文章看起来整齐些,这时就要用到标签; 语法: xhtml1.0版本: html4.01版本: 注意: 1,标签和标签一样也是一个空标签,所以只有开始标签,没有结束标签; 2,... -
CSS分割线虚线代码
2021-06-13 17:25:14CSS分割线虚线代码原创My_King12010-08-15 16:09:35著作权文章标签文章分类脚本语言阅读数1702©著作权归作者所有：来自51CTO博客作者My_King1的原创作品，如需转载，请注明出处，否则将追究法律责任... -
html各种分割线
2017-08-09 00:51:45各种分割线Html代码 1、 2、 align=center width=300 color=#987cb9 SIZE=1> align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度 二、特效（效果并... -
css实现文章分割线样式的多种方法总结
2021-06-13 17:20:32这篇文章整理css如何实现文章分割线的多种方式，分割线在页面中可以起到美化作用，那么就来看看使用css实现分割线样式的多种方法。效果如下：方式一：单个标签实现分隔线：html:小小分隔线 单标签实现css:.demo_line... -
改变hr标签分割线颜色
2019-05-10 15:09:11hr标签是线条，其颜色要用background-color； 再给线条设置一个height，正常粗细就是1px，设置完后线条变粗，因为hr有默认的border边框，需要将它的边框去掉 ... -
HTML如何做出分割线效果
2017-12-17 20:37:30HTML几种分割线效果 -
[CSS]几种实现分割线的方法
2021-06-11 18:02:01HTML结构小小分隔线 单标签实现小小分隔线 巧用色实现小小分隔线 inline-block实现小小分隔线 浮动来实现———————————小小分隔线 字符来实现————————————对应的CSS.demo{width:600px}.line_01... -
进阶HTML--换行与水平分割线 -----16岁的小前端
2019-02-12 23:14:47水平分割线标签的代码如下 我们来试一下 我将【 】标签写在了任意的文字中间；打开浏览器看一下效果； 我们会发现两个文字被一条横在页面上的一条线给分割成两行； 这条线称之为【水平... -
【html问题】在网页中添加垂直分割线
2018-05-12 13:58:06标签，但是却没有简单的添加垂直分割线的方法，我在学习的这段时间，自己琢磨了一些添加垂直分割线的方法。1.在文本中直接使用符号"|"。优点：简单方便。缺点：不能调整长度，宽度等参数。总结：在制作... -
HTML中画分割线
2018-12-17 10:26:38使用hr标签实现画一条线 html代码： <html> <body> <p>hr 标签定义水平线：</p> <hr /> <p>这是段落。</p&...
