CSS - 随笔分类 - 月阳

"编写高质量代码"一书笔记

摘要：总结css架构结构 : base : 共用样式 common: 通用控件样式 page: 页面级样式js 架构结构：base 位于三层最底层，职责一是封装不同浏览器下js的差异，提供统一的接口，依靠它来完成跨浏览器兼容的工作，职责二是扩展js语言底层提供的接口，让它提供更多更为易用的接口，ba... 阅读全文

posted @ 2015-01-04 10:38 月阳阅读(195) 评论(0) 推荐(0)

pc, 手机全屏

摘要：全屏1 div{ position:absolute/relative/fixed; top:0; bottom:0; left:0; right:0;}2 Document 1111pc,手机全屏IOS Android4 2种方法不行。阅读全文

posted @ 2014-09-19 18:06 月阳阅读(163) 评论(0) 推荐(0)

转载,网站前端模块化开发策略研究

摘要：引言当今互联网飞速发展，网络用户的需求变化既快又大，且不可捉摸，大部分网站的更新周期都是以日、小时甚至分钟为单位。在这种情况下，网站的前端就成了变化最频繁的部分。随着互联网公司对前端开发的逐渐重视，前端开发人数也越来越多，可是，技术人员的投入总是有限的。面对需求的快速变化，引发了很多如前端编码规... 阅读全文

posted @ 2014-09-02 16:27 月阳阅读(338) 评论(0) 推荐(0)

转载css层级优先级。

摘要：解读CSS样式优先级(修改门户自定义样式必读)一、什么是CSS优先级？所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。当同一个元素（或内容）被多个CSS选择符选中时，就要按照优先权取舍不同的CSS规则。二、为什么要研究CSS优先级？CSS优先级与门户系统有什么关系？研究CSS优先级的主要目的就是解决多个CSS选择符选中同一个元素时的冲突问题。在门户系统中，为了保证所有的页面能正常展示，几乎所有的微件及页面都有基础CSS样式，但是门户系统是开放的、个性化的平台，大部分样式都给予了用户修改权，这时自定义样式和门户基本样式就有可能产生冲突，合理使用CSS优先级可以完美的解决这些冲突。三阅读全文

posted @ 2014-02-18 15:41 月阳阅读(5257) 评论(0) 推荐(0)

各种浏览器hack

摘要：Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码阅读全文

posted @ 2014-01-14 14:56 月阳阅读(694) 评论(0) 推荐(0)

前端网页性能最佳实践

摘要：你愿意为打开一个网页等待多长时间？我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站，博客，你的网页响应速度如何呢？在这篇文章中我们来介绍一下提高网页性能的最佳实践，以及相应的问题解决方案，让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应速度，对自己的网站更有信心。最佳实践最佳实践我们引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛击这里。下面我们分门别类将每条的关键点总结一下。网页内容减少http请求次数减少DNS查询次数避免页面跳转缓存Ajax延迟加载提前加载减少DOM元素数量根据域名划分内容减少iframe数量避免阅读全文

posted @ 2013-12-31 16:23 月阳阅读(237) 评论(0) 推荐(0)

DIV使用tabindex获得事件详解移动div

摘要：添加 tabindex='-1' 属性；默认：获取不到焦点事件（blur）1可以获取焦点事件（blur）1具体详解：先看：W3C关于onfocus的部分 The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BU 阅读全文

posted @ 2013-12-31 16:21 月阳阅读(2506) 评论(0) 推荐(0)

arrow css

摘要：无标题文档.tri {position: absolute;left: -21px;top: 40px;width: 0;height: 0;line-height: 0;font-size: 0;border: 12px solid #e5e5e5;border-color: transparent #e5e5e5 transparent transparent;border-style: dashed solid dashed dashed;display: block;}.show {display: block;left: 230px;top: 0;width: 224px;line- 阅读全文

posted @ 2013-12-25 15:58 月阳阅读(297) 评论(0) 推荐(0)

背景颜色透明

摘要：一般情况下边框必须存在一个背景颜色，即使不刻意定义，也会调用默认值。如果想使得边框颜色透明，在其余浏览器下还比较简单，直接使用：border-color:transparent;但是在IE6 下上面的办法却不行，我们可以用以下的HACK办法，使得边框颜色透明：_border-color:tomato;_filter:chroma(color=tomato);或者:_border-color:#FFFFFF;_filter:chroma(color=#FFFFFF);或者：（不知道什么情况下会用到这种，除非上面的代码无效，呵呵 ~)_border-color:#FFFFFF;_filter: 阅读全文

posted @ 2013-12-25 14:13 月阳阅读(368) 评论(0) 推荐(0)

@media用法。

摘要：@media版本：CSS2　兼容性：IE5+语法：@mediasMedia{sRules}说明：sMedia:　指定设备名称。请参阅附录：设备类型sRules:　样式表定义指定样式表规则用于指定的设备类型。请参阅link对象的media属性（特性）。示例：//设置显示器用字体尺寸@mediascreen{BODY{font-size:12pt;}}//设置打印机用字体尺寸@mediaprint{@import"print.css"BODY{font-size:8pt;}} 阅读全文

posted @ 2013-12-24 16:52 月阳阅读(547) 评论(0) 推荐(0)

转载网页打印时设置A4大小

摘要：最近开发项目时遇到了网页打印的问题，这是问题之二，打印宽度设置在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。经过我仔细的测试，发现了网页打印中，默认采用的是96dpi，并非传闻的72dpi A4纸张的尺寸是210×297mm，按1英寸=25.41mm换算，即8.264×11.688英寸所以，A4纸96dpi下的分辨率是794×1123，这就是我们在制作网页的时候需要的象素。但是打印机是无法满幅打印的，总要有页边距，所以我们在制作网页的时候必须减去页边距。以下是我测试的各种页边距下，A4纸对应的象素尺寸：打印页阅读全文

posted @ 2013-12-20 09:23 月阳阅读(440) 评论(0) 推荐(0)

word-wrap word-break white-space 用法。

摘要：一、word-wrap使用：语法： word-wrap ： normal | break-word取值说明：1、normal和break-word，其中normal为默认值，当其值为normal控制连续文本换行(允许内容顶开容器的边界，换句话说内容可以撑破容器）；2、break-word将内容在边界内换行（不截断英文单词换行，截断英文单词换行需要使用word-break:all属性）,我们先来看两个简单的实例：二、word-break使用：上面我们使用word-wrap:break-word只能在内容中换行，而不能实现词内换行，前面提到过如果需要词内换行，我们需要使用word-break属.. 阅读全文

posted @ 2013-12-18 13:44 月阳阅读(1854) 评论(0) 推荐(0)

firefox hack

摘要：@-moz-document url-prefix(){ css选择器 { css样式设置 } } 阅读全文

posted @ 2013-12-17 18:06 月阳阅读(112) 评论(0) 推荐(0)

css+div如何解决文字溢出

摘要：看到标题你一定很轻易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为似乎还有很多人不记得碰到这样的情况该如何处理。首先，先解释一下，一般用div+css的容器中文字超出长度会浮动到框外或者把框撑大，这个一般容易解决，但是我今天就遇到了这样的问题：在 IE6下测试页面没反应，在IE8下测试页面却正常处理了溢出文字，我就郁闷了，这个溢出处理不是IE特有的吗？怎么IE6却不正常呢。后来网上查了才知道，原来IE6只支持div内写上溢出处理才有用，而IE6以上版本写在里面才可以，所以我把相同的溢出处理代码写在了div中和中就正常了，汗啊！！！一下是我的阅读全文

posted @ 2013-12-17 16:13 月阳阅读(1257) 评论(0) 推荐(0)

选择器效率顺序

摘要：选择器有一个固有的效率，顺序如下：id选择器（#myid）类选择器（.myclassname）标签选择器（div,h1,p）相邻选择器（h1+p）子选择器（ul > li）后代选择器（li a）通配符选择器（*）属性选择器（a[rel="external"]）伪类选择器（a:hover,li:nth-child）上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最底。阅读全文

posted @ 2013-12-10 11:05 月阳阅读(190) 评论(0) 推荐(0)

ie6 ie7 绝对定位相对定位层被遮住

摘要：relative 上加上z-index有多个，则z-index递减， absolute层显示则不会被其它标签挡住。阅读全文

posted @ 2013-12-04 17:39 月阳阅读(139) 评论(0) 推荐(0)

根据网络改变的新自定义滚动条功能

摘要：滚动条js特效 by js.alixixi.com 11111sssssssView Code 滚动条js特效经过改编11111sssssss 阅读全文

posted @ 2013-10-12 15:43 月阳阅读(200) 评论(0) 推荐(0)

转载：Clear Float

摘要：众所周知，平时在写HTML代码时，难免少不了使用Float样式，这样一来，假使您没有清除浮动，那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说，假如你在写CODE时，其中div.A（这个就是说页面中有一个div，并且把其命名为class="A"）中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例)，并且此时div.B和div.C进行浮动，而div.D不进行任何浮动，此时你可以看到父元素div.A高度仅靠div.D来撑开其高度，如果您将div.A所有子元素进行浮动，当你没有清除内部浮动时，此时会导致浮动的父元素 div.A 阅读全文

posted @ 2013-09-11 09:47 月阳阅读(205) 评论(0) 推荐(0)

鼠标托动图片移动代码

摘要：无标题文档阅读全文

posted @ 2013-09-05 15:24 月阳阅读(253) 评论(0) 推荐(0)

随笔分类 - CSS