仓酷云

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

[DIV+CSS] 给大家带来进修WEB尺度心得:网页重构的思绪

[复制链接]
只想知道 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:25:35 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。
网页制造poluoluo文章简介:本人揣摩的一种CSS重构办法.
比来终究故意情把我的CSS重构一下。。因为这类写法的一部分是我本人揣摩出来的,带有偏好的做法。
仅供参考。假如接纳后被同事讽刺,老板罚款,自己概不卖力。
我重构的时分,进修了一些行业尺度的做法。次要思绪来历于以下一些,好比Rest,Grid,Dry等等(不明寄义者请自行Google)。
1,Css文件的构造。
Css文件接纳依照Rest中的资本来举行构造,好比User,那就有一个user.css,假如这个资本的对照庞大,能够进一步分化成user_new,user_edit等等。某些共用的组件,能够再分出来,好比toolbar.css
2,根选择器利用class,其他的只管利用原生选择器,,根选择器通常为网页Grid体系中年夜块布局。
例子:table.usertdspan{font-size:12px}
即便利用class,也带上原生标签
例子:table.usertdspan.user{font-size:12px}
如许做的最次要的缘故原由是给class取名其实在是头痛。名字还简单抵触。取名的时分要思索语义,实在我们只不外为了丑化一下显现。接纳了我这类做法的Css文件,不看Html源码,我也能晓得我正在干甚么了。
3,文本标签的利用。
良多网站利用span,由于我制止利用class,那末统一层级span只能利用一次。那只管利用<i></i><em></em><strong></strong><cite></cite>,假如是分歧层级,那末多种标签组合也够用了
比方<divclass="score"><em>张三</em>购置了<strong>3个</strong>面包</div>
绝对的css就是div.scoreem{color:red}
div.scroestrong{color:greeen}
块元素,要天真使用<h1>到<h6>他们和Div是等价的。
4,利用class的情形
a,当某个块是Grid中的基础块的时分b,供javascript挪用的时分,c,万不得已的情形下。也就是说使用原生选择器就可以办理的成绩,就不要用class。
5,美工只卖力年夜括号内里的内容
好比div.scoreem{color:red;font:12px}中美工只卖力调剂{}中的内容,程序员卖力{}前的内容。因为不容易引进class,人人对照简单相同。
6,事情流程。
1,美工使用Grid体系做出计划图
2,计划图中的基础块的定名,用来做根选器的class名。
3,程序员将做好的html和css交给美工,css中的年夜括号内容程序员能够不写大概少写。
4,美工只调剂css中{}的内容,直到中意为止,假如觉察{}前的内容分歧理,和程序员商议。(注重,因为不请求美工看源代码,只需求看Css,而css中次要是原生标签,以是基础能看懂,如许不论是asp.net,jsp,php都不必要美工体贴了)
基础就这么多了,其他的一时也想不起来,接待指出成绩和弱点。
</p>
有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
小女巫 该用户已被删除
沙发
发表于 2015-1-17 22:38:47 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
板凳
发表于 2015-1-25 17:43:59 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
谁可相欹 该用户已被删除
地板
发表于 2015-2-3 12:41:25 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
简单生活 该用户已被删除
5#
发表于 2015-2-9 02:39:44 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
乐观 该用户已被删除
6#
发表于 2015-2-26 19:35:05 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
小妖女 该用户已被删除
7#
发表于 2015-3-16 09:52:07 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
冷月葬花魂 该用户已被删除
8#
发表于 2015-3-22 22:11:25 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-20 18:27

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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