简述

<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>

为了实现我们的最终效果，我们需要做以下几点修改：

  1. <div>下边框上浮
  2. 去掉<div>背景色
  3. 设置<span>背景色为白色，覆盖边框超出文本部分。
  4. 分别对每一个<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之可收缩的底部边框的更多相关文章

  1. css重点章节复习—布局-边框-边距-浮动 (部分)

    css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...

  2. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  3. 用div加css做表格去掉外围边框

    通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...

  4. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  5. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

  6. css的img移上去边框效果及CSS透明度

    css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...

  7. [css]演示：纯CSS实现的右侧底部简洁悬浮效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  8. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  9. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

随机推荐

  1. HDOJ 3486 Interviewe

    人生中第一次写RMQ....一看就知道 RMQ+2分但是题目文不对题....不知道到底在问什么东西....各种WA,TLE,,RE...后就过了果然无论错成什么样都可以过的,就是 上层的样例 啊  I ...

  2. PHP合并数组array_merge函数运算符加号与的区别

    两个的区别是:1.数组键名为数字键名时,要合并的两个数组中有同名数字KEY的时候,使用array_merge()不会覆盖掉原来的值,而使用“+”合并数组则会把最先出现的值作为最终结果返回,而把后面的数 ...

  3. Level2行情和传统行情的区别

    序号 Level2行情 传统行情 Level 2特点 Level 2行情优势 1 每3秒钟发送一次行情信息 每6秒钟发送一次 行情显示速度更快 投资者更及时地获得交易信息 2 证券逐笔成交明细信息 证 ...

  4. POJ 3320

    Jessica's Reading Problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6496   Accept ...

  5. Services学习（一）

    对于需要长期运行,例如播放音乐.长期和服务器的连接,即使已不是屏幕当前的activity仍需要运行的情况,采用服务方式.服务将通过API触发启动或者通过IPC(Interprocess Communi ...

  6. Mime Types

    Mime Types 1.http://www.freeformatter.com/mime-types-list.html 2.http://www.webmaster-toolkit.com/mi ...

  7. ExtJs之FieldSet和FieldContainer

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  8. 由枚举模块到ring0内存结构 (分析NtQueryVirtualMemory)

    是由获得进程模块而引发的一系列的问题,首先,在ring3层下枚举进程模块有ToolHelp,Psapi,还可以通过在ntdll中获得ZwQuerySystemInformation的函数地址来枚举,其 ...

  9. Linux静态库和动态库

    Linux 工具 ❑ GCC: The GNU Compiler Collection, containing the GNU C compiler❑ G++: A C++ compiler, inc ...

  10. 【转】Linux写时拷贝技术(copy-on-write)

    http://www.cnblogs.com/biyeymyhjob/archive/2012/07/20/2601655.html 源于网上资料 COW技术初窥: 在Linux程序中,fork()会 ...