css
mmww1024
这个作者很懒,什么都没留下…
展开
-
网格布局技巧
类的组合VS子选择器类的组合<style type="text/CSS">.fl{float:left}.fr{float:right}.content{clear:both}.header{}.footer{clear:both}.sidebar{}.main{}.w25{width:25%}.w70{width:70%}....原创 2012-10-16 10:37:20 · 93 阅读 · 0 评论 -
划分CSS模块技巧
A.模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将他们提取出来,拆分成一个独立的模块。B.模块应在数量尽可能少的原则下,做到尽肯能简单,以提高重用性。...原创 2012-10-10 17:03:34 · 78 阅读 · 0 评论 -
如何处理上下margin
1.如果不确定模块的上下margin特别稳定,最好不要将他写到模块的类里,而是使用类的组合,单独为上下margin挂用于边距的原子类(如mt10,mb20)。2.模块最好不要混用margin-top和margin-bottom,统一使用margin-top或margin-bottom。...原创 2012-10-10 18:20:32 · 75 阅读 · 0 评论 -
低权重原则——避免滥用子选择器
1.权重规则1'.html标签的权重是12'.class的权重是103'.id的权重是100*注:a.如果CSS选择符权重相同,那么样式会遵循就近原则,哪个选择符最后定义,就采用哪个选择符的样式。 b.“就近原则”是指选择符定义的先后顺序,而不是挂class名的先后顺序,<span class="test test2">和<span cla...原创 2012-10-11 10:55:02 · 64 阅读 · 0 评论 -
CSS sprite难点
1.只能合并用于背景的图片,对于<img src="" />设置的图片,不能合并到CSS sprite中,如合并将影响可读性。 2.对于横向和纵向都平铺的图片,也不能用。若横向平铺,只能合并成一张竖直排列的大图;若纵向平铺,只能合并成水平排列的大图。 3.图片紧凑且不影响扩展性。 4.是否用此技术,取决于网站的流量。...原创 2012-10-11 11:12:58 · 62 阅读 · 0 评论 -
CSS hack
1.选择符前缀法*html .test{width:60px;} /*only for ie6*/*+html .test{width:70px;} /*only for ie7*/ 2.样式属性前缀法.test{*width:70px;_width:60px;} /*"_"只在ie6下生效,“*”在ie6和ie7下生效*/...原创 2012-10-12 12:34:51 · 62 阅读 · 0 评论 -
html居中
1.水平居中a.行内元素的水平居中;给父元素设定text-align:center;b.定宽的块级元素的水平居中;给其设定margin:0px auto;c.不定宽的块级元素的水平居中;1.用table标签,设其为margin:0px auto;2.变块级元素为行内元素,3.设父元素为:float:left;position:relative;left:50%; ...原创 2012-10-15 17:22:17 · 82 阅读 · 0 评论 -
解决chrome里禁用浏览器文字大小调整的功能
Chrome浏览器在解析字体大小时,最小字号为12px,小于这个大小的字号都会解析成12px,当你把一行文字设为10px时Chrome浏览器会按12px来解析。 解决这个问题的方法是用Chrome的私有属性禁用浏览器文字大小调整的功能。html { -webkit-text-size-adjust:none; } ...原创 2013-01-30 13:50:26 · 405 阅读 · 0 评论 -
去除chrome谷歌浏览器input自带边框
chrome谷歌浏览器input会自带边框,这个很讨厌,你可以更改这个边框样式,也可以直接出去掉这里我们介绍一个去除chrome谷歌浏览器input自带边框样式的方法在css中加入代码: 1input,button,select,textarea{outline:none}2textarea{resize:none}...原创 2013-02-21 11:34:30 · 1961 阅读 · 0 评论 -
移动前端工作的那些事---前端制作之自适应制作篇 [转]
一、响应式布局 相应式布局的核心内容其实就是使用CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。 <link rel=”stylesheet” type=”text/css”media=”screen and (max-device-width: 400px)”href=”tinyScreen.css” /...原创 2013-02-26 17:31:01 · 83 阅读 · 0 评论 -
用百分比设置图片的高宽
在http://www.w3cschool.cn/t8640.html?f=csse_dim_height_percent网站上看到这个例子,不明白为什么图片高度50%反而比原图要大。查阅资料后,原因如下:百分比是相对于父元素的,例子中父元素的高度是多少图片的高度就是其的50%,这样一来就明了了。谢谢:http://www.web589.com/posts/1189.html...原创 2013-08-14 12:49:16 · 389 阅读 · 0 评论 -
去掉链接后的虚线框? onfocus=”this.blur()” 的利与弊【转】
杭州最美的季节里,淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学一起面对面交流网站无障碍访问方面的问题。杨 同学使用电脑必须使用读屏软件,就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页面时,他对我们前端的同学特别的强调:他最深恶痛绝的 就是页面链接上有 onfocus=”this.blur()” 这句代码,这从何说起呢?(图一)各 位同学...原创 2014-07-22 10:09:10 · 263 阅读 · 0 评论 -
CSS使用技巧【转】
作者: 阮一峰日期: 2010年3月31日最近,我开始升级网志了。在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。未来,本文将持续更新。1. 文字的水平居中将一段文字置于容器的水平中点,只要设置text-align属性即可: t...原创 2016-07-07 15:31:34 · 106 阅读 · 0 评论 -
【转】img、input到底是行内还是块级元素?
一、img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。 行内非替换元素,例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和margin left、right改变宽度。 二、在文档类型定义(DTD)中对不同...原创 2016-11-15 14:14:47 · 627 阅读 · 0 评论 -
【转】clearfix终极版
终极版一:1234567.clearfix:after { content:"\200B"; display:block; height:0; clear:both; } .clearfix {*zoom:1;}/*IE/7/6*/ 解释...原创 2016-11-15 15:40:33 · 149 阅读 · 0 评论 -
【转】清除浮动解决方案
两种情况清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置clear为both就可以了,而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单,而空标签法清除子元素浮动会增加额外标签,所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。为什么要清除浮动...原创 2017-03-21 16:40:58 · 78 阅读 · 0 评论 -
关于层级z-index
今天找一个很诡异的bug就是ie7下层级关系的问题,我们都知道,ie7不仅孩子大,还必须他的爸爸也大才可以生效,但是我设置爸爸大后,还是不行,然后我就发现这个孩子的值比爸爸的还要大,是不是孩子不可以大于爸爸呢,果然,孩子小于爸爸后,爸爸1大于爸爸2 就生效了。这篇文章不错~http://www.neoease.com/css-z-index-property-and-layering...原创 2014-11-18 14:47:53 · 96 阅读 · 0 评论 -
CSS Table属性
属性 描述 border-collapse设置是否把表格边框合并为单一的边框。border-spacing设置分隔单元格边框的距离。(仅用于 "separated borders" 模型)caption-side设置表格标题的位...原创 2012-10-10 10:40:15 · 146 阅读 · 0 评论 -
用特殊符号代表图片
用特殊符号,比如:▲▼●◆■★▶◀♠♥♣☎❤◤☄☢❉☂❁✿❉*等,制作小图标,这些图标都是用文本写的,可以设置其背景颜色,制作出非常精巧的效果。如下图:...原创 2013-01-11 12:24:00 · 754 阅读 · 0 评论 -
background与background-images区别
background属性是整体设置的,background image是background的属性之一,background的属性包括background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position,比如.style1{background:beige ur...原创 2012-06-13 15:48:43 · 480 阅读 · 0 评论 -
编写高效的CSS选择器 (转)
高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题。有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能。这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候。下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站。但是,实践出真理...原创 2013-04-03 11:55:08 · 95 阅读 · 0 评论 -
解析vertical-align属性
vertical-align该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。即:1.只对行内元素起作用(若属性中有display:inline-block;或float此属性都不起作用) 2.可以定义图片与文字的对齐方式 3.表格中...原创 2012-08-29 11:12:48 · 172 阅读 · 0 评论 -
说说浮动
float和position:absolute;position:fixed;均会把元素变成display:inline-block;原创 2012-08-29 16:06:51 · 85 阅读 · 0 评论 -
做页面技巧
一、做页面前要干的几件事:先写好骨架(即:html)切图(能用css就不用图片)确定整体几种颜色,链接的颜色(点击前后,hover时)根据需求定好宽度,是否要overflow:hidden;再美化(即css)二、注意事项尽量用margin定位,不用浮动和绝对,为后续重构做准备尽量用base.css里面的样式,没有再单定义设宽时,最好用百分比,适应性比较器...原创 2012-08-29 17:01:19 · 109 阅读 · 0 评论 -
Web前端开发规范文档
规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小...原创 2012-08-30 10:12:27 · 62 阅读 · 0 评论 -
css中导入样式表和外链接样式表区别
1. link标签是属于xhtml范畴,而@import则是css2.1中特有的。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。 2. 加载的顺序的区别,link加载的css时,是一种并行(没有尝试是否是这样)加载CSS方式,而@import则在整个页面加载完成后才加载。3. 兼容性的区别,因@impo...原创 2012-08-30 10:40:07 · 234 阅读 · 0 评论 -
css书写要点
1.添加注释注释范围: 1)每个文档对应一个文档注释(方便后期维护和管理) 主要注释说明:文档创建人,时间,内容等 2)属性注释说明:css hack,特殊属性等 3)功能注释说明:默认样式,按钮,弹出框等 2.css代码顺序css文档的顺序共用的代码样式放在文档最前面...原创 2012-08-30 11:05:57 · 60 阅读 · 0 评论 -
IMG sprites 与CSS sprites
看了这篇文章http://www.cnblogs.com/radom/archive/2011/05/18/2050202.html收获不少,现总结如下:浏览器的加载顺序是先加载html标签,后加载css,所以对于比较重要的图片内容,用img比较好基于对特殊人群的考虑,导航等重要信息,必须要用img来写,也就是说要用IMG sprites整合图片...原创 2012-08-31 11:43:38 · 135 阅读 · 0 评论 -
checkbox模仿radio
<html><head><meta charset="UTF-8"><title>checkbox模拟radio</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1原创 2012-09-03 16:01:49 · 107 阅读 · 0 评论 -
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><原创 2012-09-03 16:43:46 · 1457 阅读 · 0 评论 -
TABLE自动换行/支持中英文
数字和英文的时候,TABLE中的TD就会被拉长.解决方法是添加<td style=”word-break:break-all”>用表格做网页排版的时候,一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象。总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了。table{table-layout: fixed;}td(w...原创 2012-09-11 18:02:54 · 262 阅读 · 0 评论 -
box-shadow
1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性:Opera: 不知道是从哪个版本开始支持的,我在发这篇文章测试的时候,正好更新了Opera到最新的10.53版本,已经支持box-shadow属性。firefox通过私有属性-moz-box-shadow支持。Safari和Chrome通过私有属性-webkit-box-shadow...原创 2012-09-12 17:45:10 · 117 阅读 · 0 评论 -
针对谷歌浏览器Chrome的CSS hack
针对Chrome和Safari等Webkit核心浏览器的CSS hack代码: @media screen and (-webkit-min-device-pixel-ratio:0) { /* Webkit内核兼容CSS */ } 示例: @media screen and (-webkit-min-device-pixel-ratio:0) { .font1...原创 2012-12-24 16:57:59 · 359 阅读 · 0 评论 -
css实现强制不换行/自动换行/强制换行
强制不换行div{white-space:nowrap;}自动换行div{word-wrap: break-word;word-break: normal;}强制英文单词断行div{word-break:break-all;}===================================...原创 2012-12-24 17:29:05 · 89 阅读 · 0 评论 -
最全的CSS浏览器兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧1.div的垂直居中问题 vertical-align:middl...原创 2012-12-24 17:51:26 · 49 阅读 · 0 评论 -
改变鼠标指针图案
可以使用css来控制123.class { cursor:url('路径'),auto;}cursor是支持自定义图标的只要定义该元素的样式,给定路径后,就可以加载。不过要注意的是,考虑到IE的兼容性问题,最好使用ico或cur格式的文件,分辨率最好是32×32...原创 2016-04-01 15:29:31 · 799 阅读 · 0 评论