css study
---恢复内容开始---
html{filter:expression(document.execCommand("BackgroundImageCache",false,true))
_background-image:url(about:blank);_background-attachment:fixed}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}
::-moz-focus-inner{padding:0;border:0}
2：左右浮动的布局方式
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
// 需清浮动
.main{ width: 400px; height: 254px; overflow: hidden;zoom:;}
.left{ float: left; width: 120px; margin-right: 20px; height: 250px; border: 2px solid #f00;}
.right{ height: 250px; margin-left:140px; border: 2px solid #f00;}
// 不需要清浮动
.main{ position: relative; padding-left: 120px; width: 280px; height: 254px;}
.left{ position: absolute; left: 0px; top: 0px; width: 120px; height: 250px; border: 2px solid #f00;}
.right{ margin-left: 20px; height: 250px; border: 2px solid #f00;}
3：css命名规范
header,container(容器),
mainNav(主导航)，subNav（二级导航），menu（菜单），sidebarA（左边栏），column（栏目），wrapper，banner（广告），
main（主体），footer，tag（标签），msg（提示信息），tip（小技巧），faqs（常见问题），keyword（关键词），forum（论坛）
html命名规范：Left.tpl,SerialTemplate:首字母大写
4：css
master.css(主要的css)，base.css(公用)，themes.css(主题)，print.css(打印)
5：单位（px,em）
5.1：IE无法调整用px作为单位的字体大小,国外的大部分网站能够调整的原因在于其使用了em作为字体单位,Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核).
5.2:像素px是相对于显示器屏幕分辨率而言的。em相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。将body{font-size:62.5%}则1em=10px，1.2em=12px；
5.3:但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。
---恢复内容结束---
html{filter:expression(document.execCommand("BackgroundImageCache",false,true))
_background-image:url(about:blank);_background-attachment:fixed}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}
::-moz-focus-inner{padding:0;border:0}
2：左右浮动的布局方式
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
// 需清浮动
.main{ width: 400px; height: 254px; overflow: hidden;zoom:;}
.left{ float: left; width: 120px; margin-right: 20px; height: 250px; border: 2px solid #f00;}
.right{ height: 250px; margin-left:140px; border: 2px solid #f00;}
// 不需要清浮动
.main{ position: relative; padding-left: 120px; width: 280px; height: 254px;}
.left{ position: absolute; left: 0px; top: 0px; width: 120px; height: 250px; border: 2px solid #f00;}
.right{ margin-left: 20px; height: 250px; border: 2px solid #f00;}
3：css命名规范
header,container(容器),
mainNav(主导航)，subNav（二级导航），menu（菜单），sidebarA（左边栏），column（栏目），wrapper，banner（广告），
main（主体），footer，tag（标签），msg（提示信息），tip（小技巧），faqs（常见问题），keyword（关键词），forum（论坛）
html命名规范：Left.tpl,SerialTemplate:首字母大写
4：css
master.css(主要的css)，base.css(公用)，themes.css(主题)，print.css(打印)
5：单位（px,em）
5.1：IE无法调整用px作为单位的字体大小,国外的大部分网站能够调整的原因在于其使用了em作为字体单位,Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核).
5.2:像素px是相对于显示器屏幕分辨率而言的。em相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。将body{font-size:62.5%}则1em=10px，1.2em=12px；
5.3:但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。
6：css选择器
<body data-spy="scroll"></body>:$('[data-spy="scroll"]')
$('a[href="#profile"]');$('a:first');$('a:last');$('a:eq(2)');
7：清除浮动：
.clearfix:after{ content:".",display:block;height:0;clear:both,visibility:hidden;_zoom:1;}
8:渐变：
.a{
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffd1d1d1, endColorStr=#ffa1a1a1);
background:#a1a1a1;
background:-webkit-gradient(linear,left top,left bottom,from(#d1d1d1),to(#a1a1a1));
background:-webkit-linear-gradient(top,#d1d1d1,#a1a1a1);
background:-moz-linear-gradient(top,#d1d1d1,#a1a1a1);
background:-o-linear-gradient(top,#d1d1d1,#a1a1a1);
background:linear-gradient(to bottom,#d1d1d1,#a1a1a1);
text-shadow:0 0 1px rgba(185,21,74,.23)
}
.b{display:inline-block;*display:inline;*zoom:1;}
.a{ cursor:not-allowed}
css study的更多相关文章
- Css Study - 纵向Menu - By html and Css
http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS HTML <div id="leftmenu"&g ...
- Css Study - 横向MENU
http://cssmenumaker.com/menu/tabbed-chrome-and-blue HTML <div id="topMenu"> <ul&g ...
- Css Study - Top Menu in Header 横向间隔的菜单
.shortcut ul li { display: inline; } CSS <style> ol, ul { list-style: none; } html, body, ul, ...
- CSS易混淆知识点总结与分享－定位与布局
CSS定位有四种模式:static.relative.absolute.fixed,其它static是默认值,下面分别讲解下各自的特点: static:静态定位,处于动态布局流中,按照页面中的各元素先 ...
- css less
LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LESSCSS可以在多种语 ...
- CSS学习（一）
/*</br> * color</br> * background-color background-image background-repeat background-po ...
- less-符号之逗号，空格，父级选择器
Less符号 逗号 example: .test() { box-shadow+: inset 0 0 10px #555; } .study { .test(); box-shadow+: 0 0 ...
- Less-mixin判断（守卫）二
mixin卫士--判断 或与且语法 且:()and() 或:(),() --且 examlpe: .test(@a) when (isNumber(@a)) and (@a>=5){ font- ...
- Less-mixin判断（守卫）一
mixin卫士--判断 类似于JavaScript的if/else example: .test(@a) when (@a>10){//当大于10 font-size:18px; } .test ...
随机推荐
- 将复杂查询写到SQL配置文件--SOD框架的SQL-MAP技术简介
引言 今天看到一片热门的博客, .NET高级工程师面试题之SQL篇 ,要求找出每一个系的最高分,并且按系编号,学生编号升序排列.这个查询比较复杂,也比较典型,自从用了ORM后,很久没有写过SQL语句了 ...
- 签名 cd
http://blog.sina.com.cn/s/blog_618199e60101uc7w.html
- NPOI MVC 模型导出Excel通用类
通用类: public enum DataTypeEnum { Int = , Float = , Double = , String = , DateTime = , Date = } public ...
- ffmpeg总结整理
ffmpeg总结整理参考链接: http://www.cnblogs.com/youngt/p/5754415.html
- TimeQuest学习
1.物理时钟特性:clock skew(时钟差),jitter(拉动),clock latency(时钟潜伏),这些物理时钟特性又称为uncertainl--非定性,或非理想性. clock skew ...
- Block回调
•Block的定义 •Block.委托.通知.回调函数,它们虽然名字不一样,但是原理都一样,都是"回调机制"的思想的具体实现 •前面的代理模式的项目改为Block回调实现 ...
- flexbox布局
一.侧轴对齐伸缩项目--align-items 它充许调整伸缩项目在侧轴(也就是y轴)的对齐方式,主要包括以下几个值: flex-start/baseline:伸缩项目在侧轴起点边的外边距紧靠住该行在 ...
- Activity之间传递参数（一）
-------siwuxie095 传递简单数据 (1)首先创建一个项目:SendArgs (2)选择API:21 Android 5.0 (3)选择 Empty Activity (4)默认 (5) ...
- python autopep8
安装 使用pip install autopep8或easy_install 都可以. 使用 autopep8 -i -a 要检查的py文件路径 更多参数使用可以参考:https://github.c ...
- webpack 的简单使用
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 } p. ...