核心思想:嵌套盒子中的◇超过父盒子的部分隐藏。

第一种写法:

<!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的更多相关文章

  1. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  2. 【CSS Demo】网站页面变灰

    让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用. 实现效果(点击下面的按钮): 这里放一张图片作为效果展示: 其CSS代码如下: body{ -webkit-fil ...

  3. CSS demo:flaot &amp; clear float

    1,首先,我们布局主要的div块: 例如以下代码所看到的,我们在body里面写3几个基本div块,然后设置一些基本属性: 效果图: 2,增加基本浮动 如今我们想让红色div放到绿色div右边,我们在两 ...

  4. Less:优雅的写CSS代码

    css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...

  5. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  6. Html标签第二课css

    css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div  style=& ...

  7. 常用的CSS Hack

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  8. css font-weight原理

    为什么要记录一下?因为今天我要设置一个字符加粗,然后就用font-weight:200,没有任何效果.现在看来很可笑,400才相当于normal,200怎么加粗,奇怪的是也没有变细.所以得研究一下fo ...

  9. HTML 学习笔记 CSS样式(文本)

    CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...

随机推荐

  1. cpus Vs cpu period and cpu quota

    1.  https://docs.oracle.com/cd/E37670_01/E75728/html/section-zb1_wqw_gt.html To control a container' ...

  2. 字段not null属性要放在最后面写,最少在类型后面写

    报错:create table test2211(id not null bigint ,age timestamp); 正确写法:create table test2211(id bigint no ...

  3. 用Arduino对Apple手表进行远程红外控制

    描写叙述 用于控制随意红外设备的Apple手表及iPhone应用. IOS应用发送HTTP请求至一个或多个带有以太网插板的Arduino.Arduino正在解析http请求并发送红外信号.Arduin ...

  4. org.apache.shiro.web.servlet.ShiroHttpServletRequest cannot be cast to org.springframwork.web.mult..

    在用dwz框架+spring MVC时上传文件报的错 详细错误例如以下: 事实上就是一个类型转换错误,但却研究了好长时间,怎么都不知道哪里错了.由于前面卸过一个文件上传的和这个差点儿相同,那个就没有问 ...

  5. iOS页面右滑返回的实现方法总结

    1.边缘触发的系统方法 ①系统返回按钮 self.navigationController.interactivePopGestureRecognizer.enabled = YES;  ②自定义返回 ...

  6. HDU 5311 Sequence

    Hidden String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...

  7. Vue相关开源项目库汇总 http://www.opendigg.com/tags/front-vue

    awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. 如果收录的项目有错误,可以通过 ...

  8. js 得到 radiobuttonlist和CheckBoxList 选中值

    js 得到 radiobuttonlist和CheckBoxList 选中值 得到radiobuttonlist 选中值:var CheckBoxList=document.all.optButton ...

  9. 【POJ 3263】 Tallest Cow

    [题目链接] http://poj.org/problem?id=3263 [算法] 若A和B两头牛可以互相看见,那么说明中间的牛的高度都至少比它们少1,因此,我们可以引入一个差分数组c 对于每组关系 ...

  10. 微信小程序商品展示页面(仿咸鱼)

    项目中做了一个商品发布展示的页面,记录下来 解决问题: 想在setData中更改数组具体下标中的某个值: let one = "lowMoney[" + 0 + "].m ...