CSS——◇demo
核心思想：嵌套盒子中的◇超过父盒子的部分隐藏。
第一种写法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:30px;
background-color:#eee;
position:relative;
}
i,s{
text-decoration:none;
font-style:normal;
}
i{
position:absolute;
right:0;
top:12px;
width:10px;
height:7px;
background-color:aliceblue;
font:400 13px/13px "微软雅黑";
overflow:hidden;
}
s{
position:absolute;
top:2px;
}
</style>
</head>
<body>
<div>
<i><s>◇</s></i>
</div>
</body>
</html>
第二种写法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:30px;
background-color:#eee;
position:relative;
}
i,s{
text-decoration:none;
font-style:normal;
}
i{
position:absolute;
right:0;
top:12px;
width:10px;
height:7px;
background-color:aliceblue;
font:400 13px/13px "微软雅黑";
overflow:hidden;
}
s{
display:block;
margin-top:-6px;
}
</style>
</head>
<body>
<div>
<i><s>◇</s></i>
</div>
</body>
</html>
效果：
注释：s标签必须转成块级元素，display的值必须是block。
CSS——◇demo的更多相关文章
- 【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三 通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
- 【CSS Demo】网站页面变灰
让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用. 实现效果(点击下面的按钮): 这里放一张图片作为效果展示: 其CSS代码如下: body{ -webkit-fil ...
- CSS demo:flaot & clear float
1,首先,我们布局主要的div块: 例如以下代码所看到的,我们在body里面写3几个基本div块,然后设置一些基本属性: 效果图: 2,增加基本浮动 如今我们想让红色div放到绿色div右边,我们在两 ...
- Less:优雅的写CSS代码
css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...
- CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- Html标签第二课css
css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div style=& ...
- 常用的CSS Hack
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- css font-weight原理
为什么要记录一下?因为今天我要设置一个字符加粗,然后就用font-weight:200,没有任何效果.现在看来很可笑,400才相当于normal,200怎么加粗,奇怪的是也没有变细.所以得研究一下fo ...
- HTML 学习笔记 CSS样式（文本）
CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
随机推荐
- CF576D. Flights for Regular Customers
n<=150个点,m<=150条路,每条路Ai,Bi,Di表示Ai到Bi有一条有向边,使用他前至少要走Di条路,问1到n最少走几条路. 又是n^4过150的题.... 不同于传统的最短路, ...
- 如何在eclipse中用maven编译
在eclipse中用maven编译的方法: 在项目中的“pom.xml”文件上点击右键,在弹出的菜单中选择“Run AS”à“Maveninstall”来编译和生成项目.如下图所示: 在编译和生成过程 ...
- C/C++异常处理机制
1.C语言异常处理 1.1 异常终止 标准C库提供了abort()和exit()两个函数,它们可以强行终止程序的运行,其声明处于<stdlib.h>头文件中.这两个函数本身不能检测 ...
- STM8S PWM 应用 呼吸灯
//主功能接受:使用MCU STM8S105C6 的PWM通道2 PC2 来做呼吸灯 已经验证OK,呵 //呵,这个PWM设置刚開始用还是有点麻烦,由于是自己摸索.花点时间.还是解决了 . //所用子 ...
- HDU 2489 Minimal Ratio Tree (dfs+Prim最小生成树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2489 Problem Description For a tree, which nodes and ...
- addSubview和insertSubview 区别
子视图是以栈的方式存放的. 每次addsubview时都是在最后面添加. 每次在addsubview前和addsubview后可以看看[self.view.subViews count]: 你看看你 ...
- Music information retrieval
Music information retrieval - Wikipedia https://en.wikipedia.org/wiki/Music_information_retrieval Mu ...
- cacheed 限制 4节点 3000万 es 批量删除 shell脚本练习 elasticsearch_action
文件分割 "www.laiwunews.cn/xinxi/25324717.html""www.zznews.cn/xinxi/10411214.html"&q ...
- ALSA声卡驱动中的DAPM详解之七：dapm事件机制（dapm event）
前面的六篇文章,我们已经讨论了dapm关于动态电源管理的有关知识,包括widget的创建和初始化,widget之间的连接以及widget的上下电顺序等等.本章我们准备讨论dapm框架中的另一个机制:事 ...
- 01-S3C2440学习入门概念+环境搭建【转】
本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/54754812 一.心得: 这两年学过很多东西,有点杂,总感觉不够踏实,于是准备写 ...