分割线怎么搭建css,css怎么设置分割线

css设置分割线的方法：首先创建一个HTML实例文件；然后在body中创建三个div；最后给第二个div设置样式为“padding-top:3px;width:40%;border-top:1px solid #666666;”即可。

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

使用原生HTML+CSS制作一个分割线

代码如下：

分割线

设备：

这里是一个分割线

设备：

.order {

height: 20px;

line-height: 20px;

text-align: center;

}

.order .line {

display: inline-block;

padding-top : 3px;

width: 40%;

border-top: 1px solid #666666;

}

.order .txt {

color: #333333;

font-size: 12px;

vertical-align: middle;

}

效果如下图所示：

学习视频分享：css视频教程

分割线怎么搭建css,css怎么设置分割线相关推荐

Android ListView item设置分割线以及分割线宽度
ListView item设置分割线的方法:setDivider ListView item设置分割线宽度的方法:setDividerHeight // 设置分割线 listView.setDivid ...
RecyclerView（四）设置分割线样式（Android 5.0 新特性）
Android RecyclerView(四)设置分割线样式(Android 5.0 新特性) 样式一在这里,其实是设置了每一个条目布局中的子布局的android:layout_margin = ...
线性布局LinearLayout设置分割线divider
目录一.线性布局LinearLayout设置分割线divider 总结一.线性布局LinearLayout设置分割线divider 上代码: <LinearLayoutandroid:id= ...
css top 定位百分比,css 使用relative设置top为百分比值的方法(仿百度首页)
前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现垂直伸缩 * ...
css模拟select设置高度在ie67下有效（也可作为去除边框）
今天做测试页面碰到的第二个问题,IE6,IE7 下无法去除select下拉菜单的边框,新手伤不起...百度.... 以下为转载: 下面的描述都是根据这个结构来的 <div class=" ...
html 字体图标颜色怎么改,关于css：如何设置Font Awesome Icons的图标颜色，大小和阴影的样式...
我如何设置Font Awesome图标中图标的颜色,大小和阴影? 例如,Font Awesome的网站将显示一些白色的图标和一些红色的图标但不会显示CSS如何以这种方式设置样式... 鉴于它们只是字体 ...
怎样用html设置文档格式,Dreamweaver使用CSS样式表设置网页文本格式
Dreamweaver使用CSS样式表设置网页文本格式互联网发布时间:2008-10-17 19:35:50 作者:佚名我要评论本文章介绍如何在 Dreamweaver 中使用层叠 ...
html修改li大小,css为li设置不同宽度
在开发过程中,会碰到一些选择器的需求:例如使列表中的第一项或者最后一项显示不同的样式 .列表中的奇数或者偶数项显示不同的背景色 . . . 等等.我们可以通过 CSS 来实现这样的效果,CSS 给我们 ...
用于设定表格样式的附加css,Dreamweaver使用CSS样式表设置网页文本格式
核心提示:本文章介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式.您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本,从而能更加灵活自如地控 ...
微软雅黑html中怎么写,css样式怎么设置字体为微软雅黑？
css样式怎么设置字体为微软雅黑?下面本篇文章就来给大家介绍一下使用CSS设置字体为微软雅黑的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 首先要了解css中是如何控制字体的 ...

分割线怎么搭建css,css怎么设置分割线

分割线怎么搭建css,css怎么设置分割线相关推荐

最新文章

热门文章