CSS之可收缩的底部边框
简述
<div>用来定义文档中的分区或节，<span>用来组合文档中的行内元素。我们可以通过<div>和 <span>将HTML元素组合起来。
下面我们来实现一个可收缩的底部边框。
最终效果
我们先看一下最终要实现的效果。
要实现这样一个效果，首先我们可以模块化，里面包含5个<div>，而每一个<div>里面包含一个<span>。
组合
为了更容易看出效果，我们先实现一个简单地组合，然后用颜色对每一个部位进行区分。
效果
源码
源码很简单，里面设置了<div>的背景色为橙色，底部边框5像素、蓝色，<div>中的<span>背景为绿色、文本色为白色。
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {
line-height: 150%;
background: orange;
border-bottom: 5px solid blue;
}
div span {
position: relative;
background: green;
padding: 0 5px;
color: white;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<span>Photoshop</span>
</div>
<div>
<span>Adobe Illustrator</span>
</div>
<div>
<span>3D Max</span>
</div>
<div>
<span>Maya</span>
</div>
<div>
<span>Windows 8 Pro</span>
</div>
</body>
</html>为了实现我们的最终效果，我们需要做以下几点修改：
<div>下边框上浮- 去掉
<div>背景色 - 设置
<span>背景色为白色，覆盖边框超出文本部分。 - 分别对每一个
<div>下边框设置颜色
源码
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {
line-height: 150%;
border-bottom: 5px solid blue;
}
/* 设置底部边框色 */
.Photoshop{
border-bottom-color: red;
}
.Adobe{
border-bottom-color: green;
}
.Max{
border-bottom-color: blue;
}
.Maya{
border-bottom-color: orange;
}
.Windows8{
border-bottom-color: yellow;
}
div span {
position: relative;
/* 下边框上浮 */
bottom: -10px;
/* 背景色白色，覆盖边框超出文本部分 */
background: #fff;
padding: 0 5px;
color: #82439a;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "Photoshop">
<span>Photoshop</span>
</div>
<div class = "Adobe">
<span>Adobe Illustrator</span>
</div>
<div class = "Max">
<span>3D Max</span>
</div>
<div class = "Maya">
<span>Maya</span>
</div>
<div class = "Windows8">
<span>Windows 8 Pro</span>
</div>
</body>
</html>CSS之可收缩的底部边框的更多相关文章
- css重点章节复习—布局-边框-边距-浮动 (部分)
css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...
- css写出0.5px边框（一）
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- 用div加css做表格去掉外围边框
通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...
- css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
- css图片叠加和底部定位
css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...
- css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
- [css]演示：纯CSS实现的右侧底部简洁悬浮效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- div footer标签css实现位于页面底部固定
Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...
随机推荐
- Hadoop伪分布模式配置
本作品由Man_华创作,采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.基于http://www.cnblogs.com/manhua/上的作品创作. 请先按照上一篇文章H ...
- ios frame、bound和center定义及使用场景总结
frame:指的是视图在父视图的坐标系统中的大小和位置. bound:指的是视图在视图本身的坐标系统中的大小(位置起点是原点). center:指的是视图在父视图坐标系统中的中心点. frame和bo ...
- IT架构之IT架构标准——思维导图
参考: [日] 野村综合研究所系统咨询事业本部. 图解CIO工作指南. 周自恒译 人民邮电出版社,2014
- Visual Event插件----查看html元素绑定的事件与方法的利器
WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...
- mybatis处理查询map列表属性为null的问题，而导致查询map无该key对象
1.常规处理方法(数据库以mysql为例) IFNULL(m.last_use_time,) ) ) as last_lat if判断是否为null,设置一个默认值. 2.前台jsp页面处理,判断是否 ...
- 远程数据源Combobox
Ext.define('bookInfo', { extend: 'Ext.data.Model',//新类继承自model fields: [{ name: 'b ...
- Runtime的用法
public class RuntimeTest { public static void main(String[] args) { Runtime run =Runtime.getRuntime( ...
- KMP高质量代码实现详解
KMP算法 对于KMP算法我分为两个部分说明,第一部分是算法部分,介绍KMP算法的算法思想:第二部分是实现部分,介绍一种厉害的实现代码以及代码注释.当然了由于本文主要介绍怎么实现故而先分析实现,对KM ...
- C#中的可空类型
public class Person { public DateTime birth; public DateTime? death; string name; public TimeSpan Ag ...
- Axure 注册码
用户名:axureuser 序列号:8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyPD6lK7G6+tqEV4LG