登录模块加载中...
会员投稿 投稿指南 今天是:
打印本页 | 关闭窗口 | 双击滚屏 您的位置首页>>网页制作学习园地>>CSS教程>>CSS技术>>DIV CSS优化
DIV CSS优化
来源: ‖ 作者: ‖ 点击: ‖ 时间:12-09-20 14:26:54 ‖ 【 】‖ 我要投稿


一、CSS代码优化地方
1、border(CSS边框)简写:
border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;
可以简写为:border:1px solid #000;

2、padding(CSS padding)简写:
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
可简写为:padding:1px 2px 3px 4px;
padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;
可简写为:padding:1px;

3、margin简写
margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;
可简写为:margin:1px 2px 3px 4px;
margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;
可简写为:margin:1px;

4、background简写
background-color:#000;可以简写为background:#000;
background-image:url(图片地址)
可简写为:background:url(图片地址)

5、font简写
font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
可简写为:font:12px/12px Arial, Helvetica, sans-serif;

 

二、CSS重用优化
这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,CSS实例如下:
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}
他们都有相同高度宽度浮动文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性
优化后:
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }

加入收藏:  加入收藏夹  | 发送给好友:  发送给好友
责任编辑:admin
  • 上一篇:DIV+CSS中最小高度设定min-height设定
  • 下一篇:无
  • 相关文章列表
    请文明参与讨论,禁止漫骂攻击。  
    网友评论