CSS常见技巧及问题处理

css|技巧|问题

1.解决背景不能延伸的问题
<div id="content"><div id="main"> <div id="maincol"></div> <div id="xcol"></div></div><div id="subcol"></div></div>

<style type="text/css">
<!--
#content{width:700px; background:url(img/bg.png)repeat-y;}#subcol {float:left; width:200px;}#main {width:500px; float:right;}#maincol {width:300px;float:left;}#xcol {width:200px; float:right;}
-->
</style>

上面的问题,背景的自适应高度并不继承float的高度,解决办法:
在所有float下方加上<div style="clear:both;"></div>

2.网页如何居中对齐?
body{ margin:0;padding:0;text-align:center;}
#container{width:760px;margin:0 auto;text-align:left;position:relative;}

说明:body把margin与padding设置为0,这样就把body内容与浏览器边缘亲密接触。然后text-align:center 把body的内容全部居中,这样就包括了#container也一起居中了。container的margin中的第一个0是上下、第二个auto是左右。上下为0左右让其自控。再加上定位为相对,只有定位为相对的元素才可以有位置移动!

3.用CSS制作鼠标经过图像
用DW(Dreamweav)中的“鼠标经过图像”当网速不太快的时候,鼠标经过后的图片还没有下载下来,看到白图的现象,看上去很不美观。事实上用CSS就可以解决这个问题,并且非常的简单,下载快,不会出现鼠标经过后的图片还没有下载下来这种情况。

4.结构中id与class的使用原则与技巧
ID与CLASS的使用原则
据说W3C对于ID与CLASS的设定是ID具有唯一性,CLASS具有普遍性。ID需要具有唯一性,并且尽量在外围使用。而CLASS具有可重复性,并且尽量在结构内部使用。
ID与CLASS的使用技巧
A.子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。
B.CLASS中的子级最好不用ID。当然特殊情况特殊对待。
C.CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。

时间: 2024-09-09 00:35:02

CSS常见技巧及问题处理的相关文章

技巧应知道:CSS常见技巧及问题处理

css|技巧|问题 1.解决背景不能延伸的问题<div id="content"><div id="main"> <div id="maincol"></div> <div id="xcol"></div></div><div id="subcol"></div></div> <st

CSS常见11条技巧与经验收集

在使用css过程中难免会碰到一些常见的bug及浏览器兼容方面的处理,下面与大家分享下CSS常见的11技巧与经验,喜欢web前端的朋友可以参考下,希望对大家有所帮助   1.如何清除图片下方出现几像素的空白间隙? 复制代码 代码如下: 方法1: img{display:block;} 方法2: img{vertical-align:top;} 备注:除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<pe

你所不知道的 CSS 滤镜技巧与细节

承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏. OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN -- filter 了解下: { filter: blur(5px); filter: brightness(0.4); filter: co

Photoshop技巧之常见技巧

常见技巧 1. 快速打开文件 双击Photoshop的背景空白处(默认为灰色显示区域)即可打开选择文件的浏览窗口. 2. 随意更换画布颜色 选择油漆桶工具并按住Shift点击画布边缘,即可设置画布底色为当前选择的前景色.如果要还原到默认的颜色,设置前景色为25%灰度 (R192,G192,B192)再次按住Shift点击画布边缘. 3. 选择工具的快捷键 可以通过按快捷键来快速选择工具箱中的某一工具,各个工具的字母快捷键如下: 选框-M 移动-V 套索-L 魔棒-W 喷枪-J 画笔-B 铅笔-N

10个DIV+CSS常见错误

10个DIV+CSS常见错误,出了问题可以来参考下,是否您也犯了以下错误呢? 1. 检查HTML元素是否有拼写错误.是否忘记结束标记     即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误.     2. 检查CSS是否正确     检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误.     3. 确定错误发生的位置     假如错误影响了整

CSS实用技巧及常见问题

个人总结的一些css实用技巧及必须得注意的事项: 1.注释须知:html中注释不能这样写: 复制内容到剪贴板 代码: <div></div><!--------这是错误写法-------><div></div><!--=======这是正确写法========-->这种写法,FF中会忽略其下面的内容详见:http://www.bluebirdsky.cn/article.asp?id=153.2.CSS注释切记在/*之后及*/之前空一

Dreamweaver中应用CSS的技巧

  Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器.由于DW的功能之强大,所以可以在他里面直接定义css(样式表),而就是这css给我出了个小难题. 事情是这样的, 我用css主要是改变一下我的超级连接的颜色和下划线的有无.在DW里定义css的确很方便,里面的参数他都为你设置好了,只要你点鼠标就行了.正是由于他的简单,而使他带来了一个小问题(就我自己认为): 以下为引用的内容: style type="text/css" !-- a:hover { color

在SQL server的性能优化过程中的常见技巧

在SQL server 的http://www.aliyun.com/zixun/aggregation/14109.html">性能优化过程中,TSQL的语句优化是很重要的一环.当您使用各种手段找出系统最需要优化的语句后,应该如何对该语句进行优化呢?下面列出一些TSQL 语句优化的常见技巧. 1. 语句的执行计划分析 首先要对该语句的执行计划(execution plan)进行分析,找出语句运行慢的原因.比如说, <>在检查执行计划是否包含table scan /index

CSS使用技巧

最近,我开始升级网志了. 在修改模板的过程中,需要重写CSS样式表.正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用. 未来,本文将持续更新. 1. 文字的水平居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器的水平居中 先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可. div#container { width:760px; m