注册本站  论坛  繁體中文

慧民电脑芯片级维修-电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> HTML >> 网页设计正文

几个经典的css技巧

文章来源:太平洋电脑网 作者:田飞 更新时间:2008-9-22 12:49:18 【 】 【加入收藏
  进入网络咨询平台

MacJi “偷懒”翻译了部分,下午冒着被 BOSS 开除的危险将其补完(原文链接)。

使用 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

  • 上一篇网页设计:

  • 下一篇网页设计:
  • 最 新 热 门
     最简单的“开始”菜单效果
     geom加bitmapdata类打造超酷鼠标跟随效果
     AS3:图像裁剪
     Flash打造小球的弹性碰撞
     as3运用:点击图片取色
     as制作:可拖动单元格的菜单
     利用BitmapData类制作FLASH 3D相册
     使用Flash MX过程中的3个小技巧
     使用AS3自带函数进2/8/10/16/32进制互换
     flash制作字母变换效果
    最 新 推 荐
     13种常用按钮、文本框、表单等CSS样式
     CSS制作很漂亮的文字滑动效果
     用CSS改变的图片由模糊到清楚的导航
     用Class组合实现Div+CSS布局
     css布局实例:网页布局的方法
     CSS实战:美化段落文本之首字下沉
     几个经典的css技巧
     用CSS控制浏览器滚动条样式源代码
     最好的CSS资源
     危险,你敢点击吗?
    相 关 文 章

    Dreamweaver做ASP数据库的几个常见问题
    Fireworks制作经典的扫光字GIF动画
    初学Ajax须注意的几个问题
    解决JS脚本兼容的几个小技巧
    JS最常用的55个经典技巧
    网页制作应注意的几个事项
    CSS设计符合Web标准的网页表单的几个技巧
    Javascript代码在网页中简单应用的几个示例
    网页设计中总结的几个有用的JS特效代码
    以图换字的几个方法及思路

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    门市地址:广东省佛山市南海区黄岐黄海路133号
    本网站所有内容未经许可不得转载或做其他使用