仓酷云

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

[DIV+CSS] 来一发css网页制造有用技能9则

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

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

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

x
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
本篇总结了一些CSS经常使用技能,为网站重构打下基本,希望您能学到一点有效的器材。
一.利用css缩写
利用缩写能够匡助削减你CSS文件的巨细,加倍简单浏览。css缩写的次要划定规矩请参看《css基础语法》。
二.明白界说单元,除非值为0
健忘界说尺寸的单元是CSS老手广泛的毛病。在HTML中你能够只写;100,可是在CSS中,你必需给一个正确的单元,好比:"width:100em。只要两个破例情形能够不界说单元:行高和0值。除此之外,其他值都必需紧跟单元,注重,不要在数值和单元之间加空格。
三.辨别巨细写
当在XHTML中利用CSS,CSS里界说的元素称号是辨别巨细写的。为了不这类毛病,我倡议一切的界说称号都接纳小写。
class和id的值在HTML和XHTML中也是辨别巨细写的,假如你必定要巨细写夹杂写,请细心确认你在CSS的界说和XHTML里的标签是分歧的。
四.作废class和id前的元素限制
当你写给一个元素界说class大概id,你能够省略后面的元素限制,由于ID在一个页面里是独一的,class能够在页面中屡次利用。你限制某个元素毫偶然义。比方:
div#content{/*declarations*/}
fieldset.details{/*declarations*/}
能够写成
#content{/*declarations*/}
.details{/*declarations*/}
如许能够节俭一些字节。
五.默许值
一般padding的默许值为0,background-color的默许值是transparent。可是在分歧的扫瞄器默许值大概分歧。假如怕有抵触,能够在款式表一入手下手就先界说一切元素的margin和padding值都为0,象如许:
*{
margin:0;
padding:0;
}
六.不必要反复界说可承继的值
CSS中,子元素主动承继父元素的属性值,象色彩、字体等,已在父元素中界说过的,在子元素中能够间接承继,不必要反复界说。可是要注重,扫瞄器大概用一些默许值掩盖你的界说。
七.比来优先准绳
假如对统一个元素的界说有多种,以最靠近(最小一级)的界说为最优先,比方有这么一段代码
Update:Loremipsumdolorset
在CSS文件中,你已界说了元素p,又界说了一个classupdate
p{
margin:1em0;
font-size:1em;
color:#333;
}
.update{
font-weight:bold;
color:#600;
}
这两个界说中,class="update将被利用,由于class比p更近。你能够查阅W3C的《"Calculatingaselector’sspecificity》懂得更多。
八.多重class界说
一个标签能够同时界说多个class。比方:我们先界说两个款式,第一个款式背景为#666;第二个款式有10px的边框。
.one{;background:#666;}
.two{border:10pxsolid#F00;}
在页面代码中,我们能够如许挪用
<divclass="one"two></div>
如许终极的显现效果是这个div既有#666的背景,也有10px的边框。是的,如许做是能够的,你能够实验一下。
九.利用子选择器(descendantselectors)
CSS初学者不晓得利用子选择器是影响他们效力的缘故原由之一。子选择器能够匡助你勤俭大批的class界说。我们来看上面这段代码:
<divid="subnav>"
<ul>
<liclass="subnavitem>"<ahref=#class="subnavitem>"Item1</a></li>>
<liclass="subnavitemselected>"<ahref=#class="subnavitemselected>"Item1</a></li>
<liclass="subnavitem>"<ahref=#class="subnavitem>"Item1</a></li>
</ul>
</div>
这段代码的CSS界说是:
div#subnavul{/*Somestyling*/}
div#subnavulli.subnavitem{/*Somestyling*/}
div#subnavulli.subnavitema.subnavitem{/*Somestyling*/}
div#subnavulli.subnavitemselected{/*Somestyling*/}
div#subnavulli.subnavitemselecteda.subnavitemselected{/*Somestyling*/}
你能够用上面的办法替换下面的代码
<ulid="subnav>"
<li><ahref=#>Item1</a></li>
<liclass="sel>"<ahref=#>Item1</a></li>
<li><ahref=#>Item1</a></li>
</ul>
款式界说是:
#subnav{/*Somestyling*/}
#subnavli{/*Somestyling*/}
#subnava{/*Somestyling*/}
#subnav.sel{/*Somestyling*/}
#subnav.sela{/*Somestyling*/}
用子选择器可使你的代码和CSS加倍简便、加倍简单浏览。

凡是和我讨论客户段效率的全是脑子有问题的,影响的全是图片和Flash,所以我一直建议一个提交按钮就不要用图片带代替了。
若天明 该用户已被删除
沙发
发表于 2015-1-18 05:25:23 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
海妖 该用户已被删除
板凳
发表于 2015-1-18 05:25:23 | 只看该作者
可以使用CSS检查工具进行设计。
山那边是海 该用户已被删除
地板
发表于 2015-1-24 15:42:59 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
乐观 该用户已被删除
5#
发表于 2015-2-2 07:45:21 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
只想知道 该用户已被删除
6#
发表于 2015-2-7 18:14:29 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
活着的死人 该用户已被删除
7#
发表于 2015-2-23 00:14:27 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
灵魂腐蚀 该用户已被删除
8#
发表于 2015-3-7 06:07:06 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
透明 该用户已被删除
9#
发表于 2015-3-14 15:21:51 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
分手快乐 该用户已被删除
10#
发表于 2015-3-21 12:41:33 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-6-14 05:14

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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