简述

<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. Mozilla推荐的CSS属性书写顺序及命名规则

    传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...

  2. Ajax风格的一款网页Loading效果

    现在比较流行的一款Ajax风格的网页Loading,多见于一些大量使用Ajax技术的网站中,页面加载时会自动显示提示信息,带载入动画效果,网页加载完自动消失,是一款正在具有Loading功能的网页进度 ...

  3. Appstore提交 被拒绝

    Reasons 16.1: Apps that present excessively objectionable or crude content will be rejected 16.1 We ...

  4. Maven在项目中的应用

    http://192.168.0.253:8081/nexus/#view-repositories;thirdparty~uploadPanel 使用局域网搭建的环境,输入用户名和密码登录,上传ja ...

  5. Linux下ettercap的安装，make安装软件步骤

    第一步:下载ettercap的压缩包 用tar 解压压缩包,-z 用gzip的方式解压 -x 解打包/解压缩 -f 指定包  -v显示进度 ls 可以查看解压后出现一个新目录 ettercap-0.8 ...

  6. POJ 2226

    Muddy Fields Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7557   Accepted: 2791 Desc ...

  7. SPL 全面剖析

    SPL 全面剖析 来自百度百科 http://baike.baidu.com/view/1130234.htm?fr=aladdin SPL(Standard PHP Library) IN PHP5 ...

  8. iOS多线程的初步研究（三）-- NSRunLoop

    弄清楚NSRunLoop确实需要花时间,这个类的概念和模式似乎是Apple的平台独有(iOS+MacOSX),很难彻底搞懂(iOS没开源,呜呜). 官网的解释是说run loop可以用于处理异步事件, ...

  9. C#实现文件增量备份

    最近将客户的一个ASP网站部署到了公司的机房云服务器上,该ASP网站的文件总容量已有将近4GB. 虽然现在硬盘容量很大,但每天一次完整备份的话,那占用的硬盘空间会急剧上升,考虑一个更优的备份方案就是每 ...

  10. Eclipse导入工程中文乱码问题

    此文引用自eclipse导入工程中文乱码问题,作者elleniou. 关于Eclipse导入工程中文乱码问题实在是一个非常令人头疼的,深感一定要彻底解决才算放心,故摘抄上文如下: eclipse之所以 ...