div+css中一条直线和一条虚线的实现。

最新推荐文章于 2024-04-22 17:32:15 发布
最新推荐文章于 2024-04-22 17:32:15 发布
阅读量3w 收藏 6
点赞数 1
分类专栏： div+css 文章标签： div css c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/think2me/article/details/7419028
版权 
   <div style="width:480px;height:1px; background:#E0E0E0;"></div>

直线：bachground : #C0C0C0 这个颜色稍微深一点。都可以



虚线：

<div style="margin: 30px 8px 20px 6px;border-top:1px dotted #C0C0C0;"></div>


dashed #C0C0C0 这个更好看。

domorejojo
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用div+css解决出现水平滚动条问题
10-30
用div+css解决出现水平滚动条问题
[转]在页面中添加一条‘彩色直线
u013687602的专栏
02-17 1330
1、用div控制在页面中显示一条直线： html中为：                         在css样式中定义： div{ overflow:hidden;  height:1px;  background-color:red; width:95%;} 在页面中显示高度为1px的一条红线：　　　　　　　　　　　　　　　　　　　　　　　　 2、在页面中也是现实一条直线，
CSS画一条虚线,并且灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色
最新发布
a_靖的博客
04-22 1745
CSS灵活设置虚线，虚线的宽度，虚线之间的间隔，虚线的颜色，一行代码实现
css 实现虚线效果的3种方式详解
老司机的后备箱
10-19 3万+
包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
【CSS】虚线的两种实现方式
流萤梦的博客
01-14 1万+
最近，在做一个需求，其中涉及到了一个下划线的问题，大概效果要长这样： （前面的文案打了马赛克，可能这个图看着有点奇怪，这不重要，主要是看虚线） 看到这个图的第一反应就是，害，不就是个边框吗，这有啥难的？ ......
CSS实现虚线的方法
热门推荐
saltlike的博客
02-14 5万+
方法一：利用边框的dotted或者dashed样式实现虚线 使用dotted或dashed边框实现的虚线是有区别的： dotted边框：是用一个个点(dot)组成的虚线； dashed边框：是用一个个破折号(dash)组成的虚线； <style> .box { margin: 20px; padding: 10px 30px; width: 200px; } .card1 { border: 1
用div画横线
未子涵的博客
04-13 3275
有时候无法满足一些特定样式的横线的需求时，可以考虑用div画一条横线：
比较漂亮的一个导航条的效果DIV+CSS
10-30
比较漂亮的一个导航条的效果DIV+CSS
DIV+CSS实现仿京东商城导航条效果
09-24
主要为大家介绍了DIV+CSS实现仿京东商城导航条效果,涉及页面div+css布局涉及结合onmouseout鼠标事件动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
DIV+CSS实现的MAC风格的水平导航条
05-18
很普通的一个导航条，不同之处是只采用了一张背景图片。
DIV+CSS简单登录界面模板
06-06
DIV+CSS简单登录界面模板，DIV+CSS布局，有用户名、密码登录框，登录按钮。
实现文字后面加一条横线的效果
cvper's world !
06-18 1万+
学习是一个长期积累的过程，积累的多了也就有经验了，有能力了；无论再忙也要坚持学习，继续我的学习！实现的效果图：我们能够看到，文字的两边出现了一小节横线；实现思路：    第一步：先实现一个外层的 div ，即图中的长方形部分，这个的作用是便于将文字部分放置在想要放置的地方；    第二步：在上面的div中再写一个 &lt;div&gt; 放置文字，或者用一个 &lt;p&gt; 来实现也是好的 ;...
div html 下边加横线_HTML如何在两个div中画一条横线 | 学步园
weixin_39903375的博客
12-20 2694
近日在画一个界面的时候，遇到一个需求：在界面当中画一条竖线，且这条竖线在高度上需要自动占满整个父div(即这条竖线的高度和两个div中较高的一个等高)。往常我们画一条横线直接用标签< hr>即可，当画一条竖线的时候发现找不到标签。在网上查找了一下资料，大致推荐用js来做。小弟比较偏执想用纯css来做，最终找到了解决方法，下面我就来分享一下我的做法。在两个子div中加多一个div，并设置...
DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程
10-30 3473
DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程。 本节为大家介绍常见的CSS 虚线及DIV教程。CSS虚线下划线、列表虚线统统搞定。 目录 CSS虚线边框CSS超链接虚线下划线列表型CSS虚线下划线CSS定义一条水平虚线 1、CSS边框虚线     -   TOP 这里通过边框属性的虚线边框border控制虚线。以下设置的css 高度(css h
css border 虚线画法
weixin_41886421的博客
07-10 1373
众所周知，border的虚线是固定宽度，如果需要一个不限制宽度，可用`repeating-linear-gradient`画法
css：使用div绘制一条竖线
1111111111
11-16 1万+
1、准备一个内容为空的div 2、给div设置宽高，宽度给小一点的值，竖线需要多长，就设置多高 3、只给div设置右边框 最终效果图： 使用div绘制竖线的优点是垂直居中更容易实现，竖线长度宽度都方便设置，（也试过直接用文字输入一条竖线，但是垂直方向总是无法居中） ...
css画一条虚线，用到background-image:linear-gradient线性渐变的属性
Frank_colo的博客
10-30 650
【代码】css画一条虚线，用到background-image:linear-gradient线性渐变的属性。
经典导航条div+css代码
12-11
经典导航条通常使用div元素和CSS代码来实现。以下是一个简单的经典导航条的例子： HTML代码： ```html <div class="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </div> ``` CSS代码： ```css .navigation { background-color: #333; /* 导航条背景颜色 */ height: 50px; /* 导航条高度 */ } .navigation ul { list-style-type: none; /* 去除列表项的默认样式 */ margin: 0; /* 去除列表的外边距 */ padding: 0; /* 去除列表的内边距 */ } .navigation li { display: inline-block; /* 水平排列列表项 */ } .navigation li a { color: #fff; /* 导航链接的文字颜色 */ display: block; /* 将链接变成块级元素 */ padding: 10px 20px; /* 链接的内边距 */ text-decoration: none; /* 去除链接的下划线 */ } .navigation li a:hover { background-color: #555; /* 鼠标悬停时链接的背景颜色 */ } ``` 以上代码中的导航条使用一个具有".navigation"类的div元素来包含一个无序列表（ul），无序列表中的每个列表项（li）都包含了一个链接（a）。通过在CSS代码中设置样式属性，我们可以将导航条的颜色、高度、链接的样式等进行定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值