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 ...
随机推荐
- 一些非常有用的工具类之javamail（from韩顺平）
之前编写一个类淘宝服务器时,需要使用javamail发送邮件,搜到的一个工具类,很有用. 需要下载导入:activation.jar和mail.jar package com.cx.service; ...
- T1080 线段树练习 codevs
http://codevs.cn/problem/1080/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 一行N个方 ...
- 推荐美丽的flash网页MP3音乐播放器
文章来源:PHP开发学习门户 地址:http://www.phpthinking.com/archives/491 在网页制作中.假设想在网页中插入mp3音乐来增添网页的互动感,提升用户体验度,这个时 ...
- 【翻译自mos文章】注意： ASMB process exiting due to lack of ASM file activity
注意: ASMB process exiting due to lack of ASM file activity 參考原文: NOTE: ASMB process exiting due to la ...
- 【ubuntu firefox】 Firefox is already running, but is not responding
在ubuntu下启动firefox报错 Firefox is already running, but is not responding. To open a new window, you mus ...
- hdu5371 最长回文子串变形（Manacher算法）
pid=5371">http://acm.hdu.edu.cn/showproblem.php? pid=5371 Problem Description Hotaru Ichijou ...
- Versioning with the Override and New Keywords (C# Programming Guide)
The C# language is designed so that versioning between base and derived classes in different librari ...
- cmd 批处理文件（.bat）文件的编写
1. 获取当前文件所在的路径信息 CMD获取当前目录的绝对路径 创建如下的名为 test.bat的文本文件: @echo off echo 当前盘符:%~d0 echo 当前盘符和路径:%~dp0 e ...
- 【HDU 3068】 最长回文
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=3068 [算法] Manacher算法求最长回文子串 [代码] #include<bits/s ...
- Maya Calendar
http://poj.org/problem?id=1008 按第一种记录方法算出总天数,然后按第二种记录方式输出. #include<stdio.h> #include<strin ...