随笔分类 - HTML/CSS
摘要：二、标准方法标准方法当然就是指使用CSS3的方法了，这个应该不少同行应该知道，参见如下代码：.shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000;}释义为：横向偏移3像素，纵向偏移3像素，模糊4像素，颜色为纯黑。如果我们把含上面样式的这个class shadow应用到图片上，就会产生如下的效果（截自Firefox3.6）：三、那么IE浏览器呢？对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢？box...
阅读全文
摘要：CSS两列布局，右侧固定，左侧自适应宽度 <divstyle="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"> <divstyle="width:200px; float:right; background:#090">这是右侧的内容</div> <divstyle=" margin-right:210px; background:#F33">这是左侧的内容，自适应宽度</div> </
阅读全文
摘要：在使用DW的时候,在代码编辑区, 如果有中文时, 用鼠标点击时, 光标的落位总是不准确, 总要往前偏位几个字符。这是因为Dreamweaver中文支持不好所产好的问题, 我们知道当在utf8编码下, 中文是占两个字符的位置的. 可能DW没有考虑到这个, 在代码编辑区把所有的文字做统一长度来处理, 也把中文也当作是一个字符位. 导致光标定位的时候不准确.解决问题的办法：要把代码编辑区的字体全部设置统一的字体, 把Unicode的字体也设置成简体中文的一样, 都用宋体。图：
阅读全文
摘要：随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多
阅读全文
摘要：第一种：只需要在css里面写上红色部分.content{background-color: #000000;/* other browsers */opacity: 0.4;/* this works in IE6, IE7, and IE8 */filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);/* this works in IE8 only */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";}那他就是黑色的半透明的
阅读全文
摘要：操作系统版本：Windows 7浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev受影响的浏览器：所有浏览器.经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式..一、关于选择器的命名W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以 数字，或一个连字号后跟数字为开头。
阅读全文
摘要：解决CSS3圆角 兼容所有浏览器的方法。本文提到了一种很不错的实现跨浏览器圆角的解决方案，但是说的不够全面，前端观察最近将整理更多更全面的资源给大家，敬请期待。译 ：前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。那么要想在IE中实现圆角，你不得不使用一些技巧，比如使用带有背景图片的CSS类。而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。
阅读全文
摘要：起因[TOP]事情要从6月份锐商企业发的那篇《IE6 很邪恶，但我爱它的盒子模型》[1]说起，这篇文章已经被转了又转（Google的搜索结果相当多，百度倒是挺“干净”的），此文对于盒模型是这么描述的：“可以看出，IE6 盒子模型中，盒子的尺寸包含了 内容区，padding， border 和 margin 这四个部分，而 W3C 的盒子模型中，盒子的尺寸只包含内容区，padding，border 和 margin 被排除在盒子尺寸之外”而这个说法是错的，至少在IE6下是相当局限的一种情形。这是我实验的结果：从左至右分别是Chrome、Firefox、IE8模拟的怪异模式、IE6、IE8标准模式
阅读全文
摘要：DOCTYPE不可怕，但把它拿走，会让你怕了又怕。最近在蓝色理想转悠，发现很多朋友提出有关DIV+CSS排版问题，以及IE与FF的兼容问题。怎么问的都有，结果就是一个——显示很奇怪，很难调整。我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DocType声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始。在遵循标准的任何Web文档中，DOCTYPE都是一项必需的元素。它会影响代码验证，并决定了浏览器最终如何显示你的web文档。为了避免DOCTYPE的问题重复出现，我根据手头的资料整理了这篇文档，以备自己及有兴趣的朋友参考。
阅读全文
摘要：写在前面由于万恶的IE（尤其指IE6和IE7），我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在IE里却有各种离奇问题，例如IE6、IE7不能良好应对的inline-block和.clearfix问题，好在大部分问题已经有了足够的总结和途径。废话不多说，下面是一些方法区分浏览器的方法和我的看法。主要途径CSS Hack直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为#content{ background:red; /* 所有浏览器 */ background:orange\9; /* 所有IE浏览器 */
阅读全文
摘要：前几天工作的时候遇到一个问题，在IE6下select 这个控件似乎无法用z-index 属性隐藏，接下来就开始了寻找问题的解法，总结了一些z-index 的知识。z-index 定义和用法z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。——W3shcoolz-index：auto | number默认值：auto 堆叠顺序与父元素相等number：无单位的整数值，可为负数JavaScript 语法： object.style
阅读全文
摘要：最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.body{overflow:hidden; _overflow:visible; _zoom:1;}.main{overflow:hidden; _overflow:visible; _zoom:1;}后来分析这段代码，不分析不知道，一分析吓一跳，短短三个属性竟然包含了浮动、浮动清除、Haslayout、IE6兼容性、最小高度不同浏览器下实现、浏览器Hack、overflow的各种用途等等一系列的问题及知识点。废话不多说，且荣我细
阅读全文
摘要：你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。Margin是什么CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时
阅读全文
摘要：利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。)方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。<div id="wrapper"><div id="cell"><div class=&qu
阅读全文
摘要：要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多 IE下的显示错误，就是源于 haslayout。什么是 haslayout ？haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有
阅读全文
摘要：一个常常令设计师和前端开发人员都头疼的事情就是字体的使用，设计师常常在设计稿中使用某些很漂亮的字体，以实现比较酷炫的界面。但这样常常给编码人员造成一些难度，如果在页面中放弃使用这些字体，设计师会感到郁闷，而如果使用这些字体的话，就要切图并使用很多额外的样式——又一个鱼和熊掌的抉择。还好，现在已经有了一些相关的替代技术了。1. @font-faceCSS3的@font-face属性（事实上CSS2中就已引入），为我们带来了一些希望，而Firefox 3.5新增的对@font-face的支持，让我们离这个希望更进了一些。到现在为止，已经有Safari、Chrome、Opera 10和Firefox
阅读全文
摘要：译自：The Ultimate Guide to CSS Typography中文：CSS文字排版终极指南请尊重版权，转载请注明来源！多谢。在今天的设计中，排版常常被忽视，特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说，我们被局限于某些“网络安全”排版，但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。Font属性CSS提供了font属性，它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。Font-size使用font-size可以修改你的文字的大小。123font-size: 1.
阅读全文
摘要：高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。色彩缩写色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：1color：#113366可以简写为1color：#136所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box-shadow等。盒子大小这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右
阅读全文
摘要：PNG图像格式介绍：PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。IE6下PNG背景透明的显示问题PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透
阅读全文
摘要：盒子模型（Box Model）是 CSS 的核心，现代 Web 布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子模型与它们的摆放控制，会发现再复杂的页面也不过如此，然而，任何美好的事物都有缺憾，盒子模型有两种不同的诠释，一种来自 IE6，一种来自 W3C 标准浏览器。盒子模型下图就是一个典型的盒子模型示意图在内容区外面，依次围绕着 padding 区，border 区，margin 区，这一模型结构在所有主流浏览器都是一致的。通过盒子模型，我们可以为我们的内容设置边界，留白以及边距，盒子模型最典型的应用是这样：我们有一段内容，可以为这段内容设置一个边框，为了让内容不至于紧挨着边框，可以设置
阅读全文
浙公网安备 33010602011771号