CSS之可收缩的底部边框
简述
<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>为了实现我们的最终效果，我们需要做以下几点修改：
<div>下边框上浮- 去掉
<div>背景色 - 设置
<span>背景色为白色，覆盖边框超出文本部分。 - 分别对每一个
<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之可收缩的底部边框的更多相关文章
- css重点章节复习—布局-边框-边距-浮动 (部分)
css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...
- css写出0.5px边框（一）
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- 用div加css做表格去掉外围边框
通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...
- css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
- css图片叠加和底部定位
css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...
- css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
- [css]演示：纯CSS实现的右侧底部简洁悬浮效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- div footer标签css实现位于页面底部固定
Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...
随机推荐
- Codeforces Round #216 (Div. 2)解题报告
又范低级错误! 只做了两题!一道还被HACK了,囧! A:看了很久!应该是到语文题: 代码:#include<iostream> #include<]; ,m2=; ;i ...
- hadoop-ha QJM架构应用故障总结
部署hadoop-ha QJM架构过程我就不说了,参考 我的博客:hadoop-ha QJM架构部署故障一: namenode 报错日志如下: WARN org.apache.hadoop.hd ...
- Map：比较新增加日期的和需要删除的日期 使用方法
1.场景描述:根据在日历选择的日期,数据库来保持我们选择日期. 2.方法,硬删除的方法,每次全部删除,然后再重新添加选择的新的日期.这样导致如果需要保存create_time的情况,那么每次操作的都是 ...
- 教你如何利用xml格式的sitemap文件做好SEO
教你如何利用xml格式的sitemap文件做好SEO 浏览: | 更新:-- : 一般的网站中都有网站地图文件,它有HTML格式与XML格式,网站地图可以帮助搜索引擎抓取.帮助用户找到自己所需要的内容 ...
- 【译】 沙箱中的间谍 - 可行的 JavaScript 高速缓存区攻击
王龑 - MAY 27, 2015 原文连接 The Spy in the Sandbox – Practical Cache Attacks in Javascript 相关论文可在 https:/ ...
- HDU 1260 Tickets（简单dp）
Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- Visual Studio 自定义控件不显示在工具箱
工具＝>选项＝>Windows窗体设计器＝>常规＝>AutoToolBoxPopulate＝>True
- MyEclipse — Maven+Spring+Struts+Hibernate 整合 [学习笔记-3]
引入Struts2 在pom.xml中加入jar包 <!-- struts2 --> <dependency> <groupId>org.apache.struts ...
- Spark源码分析环境搭建
原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3868718.html 本文主要分享一下如何构建Spark源码分析环境.以前主要使用eclipse来阅读源 ...
- java实现音频转换
这里需要用到第三方 ffmpeg.exe package com.convertaudio; import java.io.File;import java.util.ArrayList;import ...