细节决定成败–无css时网页的可读性
先看看效果图,一个选择酒店模块如下图: 代码结构如下: <dl> <dt>酒店</dt> <dd>北京</dd> <dd>上海</dd> </dl> <ul> <li>北京酒店列表</li> <li>北京酒店列表</li…
图片元素img下多余空白BUG处理方案
在页面进行采用Xhtml+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。 1、将图片转换为块级对象 即,设置img为“display:block;”。在本例中添加一组CSS代码:…
CSS3圆角详解
一、CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。 提高网页性…
更简洁的 CSS 清除浮动办法
清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动。 /* 清理浮动 */ .clearfix:after { visibility:hidden; dis…
IE6下 div最小高度不能为0的解决方法
在网页布局时常会用到 DIV 来显示一些边角背景,需要设置较小的高度,默认情况下,IE6 中设置 DIV 较小高度会不起作用,在 IE7、FF 等浏览器不存在这个问题。 IE6 下默认的字体尺寸大致在 12 – 14px 之间,当你试图定义一个高度小于这个默认值的 DIV…
display:table-cell简单使用
如果要做这种效果的布局,就必须要用到display:table-cell了,单用zoom也可以做到在IE6有效果,但在IE7 FF下就不行。要兼容,必须加上display:table-cell. 效果如图: 前端代码: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “ht…
6种提高编写HTML和CSS的最有效的方法
HTML5、CSS3、JavaScript,给前端开发者提供大大的用武之地。大家都在用很多的工具和技术来武装自己,以加快前段的开发。 本文分享了6中最有效的方法,希望能提供你的效率,为你节约时间。 1.Dynamic CSS(动态CSS) 如果你想加速你的CSS代码编写,那么你…
从三方面加速CSS样式作用提高网页速度
在网络慢的时候,浏览网页时经常出现裸奔的现象,对于这种情况如何尽量避免这一问题,现在整理一些思路写出来,以供大家参考: 在我们无法更换服务器或提高服务器速度的情况下,要想让我们的页面不&https://csswang.com/8221;裸&https://csswang.com/8221;在用户面前,只能从缩小页面、减少HTTP请…
高效率、简洁、CSS代码优化原则
CSS学起来并不难,但在大型项目中,一个团队中不同的人在书写CSS风格上也有不同这样这个项目就变得难以管理,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用R…
取消chrome浏览器下input和textarea的默认样式
chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所以决定重置这些样式。 取消chrome下input和textarea的聚焦边框: input,but…
CSS圆角解决方案
圆角框,因为其样式比直角框漂亮,所以成为设计师心中偏爱的设计元素。现在的web标准下大量的网页、博客都采用圆角框设计,成为一道亮丽的风景线。然而,就是这个圆角,却成为了网页前端人员心中永远抹之不去的阴影,对它,可以说是又痛又爱。爱的是它的漂…
CSS实现纯英文数字自动换行
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行,如下图 并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识一下两位主角word-wrap和word-br…
CSS Sprites图片合并
css中用一张背景图做页面的技术有什么优势? CSS Sprites图片合并的优点: CSS Sprites的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景…
css图片垂直居中
css图片垂直居中使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中 题目的难点在于两点: 1.图片是个置换元素,有些特殊的特性。 2.至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: CSS实例代码 .b…
IE6 position:fixed固定窗口
如何利用CSS使搜索条固定显示于窗口的某个位置。用JS有现成的方法,不过,这次要求的就是不用JS。 然后,开始写代码,测试,最终,IE6下依然有问题。position:fixed;没有正常显示。 可以用position:absolute;来解决IE6的问题,不过,添加position:absolut…