分割线样式参考

麦田3年前 (2019-08-01)工作笔记268

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


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效果的分割线已经淘汰,不建议使用!

相关文章

CSS字体大小单位介绍和转换对照表

css字体大小单位,常见的有px、em、rem,这三个的区别是:px是固定的像素,设置后无法为适应页面大小而改变,但实际上这是我经常使用的字体单位大小,设置后页面显示正常,不存在在手机中字体过小的问题...

HTML引入CSS的方法和示例

HTML和CSS是不同的两种语言,但是它们对网页同时产生作用。网页(WebPage)= 内容(html) + 表现(css) + 行为(javascript),因此需要把CSS引入HTML一起使用,让...

CSS3利用linth-child(n)实现隔几行设置元素

hugo主题ivy首页就是全部文章列表,如果文章过多,一眼看去会视觉疲劳。虽然可以设置分页,但是我忽然想:能不能设置每隔10个li就写个标记,比如不同的颜色或者分割线来减少视觉疲劳!通过谷歌搜索找到答...

CSS命名规则/CSS命令规范

按照规范命名CSS,更专业,更易于管理!头部:header内容:content/container尾部:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽...

DIVCSS的class和id的区别

网页中,常见的是div class,有时也有div id,这两者有什么区别呢?<div class="wrap">,对应的是.wrap<div id="...

https网站二级目录请求url错误

这个问题没有找到答案,以下解答也无效。在https的网站中引用http路径的js或css会导致不起作用,其形如:Html<script src="http://code.jquery....

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。