代码改变世界

随笔分类 -  HTML+CSS

CSS基线之道

2014-08-11 16:39 by 臭小子1983, 1621 阅读, 收藏,
摘要: 译者注:网页设计布局中一直比较流行网格对齐,但只是针对水平的对齐,很少或者没有涉及垂直对齐,这篇文章很详细的讲解了垂直网格,乃至基线对其的相关,而css3中的多列布局的也使其显得更为重要,因此还是很有必要去了解学习,至少也是一种思路。——————————译文——————————- 这或许是因为... 阅读全文

hasLayout的介绍和CSS中zoom:1的作用

2014-01-23 14:29 by 臭小子1983, 625 阅读, 收藏,
摘要: 一、CSS中zoom:1的作用 兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用: 1、触发IE浏览器的haslayout 2、解决ie下的浮动,margin重叠等一些问题。比如,本站使用DIV做一行两列显示,HTML代码: 1 2 推荐文章 ... 阅读全文

冲破浏览器之潜规则DOCTYPE的各种模式详解

2014-01-23 11:20 by 臭小子1983, 261 阅读, 收藏,
摘要: 摘要:所谓浏览器的“潜规则”即我们常说到的浏览器模式,而关于各种浏览器模式,网上已经有许多文档和资料了,但是很少有能够完全将几个概念阐述清楚的。大部分的资料稍显过时,有些内容可能已经不再适用了。本文中笔者将尽可能将几个概念阐述清楚,并去掉一些过时的内容,仅保留必要的干货。 想必你一定知道浏览器有个标准(Standards)模式和一个怪异(Quirks)模式,或许你还听说过有个“准标准(Almost Standards)”模式。而当你打开Internet Explorer的时候,又看到了什么浏览器模式、文档模式,还有什么兼容性视图等等… 这些都是什么?啥是浏览器模式,啥是文档模式?标准模... 阅读全文

Flash 与 div 层次(z-index)关系

2013-09-09 10:37 by 臭小子1983, 480 阅读, 收藏,
摘要: NOTE: 支持其它浏览器(firefox opera etc.) 则使用 在embed节点中加入wmode值.window 模式默认情况下的显示模式,在这种模式下flash player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只 是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较 阅读全文

css默认值汇总

2013-07-27 12:01 by 臭小子1983, 351 阅读, 收藏,
摘要: HTML标签CSS属性默认值汇总这个东西,在你需要还原默认值的时候,比较有用。开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了。以前一直在找这份文档,今天偶然在w3上看到了。除了inline和block的定义,主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size)。html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5 阅读全文

前端制作-团队命名规则

2013-06-28 15:32 by 臭小子1983, 336 阅读, 收藏,
摘要: 关于团队合作的css命名规范常用的css命名规则:头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息 阅读全文

960网页栅格化总结

2012-12-28 16:32 by 臭小子1983, 1482 阅读, 收藏,
摘要: 网页的栅格系统设计栅格系统的形成1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的, 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体和版面进行科学实验的活动,也 是栅格系统最早的雏形。栅格系统英文为“grid sys 阅读全文

HTML文档中小meta的大作用

2012-11-16 12:29 by 臭小子1983, 160 阅读, 收藏,
摘要: meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用... 阅读全文

position四个属性值的详解

2012-06-07 10:17 by 臭小子1983, 545 阅读, 收藏,
摘要: 我在以前的公司,并不怎么用position这个属性,只是在写一些特殊效果的时候才用绝对定位。这就导致我对这个属性很不理解。今天有空,百度学习了一下。留下下面的文字position的四个属性值: relative ,absolute ,fixed,static(画外音:inherit其实也是,不过... 阅读全文

精通CSS滤镜(filter)(实例解析)

2012-06-05 10:50 by 臭小子1983, 205 阅读, 收藏,
摘要: 好久没弄弄美工了,前端时间由于学校的一个小网站的老师需要网站整体为绿色风格,但是他们又不能提供相关素材,这个项目就一直拖着,需求也定不下来。后台基本功能都已经哦了,就等页面了,本来是想好好学学别的东西,巩固下Java一些基础,但是这事拖着,还是够不爽的。security框架的例子也不好弄,于是还... 阅读全文

css选择符的渲染效率

2012-05-20 15:44 by 臭小子1983, 338 阅读, 收藏,
摘要: CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间。 我们先来看一下safari和webkit的架构师David H... 阅读全文

******常见问题解决方法*******

2012-05-19 19:26 by 臭小子1983, 550 阅读, 收藏,
摘要: 一、图片下面有空隙。解决办法:给图片加display:block样式,或者vertical-align:middle样式。二、表格显示1像素边框 三、万能清除浮动另外,我见到了一个无敌的清除浮动的样式,这个是通过独立的代码来清除的。htm... 阅读全文

IE文本输入框input背景图的兼容性解决方案

2012-05-16 16:35 by 臭小子1983, 699 阅读, 收藏,
摘要: 问题描述:在IE浏览器下,设置文本框的背景图片,当文本框内文字超过文本框的宽度,且光标位于超过文本框长度的文字段的位置时,文本框的背景就会随文本框内的隐藏文字而移动。发生条件:IE浏览器文本输入框,且设置了背景图片文本框文字超过其宽度光标位于超过文本框宽度的文字后解决的方法:使用一个内联元素包含文本... 阅读全文

CSS样式字体 自动换行(强制换行)与强制不换行

2012-05-16 15:54 by 臭小子1983, 1592 阅读, 收藏,
摘要: 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行html:1正常文字的换行(... 阅读全文

flash遮挡DIV元素的问题总结

2012-05-16 15:38 by 臭小子1983, 224 阅读, 收藏,
摘要: 1、DIV被Silverlight遮挡, 加入windowless参数即可。解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性,不可能每个select都... 阅读全文

高质量的css--css hack ,行元素,块元素,居中,定位

2012-05-16 14:11 by 臭小子1983, 194 阅读, 收藏,
摘要: 1、DTD:document type definition。2、组织css base.css + common.css+pages.css 功能职责,层叠结构。base 被所有页面都引用,是页面样式所需依赖的最底层 一个common 组件 网页中高度重用的模块 一个page 非高度重用模块 可谓为... 阅读全文

块元素与内联元素

2012-05-16 13:48 by 臭小子1983, 244 阅读, 收藏,
摘要: HTML里几乎所有元素都属于内联元素或者块元素中的一种,下面先了解一下block、inline各自的特点:一、block元素的特点: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度。 例如:, , , , 和 ......二、inl... 阅读全文

【推荐】万能清除浮动样式

2012-05-16 13:46 by 臭小子1983, 279 阅读, 收藏,
摘要: 这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。这个方法来源于positioniseverything,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。01<style type="text/css">02.clearfix:after {03content:".";04display:block;05height:0;06clear:both;07visibility:hidden;08}09.clearfix {display: inline-block;}/* for IE/Mac */101 阅读全文

em和px之前关系

2012-05-16 10:21 by 臭小子1983, 153 阅读, 收藏,
摘要: 字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的... 阅读全文

基础css base.css(转)

2012-05-08 11:25 by 臭小子1983, 299 阅读, 收藏,
摘要: @charset "utf-8";/* @名称: base @功能: 重设浏览器默认样式*//* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */html{color:#000;background:#fff;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}/* 内外边距通常让各个浏览器样式的表现位置不同 */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea, 阅读全文