2 yunzhonghe105 yunzhonghe105 于 2017.01.11 14:26 提问

HTML中的横线效果是怎么实现的

图片说明

上图中的横线效果,和最右侧的那个符号链接是怎么实现的?

10个回答

My_dream014
My_dream014   2017.01.11 15:07
已采纳

实现这种样式有多种方式,比如说,第一种,实现左面的长线条,可以设置一个div,这个div的height可以是1px或者2px,然后设置color,右面的短横线同理,然后让这两个div浮动,也就是float。第二种方式:可以用ps做一个这样的图片,然后利用定位,position来实现 。

baidu_24736703
baidu_24736703   2017.01.11 14:31

热门课程和最新课程之间的横线你可以用border-right或border-left属性,区别是你对那个使用,这条长直线可以用hr标签可以实现,但hr线比较粗,若想要比较细的,用个span或边界也可以做出这种效果

qq_35235940
qq_35235940   Rxr 2017.01.11 14:35

那条线:用一个框设置border边框或者一个框里面一张图背景图,或者



那个符号一般都是一张图定位的,或者调的控件
xgy667788
xgy667788   2017.01.11 14:46

线可以用span直接画出来1px就行,至于右侧的图就是图片啊!三个部分全float:left就行了,然后控制一下线的位置

u010715243
u010715243   2017.01.11 15:23

一个可以用border来做,还有就是美工用图片加样式

qq_33528249
qq_33528249   2017.01.11 16:07

给你说几个简单的,
1.



2.用div的border属性
3.用div的outline属性
4.用图片repeat-x
5.只用一张img
6.div背景
反正很多,你可以选择适合现阶段的方案。
dcxy0
dcxy0   Ds   Rxr 2017.01.11 16:38

f12看下源码,然后注意下css就可以了。

q34323201
q34323201   2017.01.11 16:50

javascript

liujian573281
liujian573281   2017.01.11 17:34

这个属性试试?

liujian573281
liujian573281   2017.01.11 17:38
 <fieldset>
                            <legend></legend>
    </fieldset>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
html中横线的一些用法
<br />一、作系列横单线<br /><br />  这是系列横单线试验,效果还好吧? <br />  在这个例子中,用到了表格主标题标记<caption>,它的语法如下:<br /><caption<br />align=left|center|right<br />valign=top|bottom><br />  align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center;valign的默认值是top。利用<caption>标记可以方便地在紧靠边表格的顶部或底部写
CSS伪类实现中间文字两边横线效果
利用CSS伪类实现中间文字两边横线效果 效果图: 实现代码: CSS伪类实现中间文字两边横线效果 body { margin: 0; } .login_content { position: absolute; text-align: center; min-width: 450px;
横线-文字-横线的html-css布局
很多时候网页上需要下面的布局;     这个很容易搞定;代码如下: 中间文字     一个table,内含一行,行中有三列;     第一列放一个html的hr线;中间列 放文字; 后一列再放hr线;     so easy,搞定;
css导航栏选中是有移动下划线的效果
技术不行,拿百度前端学院题目练习,其中遇到一个导航栏,每当选中一个选项,下面出现一个下划线标注。我本来想直接省掉这个功能,后来觉得这样学习估计什么都学不到。后来思考和查阅,记录如下。大概是这么个效果: HTML代码: Time of new life
HTML5创建线条渐变
HTML5创建线条渐变1、设计源码 HTML5创建线条渐变 /** * 创建线条渐变 */ function drawGradualText() { //找到元素 var canvas = document.getElementById("canvas"); //创建context对象 var ctx = canvas.getContext("2d");
如何在HTML中画一条线
使用HTML的HR节点可以实现:     1、size线段粗细的设定:   这是第一条线段,无size设定,取内定值SIZE=1来显示 这是第二条线段,SIZE=5 这是第三条线段,SIZE=10         这是第一条线段,无size设定,取内定值SIZE=1来
css样式,中间文字,两边横线
在项目中遇到过中间文字,两边横线的布局,如下图: 两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制。 html 产品清单 css .order { height: 60px; line-height: 60px; text-align: center; } .or
网页文字中间加横线
网页文字中间加横线打杠比较简单, 有个非标的html标签可以用:        已经过期 显示就是: 已经过期
CSS文字左右两横线效果
效果一: ul{ margin:0; padding:0; list-style-type:none;} #nav{font-size:12px;padding-bottom:15px;} #nav li{width:100%; height:30px;} #nav .item1{width:100%; border-bottom:1px solid #6c6;margin-bottom:-1
【Html】认识<hr>标签,添加水平横线
在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。如下图所示: 语法: html4.01版本  xhtml1.0版本 <hr /> 注意: 1. 标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。 2. 标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些