Easy To Manage The World Network Technology

TEL:18995488365 QQ:627252942

首 页 企业建站 维护助理 代管之家 网站优化 推广精灵 技术交流 下载中心 客户中心
易管天下域名注册、虚拟主机租售
分享:CSS使用技巧20则
易管天下-最新信息:《分享:CSS使用技巧20则 》2006/12/1 16:22:28!网站托管,网站保姆,网站SEO,网站优化,以及搜索引擎研究,SEO技术等
分享到QQ空间 分享到腾讯朋友

13. 页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类:


<body>
<div class="container“>


然后CSS这样设计:


#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}


第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

同样的办法也可以为IE实现最大宽度:


#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");
}


14. IE与宽度和高度的问题

IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。

比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:


.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}


所有的浏览器都可以使用第一个box设置,但IE不认得第2段设置,因为其中用到了子选择器命令。第2个设置更特殊些,所以它会覆盖掉第1个设置。

5. 字体变形命令

text-transform 命令很有用,它有3个值:text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写,第2个变成全小写,第3个变成首字母大写。这对拼音文字非常有用,即使输入时有大小写错误,在网页上也看不到。

16. IE中图片文字消失的问题

有时会遇到文字或背景图突然消失的问题,刷新一下又出现了,这在靠近漂浮元素时更容易发生(注:没见过)。此时,可以为消失的元素设定: position: relative ,如果不行,再考虑为这些元素指定一个宽度试试。

17. 不可见文字

不论因为何种原因希望某些网页文字不在浏览器中显示,比如为了打印或为了小屏幕而让某些文字不显示,都可以用 display: none 。这非常简单,但有时对某些人这有点没用,他们能去掉这个控制,这时就要用到: position: absolute; left: -9000px 。

这实际上是把文字指定在页面以外显示。

18. 为手持设备设计专门的CSS

也就是手机/PDA等小屏幕用户,可以专门设计一个CSS来让网页显示更舒服些。为此,可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

也可以阅读专门的手持设备可用性。

19. 3D效果的按钮

以前要想制作带有3D效果,并且点击下去还会变化的按钮,就得用图片替换的方法,现在CSS就可以了:


a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}


至于效果,还可以自己调整了。

20. 在不同页面上使用同样的导航代码

许多网页上都有导航菜单,当进入某页时,菜单上相应这一项就应该变灰,而其他页亮起来。一般要实现这个效果,需要写程序或专门为每一页做设计,现在靠CSS就可以实现这个效果。

首先,在导航代码中使用CSS类:


<ul>
<li><a href="#" class="home">Home</a></li>

本新闻共4页,当前在第3页  1  2  3  4  

分享到QQ空间 分享到腾讯朋友
今日头条

·短篇小说:《情场父子兵》
·学海日记:《十年青春正流逝》(卷二
·学海日记:《十年青春正流逝》(卷一
·诗集:《无题的意象》(71-80)
·诗集:《无题的意象》(61-70)
·诗集:《无题的意象》(51-60)
·诗集:《无题的意象》(41-50)
·诗集:《无题的意象》(31-40)
·诗集:《无题的意象》(21-30)
·诗集:《无题的意象》(11-20)

技术交流

· 腾讯微博-iWeibo系统 打造属于
· 什么是WAP?深入了解WAP
· 全面封阻六种主要网络威胁
· 应用指南:利用网络设备防范TC
· 三招提高FTP服务器安全性

网站维护

· 通用电气(中国)网站维护案例分析
· 网站建设、网站维护、网站运营过
· 国家计算机病毒中心发现恶意木马
· 《计算机信息网络国际联网安全保
· 一切从零开始 如何快速提升网站的

客户中心

· 个人诗集《幸福若海》(作者:
· 中卫精艺汽车服务有限公司
· 中卫街搜,爱生活,爱中卫,爱
· 中卫SEO培训-“中卫市企业网站
· 宁夏SEO免费培训--我为自己做代
· 北京九鹿鹿业-鹿血酒(保健酒)
· 电子商务十二五发展规划(全文)
· 易管天下免费培训--我为自己做

相关连接:
上一篇:CSS入门教学四个问与答
下一篇:个人网站转型商业站必须面对的问题
相关网络广告: