给大家带来CSS教程：实习层DIV的定位小实例

显示全部楼层 · 发表于 2015-1-16 00:07:33

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

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

x

一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
层的定位是良多人对照困扰的成绩，点击弹出层会跟着分辩率的改动层的地位也变化。

用实践截图来形貌成绩征象：

登录/注册后可看大图

那末如何让层流动在一个地位,不论分辩率或窗口改动而变更呢？这就是我所要纪录的层的定位成绩:
创建一个父级div，不改动x、y，然后在这个父级div内里包括一个子级div，在这个子级div里任意改动它的地位（设置top和left值）。

实例论述：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>关于层的定位</title>
</head>
<body>
<divstyle="width:800px;margin:0auto;background:#FFFFCC;overflow:auto;font-size:12px">
<divstyle="margin:100px0100px100px"><ahref="#">更多乡村>></a></div>
<divstyle="position:relative;width:0;height:0">
<divstyle="position:absolute;top:-95px;left:130px;width:200px;background:#DDDDDD">北京上海广州</div>
</div>
</div>
</body>
</html>

预览截图：

登录/注册后可看大图

表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

显示全部楼层 · 发表于 2015-2-2 22:30:02

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来CSS教程：实习层DIV的定位小实例

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

相关帖子

浏览过的版块