今天是:
首 页信息查询网站SEO查询工具CSS编辑器建站素材
网海拾贝,电脑资讯,电脑快报,it资讯,网站建设资讯,教程基地
软件新闻
操作系统
Vista Winxp Win2003 Linux Windows综合
工具软件
系统工具 媒体工具 网络工具 杀毒软件 聊天
软件开发
C教程 C++ Java C# ASP.NET JSP PHP
数据库
Oracle MySQL DB2 SQL Server Sybase
安全
网络 病毒
办公应用
Word Excel Powerpoint Outlook 其他
平面设计
Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax
网站运营
网站运营 网站优化 网站策划 策划书下载 建站心得 站长故事 网站盈利 网页制作 网页特效 素材下载 免费资源 QQ频道
  当前位置:首 页 >> 网页制作 >> CSS教程 >> css技巧:经典CSS使用技巧几则

css技巧:经典CSS使用技巧几则

  发布于2008-08-22 14:43 来源:网页教学网

css技巧:经典CSS使用技巧几则

使用 line-height 垂直居中

以下是代码片段:
line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。

清除容器浮动

以下是代码片段:
#main {
    overflow:hidden;
}

期前也提到过这样的问题,更多信息可以看这里。

不让链接折行

以下是代码片段:
a {
    white-space:nowrap;
}

上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论,参看圆心的记录)。

始终让 Firefox 显示滚动条

以下是代码片段:
html {
    overflow:-moz-scrollbars-vertical;
}

更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持,也可以使用

以下是代码片段:
body, html {
    min-height:101%;
}

使块元素水平居中

以下是代码片段:
margin:0 auto;

其实就是

以下是代码片段:
margin-left: auto;
margin-right: auto;

这个技巧基本上所有的 CSS 教科书都会有说明,别忘记给它加上个宽度。Exploer 下也可以使用

以下是代码片段:
body{
    text-align: center;
}

然后定义内层容器

以下是代码片段:
text-align: left;

恢复。

隐藏 Exploer textarea 的滚动条

以下是代码片段:
textarea {
    overflow:auto;
}

Exploer 默认情况下 textarea 会有垂直滚动条(不要问我为什么)。

设置打印分页

以下是代码片段:
h2 {
    page-break-before:always;
}

page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框

以下是代码片段:
a:active, a:focus {
    outline:none;
}

Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。

最简单的 CSS 重置

以下是代码片段:
* {
   margin: 0; padding: 0
}

如果想“复杂”,参考YUI 的做法(还有这里)。原文留言中也有用户说了他们的观点

以下是代码片段:
I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;}
basically means "traverse every css element and give it these 
attributes". That is a very unnecessary strain on the server and 
a bad semantic practice, as you have to give some elements 
padding/margin again, after stripping them.

css技巧:经典CSS使用技巧几则

 


中查找“css技巧:经典CSS使用技巧几则”更多相关内容

中查找“css技巧:经典CSS使用技巧几则”更多相关内容



上一篇:CSS制作圆角导航的另一思路
下一篇:跨浏览器实现float:center
最近更新 赞助商
·网站设计Tab标签切换的效果制作11-07
·21个好玩、有趣味、实验性的css技术运用..11-07
·IE与FireFox在JavaScript和Css上的几处区别10-28
·CSS加JS让图片自动适应大小,任意浏览器..10-28
·FireFox浏览器和IE浏览器下CSS兼容问题10-21
·Web开发期待的CSS的一些功能10-21
·css教程:网页字体及字体大小的设计09-18
·CSS Alpha透明相关知识学习09-18
·关于W3C CSS标准的一些经验09-18
·div+css制作网页实战笔记心得09-18
·CSS网页布局的好处与坏处09-18

共有评论 0 条 网友评分 0分 查看所有评论


发表评论→ 学而不思则罔,思而不学则殆,请大胆发表你的见解。

输验证码:

您对此篇文章的评分:1分 2分 3分 4分 5分

  • 站内搜索
关键词

搜索方式

搜索范围

精确匹配
Baidu
网站首页 - 关于本站 - 网站地图 - 广告合作 - 站点声明 - RSS订阅 - 联系我们
Copyright © 2005 网海拾贝.[新ICP备05003216号]. All Rights Reserved .