admin 管理员组文章数量: 1184232
2024年3月6日发(作者：div中的span居中)
维普资讯
２００８年第５期（总第６３期） 中国砚代 装备 使用ＣＳＳ制作网页的几点经验 刊、桂杰 山东省章丘市第一职业中专 山东章丘 ２５０２００ 摘要：本文主要介绍了使用ｃｓｓ制作网页时，设计网页头部的一些写法、ＣＳＳ隐藏文字的几种常用方法和使用ＤＩＶ＋ＣＳＳ排 版的几个小技巧。 关奠词：ｃｓｓ浮动滑动门 ｈｔｍｌ和ＣＳＳ都不涉及算法，不涉及数据库，制作网 页时看着很简单，但是要想做好也不容易。下面将本人 使用ＣＳＳ制作网页时的几点经验总结如下： 解析，影响速度，搜索引擎对嵌套的层数也可能有所限 制，而且这样写带给我们的可读性也不算太高。那如何 才是最优化，最科学的写法昵？ 我们可以选用其他的Ｘｈｔｍｌ代码来取代上面的ｄｉｖ 一、ＣＳＳ设计网页头部的一些写法 １．首先标题的选择——我们知道在ｘｈｔｍｌ中ｈ卜ｈ６ 是表示标题的，而ｈｅａｄｅｒ里的标题在全页来看是最重 要的，我们选择ｈｌ来表示标题是顺其自然的。 ２．其次导航栏的选择——导航栏是由多个小块内 容组成，我们选择无序列表＜ｕｌ＞＜１ ｉ＞＜／ｌ ｉ＞＜／ｕ１＞来表 示菜单最合适不过了！ 最后以上的内容可以优化成： ＜ｄｉｖ ｉｄ＝ ｈｅａｄｅｒ ＞ 在ｄｉｖ＋ｃＳＳ布局中，一般都这样来整体构架的： ＜ｄｉｖ ｉｄ＝ ｈｅａｄｅｒ ＞＜／ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝ ｃｅｎｔｅｒ ＞＜／ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝ ｆｏｏｔｅｒ ＞＜／ｄｉｖ＞ 而对于ｈｅａｄｅｒ部分，肯定要显示网站标题，除了 显示网站标题外，还可能要显示其他比较重要的对象， 比如网站的导航栏： ＜ｄｉｖ ｉｄ＝ ｈｅａｄｅｒ ＞ ＜ｈｌ＞这里是网站的标题＜／ｈ １＞ ＜ｕｌ＞ ＜ｄｉｖ ｉｄ＝ ｔｉｔｌｅ ＞这里是网站的标题＜／ｄｉｖ＞ ＜ｄｉｖ ｉｄ＝ ｎａｖ ＞这里是网站导航栏＜／ｄｉｖ＞ ＜／ｄｉｖ＞ ＜ｌｉ＞这里是网站导航栏＜／１ｉ＞ ＜／ｕｌ＞ ＜／ｄｉｖ＞ 很多人一般都这样写的，当然这样写并没有什么语 法错误。但对于ｄｉｖ来说有个原则，那就是尽少的使用 ｄｉｖ的嵌套，否则浏览器要消耗资源对嵌套的关系进行 二、ＣＳＳ隐藏文字的几种常用方法 １．ｄｉｓｐｌａｙ：ＮＯＮｅ：它可以使包括容器本身在内的 收稿日期：２００７－１２－２７ 东西都消失，简便且有效，但它有两个耳熟能详的缺 作者简介：孙桂杰，硕士，中学一级教师。 陷，那就是对搜索引擎不友好，且被屏幕阅读器所忽
维普资讯
中国砚代瓣装备 略。 ２．ｔｅｘｔ—ｉｎｄｅｎｔ：一９９９９ｐｘ：ｔｅｘｔ—ｉｎｄｅｎｔ是首行缩 进，所以对于多行文本，若单独使用它就有明显的不 ２００８年第５期（总第６３期） Ｆｉｒｅｆｏｘ下表现的不同了。ＩＥ５．５，ＩＥ６浮动元素依然占 据外围容器空间。 例如：怎么在ＩＥ下ｆｅｅｔｅｒ正常在ｆｉｒｅｆｏｘ下就跑 足，需加上ｗｈｉｔｅ—ｓｐａｃｅ：ｎｏｗｒａｐ：来弥补不足，但还 有一个问题：物理空间仍然存在，故还需设置ｌ ｉ ｎ ｅ— ｈｅｉｇｈｔ：０：或使用超小字体（在ＩＥ下有点ＢＵＧ），最终 上去了呢？ 清除浮动吧。 ＩＥ下当ｆｌｏａｔ和ｔｅｘｔ—ａｌｉｇｎ定义的方向一样时出 现双倍错误： 代码如下 ．ｔｅｘｔｈｉｄｄｅｎ ｆ？ｔｅｘｔ—ｉｎｄｅｎｔ：一９９９９ｐｘ ｗｈｉｔｅ—ｓｐａｃｅ：ｎｏｗｒａｐ １ｉｎｅ—ｈｅｉｇｈｔ：０：） ３．ｏｖｅｒｆｌｏｗ：ｈｉｄｄｅｎ：这是一个比较合理且我最喜 欢的方法，具体代码如下 ．ｔｅｘｔｈｉｄｄｅｎ｛ ｄｉｓｐｌａｙ：ｂ１ｏｃｋ：／丰统一转化为块级元素丰／ ｏｖｅｒｆｌＯＷ：ｈｉｄｄｅｎ ｗｉｄｔｈ：０ ｈｅｉｇｈｔ：０：） 附加：ｐｏｓｉｔｏｎ：ａｂｓｏｌｕｔｅ： 用绝对定位将其推出可视区，不过虽然可视性不存 在，但仍占据物理空间，与隐藏文字的宗旨相背，代码 请看 ｔｅｘｔｈｉｄｄｅｎ｛ ｐｏｓｉｔｏｎ：ａｂＳＯ１ｕｔｅ ｍａｒｇｉｎ—ｔｏｐ：一９９９９ｐｘ ｍａｒｇｉｎ一１ｅｆｔ：一９９９９ｐｘ：） 使用ＤＩＶ＋ＯＳＳ排版几个技巧 让你使用ＤＩＶ＋ＣＳＳ￣版不是让你用换个标签然后再去按照表格的方式去排版，而是做到内容与表现的分 １．ｆｌｏａｔ浮动 在标准浏览器中，浮动元素脱离了文档流，不占据 外围容器空间，明白了这点你就会明白ＪＯｉｔ￣Ｉ Ｅ和 ｓｅｌｅｃｔ｛ｆｌｏａｔ：ｌｅｆｔ：ｔｅｘｔ—ａｌ ｉｇｎ：ｌｅｆｔ：ｍａｒｇｉｎ ０ ｌＯｐｘ：） 实际左边ｍａｒｇｉｎ—ｌｅｆｔ：２０ｐｘ；ＦＦ／ＯＰ：ｌＯｐｘ解 加上ｄｉｓｐｌａｙ：ｉｎｌｉｎｅ： “清除浮动”Ｃｌｅａｒ Ｃ１ｅａｒ：ｎｏｎｅ，１ｅｆｔ，ｒｉｇｈｔ，ｂｏｔｈ， 表示当前框元素哪些边不应该挨着浮动框，理解了 ｆｌｏａｔ在不同浏览器下的表现你也就知道如何去使用 清除浮动了。 ２．滑动门 左右两个ＤＩＶ背景分别定义一般左背景图像比较 长：左背景定位：ｌｅｆｔ ｃｅｎｔｅｒ右背景定位：ｒｉｇｈｔ ｃｅｎｔｅｒ，外部控制容器宽度一般小于等于两个背景和 这样当内容动态变化时候右背景图像便感觉像在左背 景图像上滑动，故名滑动门。 这样也可以实现：＜ｄｉｖ ｉｄ： ｎａｙ ＞＜ｕｌ＞＜１ｉ＞＜ａ ｈｒｅｆ＝ ｉｎｄｅｘ．ｈｔｍｌ ＞＜ｓｐａｎ＞首页＜／ｓｐａｎ＞＜／ａ＞＜／ｌｉ＞ ＜／ｕｌ＞＜／ｄｉｖ＞ ＣＳＳ： ＃ｎａｖ ａ｛ｆｌｏａｔ：ｌｅｆｔ：ｂａｃｋｇｒｏｕｎｄ：ｕｒｌ（ ．．／ｉｍ－ ａｇｅｓ／ｎａｖＬｅｆｔ．ｇｉｆ ）ｎｏ—ｒｅｐｅａｔ ｌｅｆｔ ｔｏｐ：ｐａｄｄｉｎｇ： ０：ｔｅｘｔ—ｄｅｃｏｒａｔ ｉ ｏｎ：ｎｏｎｅ： ｃｕｒｓｏｒ：ｈａｎｄ：） ＃ｎａｖ ａ ｓｐａｎ｛ｆｌｏａｔ：ｌ ｅｆｔ：ｄｉ ｓｐｌａｙ：ｂｌ ｏｃｋ ｂａｃｋｇｒｏｕｎｄ：ｕｒｌ（ ．．／ｉｍａｇｅｓ／ｎａｖＲｉｇｈｔ．ｇｉｆ ） ｎｏ－ ｒｅｐｅａｔ ｒｉ ｇｈｔ ｔｏｐ：ｐａｄｄ ｉｎｇ：５ｐｘ ３６ｐｘ ５ｐｘ ４０ｐｘ ｃｏｌｏｒ：＃ｆｆｆｆｆｆ） 原理相似，注意背景图像定位。
版权声明：本文标题：使用CSS制作网页的几点经验 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1709670436a542964.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论