仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 651|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 给大家带来CSS经常使用属性缩写实例

[复制链接]
透明 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
  CSS代码简化在事情中长短常无益的,也是需要的。在编写CSS代码时,常常会呈现冗余的代码,为了进步代码的质量及文件紧缩到最小,使代码具有可读性,不能不把CSS代码简化。上面用一些对照经常使用的属性来做示例。
相干CSS缩写文章:CSS代码缩写实例和CSS缩写缘故原由总结  CSS缩写6个图例总结

margin

  margin-top:1px;
  margin-right:1px;
  margin-bottom:1px;
  margin-left:1px;
  代码简化为:margin:1px

  margin-top:1px;
  margin-right:2px;
  margin-bottom:1px;
  margin-left:2px;
  代码简化为:margin:1px2px

  margin-top:1px;
  margin-right:2px;
  margin-bottom:3px;
  margin-left:2px;
  代码简化为:margin:1px2px3px

  margin-top:1px;
  margin-right:2px;
  margin-bottom:3px;
  margin-left:4px;
  代码简化为:margin:1px2px3px4px

  注重:当属性值是0的时分单元能够不写如:0px间接就写成0

padding

  padding的誊写办法和margin相相似

  padding-top:1px;
  padding-right:1px;
  padding-bottom:1px;
  padding-left:1px;
  代码简化为:padding:1px

  padding-top:1px;
  padding-right:2px;
  padding-bottom:1px;
  padding-left:2px;
  代码简化为:padding:1px2px

  padding-top:1px;
  padding-right:2px;
  padding-bottom:3px;
  padding-left:2px;
  代码简化为:padding:1px2px3px

  padding-top:1px;
  padding-right:2px;
  padding-bottom:3px;
  padding-left:4px;
  代码简化为:padding:1px2px3px4px

border

  border-width:1px;
  border-style:solid;
  border-color:#000000;
  代码简化为:border:1pxsolid#000

background

  background-color:#CCFFFF;
  background-image:url(图片路径);
  background-repeat:repeat-x;
  background-position:5px4px;
  代码简化为:background:#CFFurl(图片路径)repeat-x5px4px

font

  font-size:26px;
  font-weight:bold;
  font-family:“宋体”;
  代码简化为:font:26pxbold“宋体”

color属性值

  color:#000000;
  color:#ff0000;
  代码简化为:color:#000,color:#f00

那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?
精灵巫婆 该用户已被删除
沙发
发表于 2015-1-18 05:15:51 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
兰色精灵 该用户已被删除
板凳
发表于 2015-1-22 15:18:12 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
飘飘悠悠 该用户已被删除
地板
发表于 2015-1-31 09:00:54 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
蒙在股里 该用户已被删除
5#
发表于 2015-2-6 18:59:43 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
愤怒的大鸟 该用户已被删除
6#
发表于 2015-3-6 03:48:15 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
透明 该用户已被删除
7#
 楼主| 发表于 2015-3-12 20:50:20 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
8#
发表于 2015-3-20 03:56:54 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-21 21:36

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表