仓酷云

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

[DIV+CSS] CSS教程之网页制造进修教程:CSS Position

[复制链接]
只想知道 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:52:11 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
这工具比表格好的唯一就是你可以定义一个ID,想怎么玩它就怎么玩他,表格用来处理显示数据,DIV+CSS+TABLE就行了,都什么年代了,以前没有DIV,而且386的年代不也一样,现在都奔腾4了
网页制造poluoluo文章简介:网页制造进修教程:CSSPosition.
1.position:static

一切元素的默许定位都是:position:static,这意味着元素没有被定位,并且在文档中呈现在它应当在的地位。
一样平常来讲,不必指定position:static,除非想要掩盖之前设置的定位。
  1. #div-1{position:static;}
复制代码
2.position:relative

假如设定position:relative,就能够利用top,bottom,left和right来相对元素在文档中应当呈现的地位来挪动这个元素。【意义是元素实践上仍然占有文档中的原有地位,只是视觉上相对它在文档中的原有地位挪动了】
  1. #div-1{position:relative;top:20px;left:-40px;}
复制代码
3.position:absolute

当指定position:absolute时,元素就离开了文档【即在文档中已不占有地位了】,能够正确的依照设置的top,bottom,left和right来定位了。
  1. #div-1a{position:absolute;top:0;right:0;width:200px;}
复制代码
4.position:relative+position:absolute

假如我们给div-1设置relative定位,那末div-1内的一切元素城市绝对div-1定位。假如给div-1a设置absolute定位,就能够把div-1a挪动到div-1的右上方。
  1. #div-1{position:relative;}#div-1a{position:absolute;top:0;right:0;width:200px;}
复制代码
5.两栏相对定位

如今就能够利用绝对定位和相对定位来做一个两栏结构了。
  1. #div-1{position:relative;}#div-1a{position:absolute;top:0;right:0;width:200px;}#div-1b{position:absolute;top:0;left:0;width:200px;}
复制代码
6.两栏相对定位定高

一种计划是给元素设定流动高度。但这类计划对年夜多半计划来讲不太合适,由于一样平常我们不晓得元素中会有几文本,大概将要利用的准确的字号。
  1. #div-1{position:relative;height:250px;}#div-1a{position:absolute;top:0;right:0;width:200px;}#div-1b{position:absolute;top:0;left:0;width:200px;}
复制代码
7.浮动

关于可变高度的列来讲,相对定位就不起感化了,以下是别的一个计划。
我们能够浮动一个元素,使它挪动到右边/右侧,而且是文本围绕着它。这次要用于图象,但这里我们把它用于一个庞大的结构义务(由于这是我们独一的工具)。
  1. #div-1a{float:left;width:200px;}
复制代码
8.浮动列

假如我们把一个元素向左浮动,而且把第二个元素也向左浮动,theywillpushupagainsteachother。
  1. #div-1a{float:left;width:150px;}#div-1b{float:left;width:150px;}
复制代码
9.扫除浮动列

在浮动元素以后,我们能够扫除浮动来使其他元素准确定位。
  1. #div-1a{float:left;width:190px;}#div-1b{float:left;width:190px;}#div-1c{clear:both;}
复制代码

现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。
小妖女 该用户已被删除
沙发
发表于 2015-1-17 23:45:59 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。
若天明 该用户已被删除
板凳
发表于 2015-2-4 03:17:06 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
第二个灵魂 该用户已被删除
地板
发表于 2015-2-9 14:00:19 | 只看该作者
可以使用 CSS 检查工具进行设计。
深爱那片海 该用户已被删除
5#
发表于 2015-2-27 09:02:59 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
不帅 该用户已被删除
6#
发表于 2015-3-9 02:02:33 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
莫相离 该用户已被删除
7#
发表于 2015-3-16 22:05:56 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
简单生活 该用户已被删除
8#
发表于 2015-3-23 08:08:44 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-22 20:52

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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