Css

CSS实现标题右侧“更多”

HTML<h2><ahref="#">标题</a><span>更多…</span></h2>CSSh2{height:20px;}span{float:right;display:block;margin:-10px000;heigh...

有关于CSS的面试题和练习

如果你处在一个需要面试别人有关于CSS方面技巧和知识,一时想起来还真有点难。我把我能想出来的整理在一起,提供给大家参考。正如他们说的,大家实际工作很重要。当然,大家通过工作练习更为重要。这些都是一些练习,并不特别困难,任何人或有没有CSS经验都应该做得到。只看或只听,这样做是没有任何意义的。在CodePen中做练习就挺...
代码星球·2020-04-02

纯CSS打造Flow-Steps导航

几个要点:1.三角箭头效果是用border实现的,详细的可以google下CSS三角2.IE6下不支持border-color:transparent(透明),解决方法是先将其设置为一个不常用的颜色,然后再用IE的滤镜将其透明化(Demo中有注释)3.每个Step之间的白色间隙为了等距所以处理比较复杂,当然也可以换成m...
代码星球·2020-04-02

让网站变灰的CSS代码(支持IE、FIREFOX和CHROME)

方法1:支持IE<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html...

推荐大家使用的CSS书写规范及顺序

@设计达人网写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范、CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。CSS书写顺序1.位置属性(position,top...

书写CSS需要注意的地方

1.注意对图片设置宽高和转化为块2.文字超出的设置3.空白部分用空div来设置4.做之前考虑重用,重用部分命名不要和内容相关尽量公共(comWidthareasmallbigimglisttxtboxline)5.需要复写的地方再加上一个class用后面的class复盖前面的样式6.多个class的运用flfrclea...

CSS规则整理

一、善用css缩写规则/*注意上、右、下、左的书写顺序*/1.关于边距(4边):1px2px3px4px(上、右、下、左)1px2px3px(省略的左等于右)1px2px(省略的上等于下)1px(四边都相同)2.简化所有:*/body{margin:0}------------表示网页内所有元素的margin为0#me...
代码星球·2020-04-02

css margin的相关属性,问题及应用

byzhangxinxufrom http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48引言:margin为css中非常常用的一个属性,其所包含的内容也是很多的。本文主要分三部分对margin做一些分析叙述,包括其属性,使...

CSS复合样式

关于fontOK,我们先从font来谈起。如下一段代码:div{font-size: 14px;font-family: '5FAE8F6F96C59ED1';font-weight: bold;font-style:italic;line-height: 28px;}OK,我们...
代码星球·2020-04-02

CSS hack

  在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心,主要体现在javascript和css上面。javascript我这次就不谈了,先说说css。  为了适应不同浏览器不同的版本(版本主要就ie来说),ie这朵奇葩以前我们要兼容6-9,而现在10也出来了,在ie下我们可以写...
代码星球·2020-04-02

利用css中的border生成三角,兼容包括IE6的主流浏览器

#ladder{width:20px;height:20px;border:10pxsolid;border-color:#ff3300#0000ff#339966#00ff00;}#ladder-top{width:20px;height:20px;border:10pxsolid;border-color:#ff3...

IE下实现类似CSS3 text-shadow文字阴影的几种方法

一、开始的擦边话为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了。果然,正如网上所传言的一样,IE9浏览器确实不支持CSS3 text-shadow属性,且根据最近的IE10preview版的反馈,IE10浏览器也是不支持text-shadow属性的。至于为何不支持,就像女孩的心思一样,我也是百...

IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法1.下载ie-css3.htc 2.CSSbox{-moz-border-radius:15px;/*Firefox*/-webkit-border-radius:15px;/*Safari和Chrome*/bo...

CSS布局中一个简单的应用BFC的例子

什么是BFCBFC(BlockFormattingContext),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则。例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clearfloat也只对同一个BFC内的元素有效。什...

css 扩大点击范围

业务场景:比如某个按钮大小已经固定了,但是需求点击按钮周边就可以触发点击事件。设置一下before属性里面的height,width就是设置你要点击的范围。 rem是css3中新增加的一个单位属性(fontsizeoftherootelement),根据页面的根节点的字体大小进行转变的单位。root!!!!!...
代码星球·2020-04-01