使用方法i{font-size: 18px;// 定义字体图标大小margin-right: 10px;// 右外边距color: #0091ff;// 定义字体图标颜色vertical-align: middle;// 垂直居中&:before{// 在最前面显示content: "\2022";}
} 前端最常用符号图标形状十进制十六进制形状图标十进制十六进制形状图标十进制十六进制形状图标十进制十六进制男♂97942642女♀97922640下拉-开启▲965025B2下拉-收起▼966025BC多选框-未选中?97442610多选框-选中?97452611多选框...
ie6和ie7#tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} IE8和IE9:root .test { color:#963\9; } /* IE9 only */ firefox@-moz-document url-prefix(){.bt_comment_ico{top:-1px;}} ie系列*html .ico_tj{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=‘http://#‘);}FILTER: progid:DXImageTransform.Microsoft.grad...
js写css()方法,记得加引号“ ”,除非是数字。如:$("#android").css({ "position": "absolute", "z-index": 3, "background": "rgba(90,100,100,0.5)"
}原文:http://www.cnblogs.com/zyjzz/p/6973453.html
请看代码: 复制代码代码如下:<div style="border:1px solid red;width:1px;height:1px;background-color:yellow;"></div> 显示的结果应该是个小点,但是在ie下就是显示一个竖长条,就是说height无效,这就是IE一bug 解决办法,添加overflow:hidden; 复制代码代码如下:<div style="border:1px solid red;width:1px;height:1px;background-color:yellow;overflow:hidden;"></div> 解决问题。原文:http://www.jb51.net/css/75908.ht...
部分HTML代码如下:<div class="wrap block"><div class="block-center">块儿居中</div></div><div class="wrap inline"><span class="inline-center">内联居中</span></div>一、absolute拔河效应(元素宽高需设定)
.block{ position: relative;
} .block-center{ position: absolute; margin: auto; /*这句要写,否则无效果*/ left: 0; top: 0; right: 0; bottom: 0;
} 利用margin(元素宽高需设定)
.block{positio...
让div里面的多行文本垂直居中的方法:div{height:100px;width:100px;border:solid 1px red;text-align:center; display:table-cell;vertical-align:middle} 下面是网上好不容易找的多种办法:看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢!/*lesliezmz整理的方法 2010-01-19*/当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算...
思路思路很简单,就是一个字写两遍,一个字只显示部分,不过不能真的把一个字写两遍。这里就需要用到CSS伪元素:before和:after,记住这个“伪元素”的“伪”字,表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符,只显示半个,而原字符显示另外一半,最后把它们拼成一个字。CSS Code CSS Code复制内容到剪贴板.hf { display: inline-block; font-size: 80px; line-height...
1、父级div定义height<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</di...
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="author" content="monicaqin"> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name...
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0; padding: 0;}.clearfix{zoom:1;/*为IE6,7的兼容性设置*/}.clearfix:after {content: ‘.‘;display: block;height: 0;clear: both;visibility: hidden;}ul li {list-style: none;float: left;margin: 50...
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有:grayscale 灰度 值为0-1之间的小数 sepia 褐色 值为0-1之间的小数saturate 饱和度 值为numhue-rotate 色相旋转 值为angl...
使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目。今天暴风彬彬将分享一个完美通过CSS实现垂直居中的方法,该方法是由aka
Yuh?发明的,这个方法也是目前暴风彬彬觉得最完美最简洁的CSS垂直居中实现方法。下面来看看暴风彬彬曾经总结的笔记,大家有不同意见请多拍砖:先来看看实例...
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;}#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; ...
找在IE下实现css3效果的圆角时找到的一个实例,没有测试,不知道使用起来怎么样,有兴趣的朋友可以自己试一下:复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>在线演示 - LHGCALENDAR</title>
<script type="text/javascript" src="http://www.qiuzhiquan.com/images/...
本文实例讲述了纯CSS实现图片列表悬停放大效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>片悬停放大</title><style>*{margin:0;padding:0;...