简述

<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. IDA 在string窗口中显示中文字符串

    打开ida61\cfg中的ida.cfg文件找到 // (cp866 version)AsciiStringChars = "\r\n\a\v\b\t\x1B" " !\ ...

  2. var 和 dynamic在实际项目中的应用

    先回顾一下这两个关键词的用法. var是个语法糖,是在用var声明变量的那一刻就确定了其变量的类型. 因为需要在声明的时候就确定其类型,所以要求在用var声明隐式局部变量的时候必须初始化该变量. 编译 ...

  3. NGUI 实现 透明底图遮罩 && 人物像素变黑

    今天 UI 那边要求实现一个 透明底图遮罩 与 变黑 的效果. 刚开始考虑使用 shader 实现一个 网上搜了一下,发现了这个,但是底图需要不透明才行,不然他会把 底图的不遮罩部分的透明部分 进行颜 ...

  4. 深入浅出ES6（十三）：类 Class

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 你可能觉得之前讲解的内容略显复杂,今天我们就讲解一些相对简单的内容,不再是生成器 ...

  5. Codeforces Round #335 (Div. 2) D. Lazy Student 贪心

    D. Lazy Student   Student Vladislav came to his programming exam completely unprepared as usual. He ...

  6. Node.js缓冲模块Buffer

    前言 Javascript是为浏览器而设计的,能很好的处理unicode编码的字符串,但对于二进制或非unicode编码的数据就显得无能为力. Node.js继承Javascript的语言特性,同时又 ...

  7. x64的调用约定

    在设计调用约定时,x64 体系结构利用机会清除了现有 Win32 调用约定(如 __stdcall.__cdecl.__fastcall._thiscall 等)的混乱.在 Win64 中,只有一个本 ...

  8. Django视频教程 - 基于Python的Web框架（全13集)

    Django是由Python驱动的开源模型-视图-控制器(MVC)风格的Web应用程序框架,使用Django可以在即可分钟内快速开发一个高品质易维护数据库驱动的应用程序.下面是一大坨关于Django应 ...

  9. 更改cmd代码页，修正语言显示

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 rem 英文 chcp 437   rem 日文 chcp 932   rem 简体中文 chcp 936   re ...

  10. installation failed with message null

    http://stackoverflow.com/questions/33315753/installation-failed-with-message-null-genymotion-error I ...