简述

<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. Sqli-labs less 21

    Less-21 本关对cookie进行了base64的处理,其他的处理流程和less20是一样的. 我们这里可以利用less20同样的方法,但是需要将payload进行base64编码处理(注意这里对 ...

  2. ASP.NET Web.Config配置数据库连接的一种方法

    所谓的webConfig配置数据库连接就是在里面某个特定名称的节点中写下ADP.NET中的ConnectString,就这么简单 1.首先在Web.Config文件里写下数据库连接字符串. <c ...

  3. POJ 3982 序列(JAVA,简单，大数)

    题目 //在主类中 main 方法必须是 public static void 的,在 main 中调用非static类时会有警告信息, //可以先建立对象,然后通过对象调用方法: import ja ...

  4. 转载：PHP,MySQL的安装与配置

    本文转自:http://www.cnblogs.com/janas/archive/2012/08/27/2659240.html 一.安装配置PHP 1.下载Php的版本zip包之后,解压缩到指定目 ...

  5. line-height 与垂直居中!

    在此之前,对于line-height 与垂直居中的问题,经常碰到. 比如,图片与span在同一个box中的时候,竟然会各种偏移.要想达到理想的效果真的是各种难. 有时间,决定认真的啃一啃. 一 lin ...

  6. C# TryXXXX模式

    public static int? TrayParse(string text) { int ret; if (int.TryParse(text,out ret)) { return ret; } ...

  7. mysql 存储过程事务

    DECLARE t_error INTEGER DEFAULT ; DECLARE CONTINUE HANDLER FOR SQLEXCEPTION SET t_error=; START TRAN ...

  8. Linux网络编程9——对TCP与UDP的简易封装2.0

    具体生成动态库的操作及使用该动态库的操作请参见上篇博文.以下仅仅列出改进版本的代码. 代码 my_socket.h #ifndef __MY_SOCKET_H__ #define __MY_SOCKE ...

  9. js小技巧（二）

    //移动的图层,拖动 1.<span style='position:absolute;width:200;height:200;background:red' onmousedown=Mous ...

  10. Tomcat SSL 设置

    1. 先用如下命令生成tomcat 证书 cls rem please set the env JAVA_HOME before run this bat file SET JAVA_HOME=C:\ ...