仓酷云

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

[DIV+CSS] 来一发从基本入手下手:CSS有用教程(三)

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

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

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

x
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。
<p/>十二.把持BOX的款式
款式表划定了一个容器BOX,它将要贮存一个工具的一切可操纵的款式。包含了工具自己、边框空缺、工具边框、工具间隙四个方面。
<pstyle="TEXT-INDENT:2em"/>

<p/>为了人人更好地舆解这些属性的意义,和相互之间的干系,请看上面这个图示:
1.边框空缺(MARGIN)
如图所示,位于BOX模子的最外层,包含四项属性。
格局分离以下:
・margin-top:顶部空缺间隔
・margin-right:右侧空缺间隔
・margin-bottom:底部空缺间隔
・margin-left:右边空缺间隔
空缺的间隔能够用带长度单元的数字暗示。
假如利用上述属性的简化体例margin,能够在厥后一连加上四个带长度单元的数字,来分离暗示margin-top、margin-right、margin-bottom、margin-left,每一个数字两头要用空格分开。
2.工具边框(BORDER)
如图所示,位于边框空缺和工具清闲之间,包含了七项属性。
格局分离以下:
・border-top:顶边框宽度
・border-right:右侧框宽度
・border-bottom:底边框宽度
・border-left:右边框宽度
・border-width:一切边框宽度
・border-color:边框色彩
・border-style:边框款式参数
个中border-width能够一次性设置一切的边框宽度,border-color同时设置四周边框的色彩时,能够一连写上四种色彩,并用空格分开。上述一连设置的边框都是按border-top、border-right、border-bottom、border-left的按次。
Border-style绝对其余属性而言稍稍庞大些,由于它还包含了多个边框款式的参数:
・none:无边框。
・dotted:边框为点线。
・dashed:边框为是非线。
・solid:边框为实线。
・double:边框为双线。
・groove:依据color属性显现分歧效果的3D边框
・ridge:依据color属性显现分歧效果的3D边框
・inset:依据color属性显现分歧效果的3D边框
・outset:依据color属性显现分歧效果的3D边框
3.工具间隙(PADDING)
如图所示,位于工具边框和工具之间,包含了四项属性。
基础格局以下:
・padding-top:顶部间隙
・padding-right:右侧间隙
・padding-bottom:底部间隙
・padding-left:右边间隙
和MARGIN相似,PADDING也能够用padding一次性设置一切的工具间隙,格局也和MARGIN类似,不再逐一枚举了。


层叠样式表(CascadingStyleSheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
变相怪杰 该用户已被删除
沙发
发表于 2015-1-18 06:14:04 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
简单生活 该用户已被删除
板凳
发表于 2015-1-25 17:25:44 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
第二个灵魂 该用户已被删除
地板
发表于 2015-2-3 12:15:32 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
小女巫 该用户已被删除
5#
发表于 2015-2-8 23:43:41 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
透明 该用户已被删除
6#
发表于 2015-2-26 14:38:35 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
admin 该用户已被删除
7#
发表于 2015-3-8 15:52:32 | 只看该作者
可以使用 CSS 检查工具进行设计。
小妖女 该用户已被删除
8#
发表于 2015-3-16 05:38:08 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
分手快乐 该用户已被删除
9#
发表于 2015-3-22 20:51:46 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-10 10:00

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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