简述

<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. 2013年优秀jQuery插件

    今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...

  2. 改写Form的submit

    表单的一些应用常识: 1.在用户第一次提交完表单后应防止用户不耐烦而多次点击submit按钮,需要在onsubmit事件中制止用户的重复行为. 2.不要简单粗暴的用reset()重置表单,如果用户不想 ...

  3. 安装WINCC6.0的步骤

    安装WINCC6.0/6.2的步骤 (XP不能是HOME版的!!!) 1.    首先安装SQL FOR WINCC6.0/6.2这个软件(如果你的系统已安装此软件相关版本可能提示安装失败请卸载后再重 ...

  4. Javascript nextElementSibling和nextSibling

    function next(ele) { if (typeof ele.nextElementSibling == 'object') { return ele.nextElementSibling; ...

  5. hdu 4345 Permutation 记忆化搜索

    思路:实际上求的是和小于等于n的质数的种类数!!! 代码如下: #include<iostream> #include<stdio.h> #include<algorit ...

  6. 传入sql数组字符串，输出table

    CREATE function [dbo].[split](@aString varchar(),@pattern varchar()) returns @temp table([Sid] [, ) ...

  7. cocos2d 播放GIF动画类

    cocos2d 播放GIF动画类 以前项目中曾经用到过,后来因为GIF图像的质量较差,被弃用了,把公司名字去掉分享下,根据网上资料改编的cocos2d-iphone版的. // // CCSprite ...

  8. java消息队列

    来个个人通俗的解释吧.消息队列,顾名思义 首先是个队列.队列的操作有入队和出队 也就是你有一个程序在产生内容然后入队(生产者) 另一个程序读取内容,内容出队(消费者) 我想你应该是缺乏一个使用场景. ...

  9. 纯CSS实现的右侧底部简洁悬浮效果

    我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...

  10. Java-数据结构与算法-二分查找法

    1.二分查找法思路:不断缩小范围,直到low <= high 2.代码: package Test; import java.util.Arrays; public class BinarySe ...