仓酷云

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

[DIV+CSS] 带来一篇CSS进修教程:CSS代码优化和CSS重用优化

[复制链接]
柔情似水 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:57:56 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。
破洛洛文章简介:CSS进修教程:CSS代码优化和CSS重用优化.
为人人先容复杂的CSS优化
触及优化内容:
1、CSS代码优化
2、CSS重用优化

1、CSS代码优化中央
1、border(CSS边框)简写:
border-top:1pxsolid#000;border-bottom:1pxsolid#000;border-left:1pxsolid#000;border-right:1pxsolid#000;
能够简写为:border:1pxsolid#000;
2、padding(CSSpadding)简写:
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
可简写为:padding:1px2px3px4px;
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:1px2px3px4px;
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/12pxArial,Helvetica,sans-serif;

2、CSS重用优化
这里次要先容是CSS代码的共用属性提取来到达勤俭代码、保护便利,CSS实比方下:
.poluoluocom_a{width:100px;height:20px;text-align:left;float:left;font-size:24px;}
.poluoluocom_b{width:100px;height:20px;text-align:right;float:left;font-size:24px;}
他们都有不异高度、宽度、浮动、笔墨巨细,而只要内容居左居右分歧(你大概必要懂得CSS居中),我们就能够提取他们不异属性
优化后:
.poluoluocom_a,.poluoluocom_b{width:100px;height:20px;text-align:left;float:left;font-size:24px;}
.poluoluocom_b{text-align:right;}

</p>
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
因胸联盟 该用户已被删除
沙发
发表于 2015-1-17 19:55:53 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
精灵巫婆 该用户已被删除
板凳
发表于 2015-1-26 22:20:50 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
第二个灵魂 该用户已被删除
地板
发表于 2015-2-5 04:42:25 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
简单生活 该用户已被删除
5#
发表于 2015-2-11 05:52:46 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
只想知道 该用户已被删除
6#
发表于 2015-3-1 23:38:46 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
爱飞 该用户已被删除
7#
发表于 2015-3-11 03:14:32 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
海妖 该用户已被删除
8#
发表于 2015-3-17 21:10:34 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
兰色精灵 该用户已被删除
9#
发表于 2015-3-25 06:27:59 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 19:09

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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