麦田的博客

分割线样式参考

2019-09-01


分割线在网页中应用比较多,列举常规的分割线如下:

1、最基础的分割线:

<hr>或者<hr />,默认颜色是#9A9A9A,默认厚度是2

2、基础分割线:

# 位置可选左右中,可选线条长度,颜色以及厚度:
<hr align=center width=300 color=#DDDDDD size=1>

# 指定颜色,如果不指定厚度,默认是2,建议是1
<hr color=#cccccc size=1> 

# 需要设置上下距离的分割线
<hr style="margin: 10px 0;"> 

# 分割线颜色推荐灰色,这是百搭色!比如c和d

3、虚线分割线:

<hr size=1 style="color: blue;border-style:dashed;width:500">

<hr size=2 style="color: #cccccc;border-style: dashed">【自动宽度】

# dashed:减号形状的虚线,推荐!;dotted:点状虚线;

4、双线分割线,用得少

# 来自网上的双线:

<hr style="height:3px;border:none;border-top:3px double red;"/>

# 我写的双线:

<hr style="height:3px;border:1px solid #cccccc;"/>

# 虚线的双线分割线:

<hr style="height:3px;border:1px dashed #cccccc;"/>

以上都是内联式样式,以下是HTML+CSS样式:

html部分:<div class="line"></div>
css部分-虚线:
.line{
	border-bottom: 2px dashed #cccccc;
	margin: 15px 0;
}
html部分:<hr class="hr1"/>
css部分-实线:
hr.hr1 {
    border-bottom: 1px solid #cccccc;
	margin: 15px 0;
}

以下是带文字的分割线:


html部分:
<div class="line"><span>分割线中间有文字</span></div>

css部分:
.line{
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.line span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 20px;
}

3D效果的分割线已经淘汰,不建议使用!


相关内容

  • Hugo升级方法和遇到的问题
  • DIVCSS的class和id的区别
  • HTML引入CSS的方法和示例
  • vscode的使用经验-编辑md文件
  • 麦田收集的优秀网站
  • RAKsmart主机教程
  • OpenCart商城程序使用经验
  • Win10系统安装Jekyll详细教程
  • WordPress不加载自定义js和css文件
  • Markdown写静态网站指南
  • 标签

    csshtml教程