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 ...
随机推荐
- O - Treats for the Cows 区间DP
FJ has purchased N (1 <= N <= 2000) yummy treats for the cows who get money for giving vast am ...
- Java的动态代理(DynamicProxy)
代理的概述 代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问.代理类负责为委托类预处理消息,过滤消息并转发消息,以及进行消息被委托类执行后的后续处理. 代理模式UML图 ...
- 常见mysql的数据迁移
1.处理把A表中的部分列复制到B表中主要处理同一库. UPDATE T_EVENT EVE, T_IPMAP MAP SET EVE.c_staff_code = MAP.c_staff_code, ...
- gradle: 修改gradle-xx-bin.zip下载地址
进入gradle/wrapper/目录,修改gradle-wrapper.properties文件, 将distributionUrl修改为自己的下载地址即可. 另外修改gradle reposito ...
- vmware里面的linux怎么和windows相互传文件
我们常常遇到这样的问题.高版本号的vmware遇到低版本号的linux.使用起来就比較抠脚,比方低版本号的linux安装在高版本号的vmware里. 1.不能全屏显示虚拟机 2.每次切换出来.总要按一 ...
- 关于HuffmanCoding的简单分析
1.what's problem we faced? /** * Q: what's problem we faced? * * A: Data compression is still ...
- Java课程设计——人事管理系统
主界面代码: package PersonSystem; import java.awt.*; import java.awt.event.*; import javax.swing.*; impor ...
- C# winform通过按钮上移下移 解决了datasource绑定问题
事件代码: private void btn_frmDicType_MoveUp_Click(object sender, EventArgs e) { int lstLength = this.ls ...
- SQL 2005批量插入数据的二种方法
SQL 2005批量插入数据的二种方法 Posted on 2010-07-22 18:13 moss_tan_jun 阅读(2635) 评论(2) 编辑 收藏 在SQL Server 中插入一条数据 ...
- 【Codevs1288】埃及分数
Position: http://codevs.cn/problem/1288/ Description 在古埃及,人们使用单位分数的和(形如1/a的, a是自然数)表示一切有理数. 如:2/3=1/ ...