仓酷云

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

[DIV+CSS] 带来一篇CSS中关于绝对定位和相对定位

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

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

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

x
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。
<style>
body
{margin:30px;font-size:9pt;}

.a,.b,.c,.d,.e
{
width:100px;
height:100px;
margin:5auto;
color:#fff;
background:#000;
}
.aa,.bb,.cc,.dd,.ee
{
top:10px;
left:10px;
width:10px;
height:10px;
overflow:hidden;
background:#F90;
}
.b,.d,.e
{position:relative;}
.cc,.dd,.ee
{position:absolute;}
</style>

<divclass="a">
<divclass="aa"></div>
A:均不设置postion,一样平常嵌套干系
</div>

<divclass="b">
<divclass="bb"></div>
B:仅外div设置relative,一样平常嵌套干系
</div>

<divclass="c">
<divclass="cc"></div>
C:仅内div设置absolute,文档中为嵌套干系,页面中内div浮起[非float],相对页面定位,与外div有关。
</div>


<style>
body
{margin:30px;font-size:9pt;}

.a,.b,.c,.d,.e
{
width:100px;
height:100px;
margin:5auto;
color:#fff;
background:#000;
}
.aa,.bb,.cc,.dd,.ee
{
top:10px;
left:10px;
width:10px;
height:10px;
overflow:hidden;
background:#F90;
}
.b,.d,.e
{position:relative;}
.cc,.dd,.ee
{position:absolute;}
</style>

<divclass="a">
<divclass="aa"></div>
A:均不设置postion,一样平常嵌套干系
</div>

<divclass="b">
<divclass="bb"></div>
B:仅外div设置relative,一样平常嵌套干系
</div>

<divclass="c">
<divclass="cc"></div>
C:仅内div设置absolute,文档中为嵌套干系,页面中内div浮起[非float],相对页面定位,与外div有关。
</div>

<divclass="d"style="background:#ff0000">
<divclass="dd"></div>
D:外div设置relative,内div设置absolute,内div浮起来并相对外div定位
</div>


<divclass="d"style="background:#ff0000">
<divclass="dd"style="position:relative"></div>
D:外div设置relative,内div设置relative,内div浮起来并相对外div定位
</div>

<divclass="e">
<divclass="ee"style="left:-10px;"></div>
E:这个是申明界限成绩。-10!=反向10px间距
</div>

注重两个白色的中央笔墨,个中,相对定位在嵌套中,好象要站居必定地位,而绝对定位则没有</p>
你用什么用的熟练就用什么,讲究的是效率,客户永远不管你用什么,页面就要好看,功能就要好用,还有时间和成本的问题。
分手快乐 该用户已被删除
沙发
 楼主| 发表于 2015-1-18 06:05:18 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
精灵巫婆 该用户已被删除
板凳
发表于 2015-1-21 17:57:19 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
简单生活 该用户已被删除
地板
发表于 2015-1-30 21:42:17 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
活着的死人 该用户已被删除
5#
发表于 2015-2-6 16:14:08 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
兰色精灵 该用户已被删除
6#
发表于 2015-2-17 06:03:58 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
金色的骷髅 该用户已被删除
7#
发表于 2015-3-5 16:54:59 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
蒙在股里 该用户已被删除
8#
发表于 2015-3-12 11:06:33 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
灵魂腐蚀 该用户已被删除
9#
发表于 2015-3-19 21:20:28 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 22:12

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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