仓酷云

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

[DIV+CSS] 学习下DIV+CSS网页结构技能实例4:利用css缩写

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

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

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

x
我在这里借用了新浪博客的盒子来说明下,大家可能发现了,其实边框border往往就只有1px的宽度,谁叫它是边框呢。利用缩写能够匡助削减你CSS文件的巨细,加倍简单浏览。css缩写的次要划定规矩请参看《经常使用css缩写语法总结》,css缩写的次要划定规矩以下:
色彩

16进制的色采值,假如每两位的值不异,能够缩写一半,比方:
#000000能够缩写为#000;#336699能够缩写为#369;
注重:在统一个CSS设置节中,不要交织利用全写和缩写的色彩设置,在体系资本极低时,会招致扫瞄器衬着失利。
盒尺寸

一般有上面四种誊写办法:
property:value1;暗示一切边都是一个值value1;property:value1value2;暗示top和bottom的值是value1,right和left的值是value2property:value1value2value3;暗示top的值是value1,right和left的值是value2,bottom的值是value3property:value1value2value3value4;四个值顺次暗示top,right,bottom,left便利的影象办法是顺时针,上右下左。详细使用在margin和padding的例子以下:
margin:1em02em0.5em;

边框(border)

边框的属性以下:
border-width:1px;border-style:solid;border-color:#000;能够缩写为一句:border:1pxsolid#000;
语法是border:widthstylecolor;
背景(Backgrounds)

背景的属性以下:
background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:00;能够缩写为一句:background:#f00url(background.gif)no-repeatfixed00;
语法是background:colorimagerepeatattachmentposition;
你能够省略个中一个或多个属性值,假如省略,该属性值将用扫瞄器默许值,默许值为:
color:transparentimage:nonerepeat:repeatattachment:scrollposition:0%0%字体(fonts)

字体的属性以下:
font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:"LucidaGrande",sans-serif;能够缩写为一句:font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;
注重,假如你缩写字体界说,最少要界说font-size和font-family两个值。
列表(lists)

作废默许的圆点和序号能够如许写list-style:none;,
list的属性以下:
list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);能够缩写为一句:list-style:squareinsideurl(image.gif);
方便性:课外,我们了解到现在流行的LBS系统、PJBLOG、php下面的WP、MT,都是采用Div+css构架。在平时的练习中我们就遇到过
海妖 该用户已被删除
沙发
发表于 2015-1-18 07:46:36 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
冷月葬花魂 该用户已被删除
板凳
发表于 2015-1-26 10:50:04 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
飘灵儿 该用户已被删除
地板
发表于 2015-2-4 17:09:23 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
若天明 该用户已被删除
5#
发表于 2015-2-10 05:10:51 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
山那边是海 该用户已被删除
6#
发表于 2015-2-28 21:21:57 | 只看该作者
可以使用 CSS 检查工具进行设计。
灵魂腐蚀 该用户已被删除
7#
发表于 2015-3-10 08:32:44 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
简单生活 该用户已被删除
8#
发表于 2015-3-17 06:12:22 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
谁可相欹 该用户已被删除
9#
发表于 2015-3-24 00:57:59 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-4 05:26

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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