仓酷云

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

[DIV+CSS] 给大家带来CSS进修教程:display属性利用具体解说

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

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

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

x
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
破洛洛文章简介:DIVCSSdisplay(blocknoneinline)属性的用法教程.
在一样平常的CSS结构制造时分,我们经常会用到display对应值有block、none、inline这三个值。上面我们来分离来熟悉和进修甚么时分用甚么值。这里经由过程CSSdisplay常识加实例、图演示解说办法来进修和懂得DIVCSSdisplay
1、CSSdisplay利用
以下为DIVCSS使用dispaly,申明这里dispaly值恣意
CSS代码:
.divcss5{display:none}
Html对应使用:
<divclass="divcss5">我是测试内容</div>
依据以上能够本人DIV+CSS下,看看利用了局
2、display的值有哪些
Cssdisplay值与注释-(具体可见CSS手册的CSSdisplay手册)
参数:

block:块工具的默许值。用该值为工具以后增加新行
none:埋没工具。与visibility属性的hidden值分歧,其不为被埋没的工具保存其物理空间
inline:内联工具的默许值。用该值将从工具中删除行
compact:分派工具为块工具或基于内容之上的内联工具
marker:指定内容在容器工具之前或以后。要利用此参数,工具必需和:after及:before伪元素一同利用
inline-table:将表格显现为无前后换行的内联工具或内联容器
list-item:将块工具指定为列表项目。并能够增加可选项方针志
run-in:分派工具为块工具或基于内容之上的内联工具
table:将工具作为块元素级的表格显现
table-caption:将工具作为表格题目显现
table-cell:将工具作为表格单位格显现
table-column:将工具作为表格列显现
table-column-group:将工具作为表格列组显现
table-header-group:将工具作为表格题目组显现
table-footer-group:将工具作为表格脚注组显现
table-row:将工具作为表格行显现
table-row-group:将工具作为表格行组显现
3、cssdisplayblock
Display:block是我们经常使用的,block也是Display默许的值。
注释:该工具随后的内容主动换行。
cssdisplayblock实例
CSS代码:
.divcss5{display:block}
Html对应使用代码:
<spanclass="divcss5">我的前面笔墨会换行</span>我是被后面的divcss5对应CSS属性换行。
<span>不会被换行,由于我没有被设置display:block</span>
申明这里利用span作实例,一个被设置CSS款式,一个未设置,本人能够对照被设置DIVdisplay:block款式的工具随后的内容被换行。
4、cssdisplaynone
此display的none值,我们也经常利用,用于埋没工具内容,被埋没的工具也不会占用本身固有宽度高度空间。
5、cssdisplayinline
Display:inline,我们经常在li中利用它。功效是让li排成一排(称:删除行)。
接上去我们以一个未设置li列表与一个设置cssDisplayinline款式对照实例演示演示。
Css代码
ul.divcss5li{display:inline}
注释:ul.divcss5对应licss款式属性为display:inline
Html对应代码:
<ul>
<li>我父级ul没有divcss5款式</li>
<li>我是独行</li>
<li>我是独行</li>
</ul>
<ulclass="divcss5">
<li>我父级ul有divcss5款式</li>
<li>我站成一排</li>
<li>我在divcss5下li站成一排</li>
</ul>
申明:设置css为display:inline的li工具,li被排成一排,而未设置的li列表工具仍旧承继本来本身独有一行的CSS款式。
以上是DIVCSS5为人人收拾和展现的关于CSSdisplay经常使用的属性对应displaynone、displayinline、displayblock值的具体解说与实例,但愿对你有匡助。
</p>
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
沙发
发表于 2015-1-17 19:55:53 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
山那边是海 该用户已被删除
板凳
发表于 2015-1-26 22:20:22 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
爱飞 该用户已被删除
地板
发表于 2015-2-5 04:38:21 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
小魔女 该用户已被删除
5#
发表于 2015-2-11 05:48:17 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
若天明 该用户已被删除
6#
发表于 2015-3-1 23:36:48 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
再见西城 该用户已被删除
7#
发表于 2015-3-11 03:14:05 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
愤怒的大鸟 该用户已被删除
8#
发表于 2015-3-17 21:10:33 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
乐观 该用户已被删除
9#
发表于 2015-3-25 06:17:41 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 21:37

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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