div+css

当前位置:地方网站工作室 >> 网络技术 >> div+css >> 浏览文章

5个实用CSS应用技巧实例分享

文章来源:菏泽网络公司  文章作者:redbots  日期:2009年09月19日
随着近几年来Web标准的流行,css也逐渐有原先辅助的角色转变成了各大网站编程的重要组成部分一直。它很好地将样式与内容分离,使得后期的版面维护与更新工作得以更加地便捷!本文将给大家介绍5个有关CSS的实用技巧。

随着近几年来Web标准的流行,css也逐渐有原先辅助的角色转变成了各大网站编程的重要组成部分一直。它很好地将样式与内容分离,使得后期的版面维护与更新工作得以更加地便捷!本文将给大家介绍5个有关CSS的实用技巧。

1. 使用!important:

!important是用来将css属性的优先权提升到之高无上的地步,任何多余的装饰在!important的面前都无用无知地。使用方法:

.text {
background-color:blue !important; //只需在css属性后加上!important即可,与属性间的空格可有可无
background-color:red; //尽管该css属性是写在后面,但没有起到任何的作用
}

2. 使用background设置图片来替换文本:

每个网站都有一个logo,如果使用a标签直接包含logo图片,这样的做法对搜索引擎不太友好。此时,我们可以用a标签包含一段文字,通过css来的background属性来隐藏文字,同时设置a标签的背景图片为logo图片,这样可以更加友好地优化了网站。

.logo a {
display:block;
width:120px; //此处的宽度和高度与logo图片的宽度和高度一致即可
height:80px;
text-indent:-9999px;
background:url(’logo.gif’) no-repeat;
}

3. 清除浮动:

在网站的布局设置时,经常会出现通过浮动来布局网站内容的分布。但若该元素浮动后,它就脱离了它的父亲的管束,会导致它的父亲的高度为0。为了不是父亲的后面的兄弟们的布局出现问题,此时需要对父亲清除浮动.方法有二:

01. 在父亲的浮动儿子后面插入一个块级元素,如div,设置该div的css为clear,编写css:

.clear {
clear:both;
}

02. 使用overflow和heigth组合的方式,设置父亲father的css为:

.father {
overflow:hidden; //标准浏览器中生效
height:%1; //兼容IE6
}

4. 文字垂直居中

若有一个h3包含的标题,你设置了它的高度为30px,就会发现它是居上边显示的,此时你只需结合line-heigth属性即可实现居中效果:

h3 {
height:30px;
line-height:30px;
}

5. 网站整体内容居中

大家都知道有个属性text-align:center;可以是文本居中,该属性在ie6下也可以实现将网站的整体居中显示。但在标准浏览器中,该 属性是不起作用的。在标准浏览器中却可以使用margin:0 auto;属性是网站的整体内容居中,但该属性在IE6中却不能识别,所以为了兼容多浏览器,可以组合使用:

body {
text-align:center; //在body标签中设置该属性给IE6认识只用
}
#wrapper {
text-align:left; //在标准浏览器中,先须将文章的内容居左显示
margin:0 auto; //然后使用margin属性将网站整体内容居中
}

这些css技巧或许很简单,但我的初衷是希望可以给初学者带去一些帮助。当然css技巧远远不止这些,以后会逐渐整理了发表出来与大家分享。

原文地址:http://www.redbots.cn/skills/2009/09/18/13073.htm

追求卓越 精心缔造 菏泽网站建设 地方网络工作室
上一篇:节约信息在页面上占据的空间
下一篇:RDFa介绍——构建更友好的web页面
相关文章

我们能为菏泽企业做什么?

菏泽企业网站建设
DIV+CSS布局技术、底层SEO规划设计、菏泽地方网络工作室为您提供优质网站建设服务!
SEO网站推广策划
菏泽唯一SEOwhy认证的SEOER,全面的SEO推广方案,为您量身定制SEO网站推广策划!
国内顶级服务器
新网互联、中国频道、美国主机、韩国主机、地方网络工作室只提供最优质的服务器主机!
《书生商友》商机群发软件
Booksir,一步到位彻底解决中小企业网络整合营销的书生商友营销引擎!

公告

怎么联系我们?

手机:18651363941
地址:由于菏泽生存压力巨大,本人现未居菏泽,在北京就值。如有业务需要,请直接电联。
联系人:刘峰 高娜
QQ:61572536
微信:61572536
邮箱:guf521@163.com

服务宗旨

因为执着 所以专业 追求卓越 精心缔造
售后为先 宁得罪新客户  不拖拉老客户
诚信为本 新互顶级域名空间  畅爽速度