稻米鼠 · 更新于 2018-05-24 22:00:34

第三十六章 定位(一)

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

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

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

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

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

元素定位方式的属性是: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>

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

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

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

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

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

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me