当前位置:首页>>软件教程>>网页制作>>新闻内容
css网页设计小技巧
作者: 发布时间:2006-9-26 11:55:30 文章来源:


6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:

#box { width: 100px; border: 5px; padding: 20px }

这样调用它:
<div id="box">...</div>
这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的,让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用:
<div id="box"><div>...</div></div>
这样,不管什么浏览器,宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:

#content { width: 700px; margin: 0 auto }

你会使用 <div id="content"> 来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

这会把网页内容都居中,所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。

CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:

#container { position: relative }

这样容器内所有的元素都会相对定位,可以这样用:
<div id="container"><div id="navigation">...</div></div>
如果想定位到距左30点,距上5点,可以这样:

#navigation { position: absolute; left: 30px; top: 5px }

当然,你还可以这样:
margin: 5px 0 0 30px
注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。


[首页]    [上一页]    [下一页]    [末页]    

最新更新
·如何去掉ECShop2.7中的Powered by ECSh
·在IE7下生成高质量CSS缩略图
·解决Dreamweaver打开和关闭时出现JavaS
·影响搜索引擎排名的因素2009版
·IE6/IE7/IE8/Firefox/Chrome/Safari的C
·Flash对联广告及关闭按钮制作方法
·Discuz! 7中如果设置帖子中显示图片而不
·5种方法立刻写出更好的CSS代码
·兼容IE和Firefox的按图片宽度缩放的CSS
·兼容Firefox和IE浏览器的“加入收藏”代
相关信息
画心
愚爱
偏爱
火苗
白狐
画沙
犯错
歌曲
传奇
稻香
小酒窝
狮子座
小情歌
全是爱
棉花糖
海豚音
我相信
甩葱歌
这叫爱
shero
走天涯
琉璃月
Nobody
我爱他
套马杆
爱是你我
最后一次
少女时代
灰色头像
断桥残雪
美了美了
狼的诱惑
我很快乐
星月神话
心痛2009
爱丫爱丫
半城烟沙
旗开得胜
郎的诱惑
爱情买卖
2010等你来
我叫小沈阳
i miss you
姑娘我爱你
我们都一样
其实很寂寞
我爱雨夜花
变心的玫瑰
犀利哥之歌
你是我的眼
你是我的OK绷
贝多芬的悲伤
哥只是个传说
丢了幸福的猪
找个人来爱我
要嫁就嫁灰太狼
如果这就是爱情
我们没有在一起
寂寞在唱什么歌
斯琴高丽的伤心
别在我离开之前离开
不是因为寂寞才想你
爱上你等于爱上了错
在心里从此永远有个你
一个人的寂寞两个人的错