第三十六章 定位(一)

前面我们写了一个网页,当然,我们都知道这是一个很简单很基础的网页。只是我们心照不宣的照样拿他出去炫耀罢了,咳咳,这个秘密谁也不许往外说,否则莫怪为师……

串词了,没事,你就当没看见。那么大家看前边的布局的时候有没有觉得很单调乏味呢?想横排,用浮动,浮动之后要清除;想居中,两边补,外补自动有宽度。就这点东西吧,翻来覆去还是这点东西。很无聊的,也很死板的,仅凭这样的三脚猫功夫肯定是搞不出来灵动洒脱的网页来的。

当然了,要是就是某些网游的官网,坚持十年前的套路,十年了,那些结构都没变过,换换背景就是另一家游戏……那你现在的水平应该可以应付了的说。我在说什么你懂的,反正我是不懂的。

得,咱们闲言少叙,书归正文,啪,响木这么一拍呀,别的咱不夸……

那个这一节开始我们讲一些元素的定位方式,其实吧,他们说什么绝对定位相对定位的我也分不清,总觉得有点故弄玄虚。但是我知道每一种定位方式是怎么回事,什么时候该怎么用。反正到目前为止一只狗用一直够用,除了没法装[哔~]。

元素定位方式的属性是:position,他的默认值是static,这个了解下就好,我又是现查的,因为并不常用啊,默认值一般都省略不写了。

现在我们来认识几个特殊的定位方式:

fixed,这个应该是最受新人欢迎的定位方式,好理解,效果明显,也好玩。他是相对于浏览器的定位。

就是你随便怎么上下滚动页面,这家伙就铁了心的不动弹。因为他是相对于浏览器的窗口的,浏览器窗口没移动和变化,那其他的事就跟他没啥关系,这就好像十字路口的交警,任你车来车往,他就站在那里坚守岗位。

然后我们举个简单的例子说明一下:

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<title>fixed 定位实例</title>

<style>

#miao {

width: 130px;

height: 30px;

position: fixed;;

left: 30px;

bottom: 30px;

background: #C00;

line-height: 30px;

color: #FFF;

text-align: center;

}

</style>

</head>

<body>

<p>请将本行重复一万次,当然你要是和我一样懒,复制到超过一页就好,适当多点可以方便查看效果,我就不复制那么多了,本章的长短与稿费无关……其实根本没有稿费好吗</p>

<div id=“miao”>我就在这不动了!</div>

</body>

</html>

试试效果吧,你怎么滚动那个红色的元素总在左下角,不会发生移动,如下图:

那么上面的代码大部分都很容易理解了,我来解释一下其中的 left 和 bottom。我们说:position: fixed;; 是说定位方式,相对于浏览器窗口定位。但是我们说他的位置了没有?没有啊!

这 left 和 bottom 就是说明他的位置的,我解释给你听啊: left 就是说元素的左边缘和浏览器的左边缘之间的距离;同理 bottom 就是说元素的下边缘和浏览器的下边缘之间的距离。

然后聪明的你就可以举一反三地说出 right 和 top 的意思了。嗯,这四个东西下节课还要用哦~

留个作业,除了那种悬浮的“在线客服”或者广告之类的东西以外,大家找找 fixed 定位还在哪里被用出了高大上的效果?

本章代码下载:本章代码

原文链接:https://www.ek58.com/archives/1205,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?