当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了,我也是第一次看到这个属性,之前不知道这个属性更不用说使用了,原来这个CSS属性是用来水平居中的,fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧.在不设置宽度,并且元素中含用float:left情况下居中,先…

更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线--------------------------------------------- 先上效果图 图中链接:inline-block元素之间存在空白间距 图中链接:Horizontally Centered Menus with no CSS hacks 实现代码: <span style="f…

1. 在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程. 要想使用这个功能,你需要用到三种元素:一个:before 或 :after CSS伪类样式, .content属性,和一个带有你想使用的HTML属性名称的attr()表达式.例如,想去显示<h3>标题上的data-prefix属性的值,你可以写成这…

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券. CSS3 径向渐变和线性渐变是很相似的,首先来看其语法: -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> |…

H5移动前端开发常用高能css3汇总   1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强   html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单 -webkit-user-select: none; //禁止长按复制选择 -webkit-tap-highlight-color: rgba(0,0,0,0);//禁止触摸a标签高亮 这个特别实用 }   2.   行级,块级元素居中显示      以前我们要将文字居中显示的做法是 t…

终于找到了一个好方法,使用:not(:last-of-type)简单方便,再也不要麻烦的单独使用:last-of-type了,不错! 应用场景:平时我们的列表一般都会有分割线,但是最后一个列表没有分割线等. <ul class="posts"> <li>123123</li> <li>123123</li> <li>123123</li> <li>123123</li> <…

为元素添加内容 content属性术语内容生成和替换模块,该属性能够为指定元素添加内容. 取值如下 normal:默认值 string:文本内容 attr():插入元素的属性值 uri():插入一个外部资源 counter():计数器 none:无任何内容 我们可以插入填充一张图片 div { content: url(images/bg2.jpg); } 也可以经常写在before或者after的伪类中 div:before { content:"当前浏览器支持content属性";…

<-----------------------------------------------文字加在内容后面-----------------------------------------------> css: a:after{ content: "我在你后面";} html: <a>123456789</a> <-----------------------------------------------文字加在内容前面-------…

查看效果: http://www.daqianduan.com/example?pid=6117 html代码: <div class="main"> <div class="view view-tenth"> <img src="http://t-1.tuzhan.com/705648b6987e/c-2/l/2014/04/12/14/6bb27bdd03e3441283b0030e22789abe.jpg" /…

text-overflow:clip | ellipsis 默认值:clip 取值: clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉. ellipsis: 当对象内文本溢出时显示省略标记(...). 注意同时要加white-space: nowrap;text-overflow: ellipsis;…