随笔分类 - html/css
html/css
摘要：iOS内嵌webview页面制作经验因为工作中做到iOS内嵌页面，以后也会越来越多地遇到，所以打算总结一下这方面的经验。切图的时候，不要把文字切到图中我看到有的同事切图的时候把文字也切到图里，包括普通图和@2x的图。这样做其实很不好，因为：设计搞中的字体可能跟iOS实际的字体不一样，二者在同一个屏幕出现的时候就会很违和。比如文字用了iOS字体，后面的一个按钮中的文字是微软雅黑，囧。。。更重要的是，99%的情况下，文字一定会模糊。系统对文字的渲染比对图片的渲染圆滑而智能很多，而且性能也好很多，尽量使用字体。可以公用图片，少图，app尺寸更小。不要CSS3和图片拼接也是看别人的代码里出现的，一个三
阅读全文
摘要：随着Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的Retina屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？什么是响应式图片？响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。CSS 响应式图片对于很多 IOS 开发者来说可能已经不太陌生了，为了适配Retina屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过Media Queries使背景图片尺
阅读全文
摘要：比onload更快获取图片尺寸文章更新：2011-05-31lightbox类效果为了让图片居中显示而使用预加载，需要等待完全加载完毕才能显示，体验不佳（如filick相册的全屏效果）。javascript无法获取img文件头数据，真的是这样吗？本文通过一个巧妙的方法让javascript获取它。这是大部分人使用预加载获取图片大小的例子：var imgLoad = function (url, callback) {02 var img = new Image();03 04 img.src = url;05 if (img.complete) {06 call...
阅读全文
摘要：代码写的很烂，请大牛多多指教，判断内容是否有空格，$(function(){ var checkStr = function(){ var form = $('form[name=get]'); var inputTexts = form.find('input[type=text]'); var input; for (var i = 0; i < inputTexts.length; i++) { input = inputTexts[i].value; blankSpace(input); }; };var blankSpace = function
阅读全文
摘要：罪行1:把块级元素放入了行内元素内HTML 元素的表现方式不外乎就两种:块级和行内.每一个标签都有默认的表现方式不是块级就是行内.像div和p 就是块级元素,他们用来形成文档结构.行内元素只能在快级元素内.罪行2: img 标签没有包含alt属性alt属性是所有显示在网页中图片的必须属性,它能够帮助人们知道这是什么图片.或者在网速比较慢的时候显示图片的含义是什么.它的主要目的是,说明图片的含义,想这样的说明 alt=”image”是很糟糕的.如果,有些图片的确只是装饰作用而已,那么建议你写成 alt=”".罪行3:在必要的时候没使用list犯罪4：使用<b>和<i&
阅读全文
摘要：刚刚开始接触 HTML5 时，对它的标签很不适应，甚至一度有点反感。尤其是对 div、section、article 这几个标签，实在弄不清楚应该使用在什么场合下。divHTML Spec: “The div element has no special meaning at all.”这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义，用作布局以及样式化或脚本的钩子(hook)。sectionHTML Spec: “The section element represents a generic section of a document or application. A sec
阅读全文
摘要：谷歌浏览器默认最小字体为12px，小于12px的字体它都以12px显示，有时我们需要字体小点.看下面：在html或者body里添加一句谷歌浏览器专有的属性。html,body{-webkit-text-size-adjust:none}注意：如果使用了这个属性，浏览器的字体将不能使用放大缩小功能！（就是按住CTRL键上下滚动鼠标中键的那功能）
阅读全文
摘要：直接看代码吧white-space:normal;word-wrap:break-word;width:110px;overflow:hidden;OK，这样，火狐下面，IE下面就可以搞定，英文，数字换行的问题。如有问题，多多指教。
阅读全文
摘要：今天herb同学在twitter上问到，如何利用CSS使搜索条固定显示于窗口的某个位置。好像之前也碰过这个问题，不过，当时并没有解决，用JS有现成的方法，不过，这次要求的就是不用JS。然后，开始写代码，测试，最终，IE6下依然有问题。position:fixed;没有正常显示。正确的代码：预览/Demo|ie6_position_fixed_bug.txt(源代码)在别的文章中看到，可以用position:absolute;来解决IE6的问题，不过，添加position:absolute;之后，依然没有成功。当然，最终，还是用position:absolute;来解决。只是，不一定能成功。因为
阅读全文
摘要：昨天在 twitter 上说，怎么忍心把页面写得这么难用？是的，这个世界还有一群人等着我们创建出来的东西，可以让他们的生活能过得更容易呢。比如那些需要读屏软件的用户。作为一个前端，我们又怎么会忍心呢。之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 HTML T ag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML，让某些人的生活可以更容易。今天想分享的是如何去使用我们的 HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的体现：1. 文档声明：<!Doctype>其实这跟 WCAG 根本上连不上什么直接关系，但
阅读全文
摘要：那天瓜哥讲了个问题，说说css HACK的一些看法，说说自己的想法，不对多指教。 由于各种浏览器对css的解析存在差异，使同一页面在各种浏览器下表现出来的效果也会不同。为了解决这个兼容性问题，css hack技术产生了。个人认为css hack技术其实是一种欺骗浏览器的技术，通过在选择器、属性等地方添加一些特别符号来使某些浏览器无法解析该选择器或属性，以达到区分不同的浏览器的目的。其实个人觉得css hack是不安全的，有风险的，现在的浏览器更新很快，版本也出现了好几个，谁也无法100%保证为这个版本浏览器所设置的css hack在下一个版本依然有效。比如在ie7还没出来之前，!import.
阅读全文
摘要：CSS2.1是当前普遍使用着的CSS版本，平时如果循规蹈矩的编写CSS，或许不会发现问题，可问题就是：如果想要保存的时候，不小心按Ctrl+s的时候多留了一个s在CSS文件里，问题就开始来鸟；或者是不小心在规则的大括号外边多写了一个分号……出错的事情是千奇百怪的，对于新手来说频率可能会高些。出现这样的问题的时候、调试起来你可能会感觉很莫名其妙，这就需要了解一下CSS2.1版本的容错机制了。CSS2.1的容错方式总的来说就是：对于出现一些无效的属性、属性值、@-keywords等等，它就会忽视这些样式声明或者整个规则声明。对于无效的属性、属性名会忽视该样式声明，对于@-keywords中keyw
阅读全文
摘要：图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。方法一：该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用
阅读全文
摘要：详解块级格式化范围（block formatting context）前几天讲闭合浮动元素的时候提到了块级格式化范围（block formatting context），现在我来详细解释一下。先看图片:这两个普通的div的边距都是20px，但实际的边距不是20px+20px=40px，而是取20px，这就是最开始学css的同学总和我说的边距重叠，当俩个普通的div相遇时会有以下规则：当两个div的边距都是正的时取最大的margin最为边距。当两个div的边距都是一正一负时,边距为他们的边距相加。刚才说的是普通情况下，所谓的普通就是没有长生格式化范围，看第二个图是产生格式化范围的情况，就是边距没
阅读全文
摘要：从清除浮动（clear float）谈拥有布局（has layout）与块级格式化范围（block formatting context）float是网页布局中都要使用的css属性，他为我们灵活布局提供了方便，但同时浮动太多会带来很多麻烦，所以我通常的做法是使用float完后，马上清除他。float的本质是脱离的正常的html文档流，就是由于他脱离的文档流才出现了很多麻烦。清除浮动（我更喜欢叫闭合浮动元素）的最简单的方法就用<div style=”clear:both;”></div>加入空的标签，但是这种不够语义化，也显得不是很灵活，每次都要加额外的html。于是有人
阅读全文
摘要：Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。值描述static默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。relative位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。absolute位置设置为 absolute 的元
阅读全文
摘要：IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。例如：CSS代码a:hover{background:url(imagepath)}常用的解决方案：在页面底部添加以下IE6专用代码，让IE6缓存CSS背景图片至本地，这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。XML/HTML代码!–[ifIE6]scri...
阅读全文
摘要：DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写
阅读全文
摘要：1.‘\9’: eg:.test { color/*\**/: blue\9 }.header {width:300px;} /* 所有浏览器*/.header {width/*\**/:330px\9;} /* 所有浏览器IE浏览器 */.header {*width:310px;} /* IE7和IE6能识别,IE8和FF不能识别*/.header {_width:290px;} /* IE6能识别，IE7、IE8和FF不能识别*/2.利用条件注释语句：!–[if IE] 此内容只有IE可见 ![endif]– lt 表示less than 当前条件版本以下的版本，不包含当前版本。
阅读全文
摘要：在进行网页布局的时候，经常会根据需要设置相对，绝对以及浮动定位；发现了一个奇妙的现象：查了相关资料，高人有这样的解释：1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时，以及没有清除浮动时，IE6/7，FF中显示一致；2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时，有清除浮动时，IE6/7不显示绝对定位层，FF显示；3.当绝对定位层的邻近浮动层的宽度等于父层宽度时，以及没有清除浮动时，IE6不显示绝对定位层，IE7/FF显示；4.当绝对定位层的邻近浮动层的宽度等于父层宽度时，有清除浮动时，IE6/7不显示绝对定位层，FF显示；要解决这个BUG的方法也很简单，让绝对定位层不挨着浮动层放置就好
阅读全文
浙公网安备 33010602011771号