当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

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

时间:2008-10-6 10:44:00 栏目:网页制作 点击: 来源:不详

 [网页制作]-本文简要:1.解决背景不能延伸的问题div id=contentdiv id=main div id=maincol/div div id=xcol/div/divdiv id=subcol/div/divstyle type=text/css!--#content{width:700px; backgrou...
D6电脑网 (d6pc.com): 技巧应知道: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以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。




D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等栏目。感谢您的支持!
栏目:网页制作 作者:佚名 来源:不详
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类推荐
  • 没有
本类固顶
  • 没有
网友推荐
链接申请
  • D6电脑网(www.d6pc.com) © 2018 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵犯您的利益请联系我们删除.谢谢!
    关于D6电脑学习网 广告合作 419807867@QQ.COM 联系站长 网站地图 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0