css布局基础:定位综合练习

主要知识点:

1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位)

position:static/relative/absolute/fixed/sticky。

2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。

整体效果图:

整体效果图

效果说明:

1、随着网页向下滚动,当导航到达窗口顶端(top=0)时,固定在顶端。

2、分享模块在屏幕的固定位置显示。

3、banner图是由3部分堆叠组成:底层图片、中层透明遮罩层、顶层文字加按钮。

参考:

  • 导航吸附效果:
nav{ position: sticky; top: 0; z-index: 9999; }
  • 分享模块固定显示:
.share{ position: fixed; left: 100%; margin-left: -100px; bottom: 50px; width: 100px; ...}
  • 3层banner图部分:

html结构部分:

<section class="top">
     <div><img src="img/1.jpg"/></div>
     <div></div>
     <div><p>MY BEAUTIFUL LIFE</p><br/><button>LOOK MORE &nbsp;&nbsp;&gt;</button></div>
</section>

css效果:

.top{ position: relative; }
.top img{ width: 100%; height: 200px; }
.top div:nth-child(2){
        width: 100%;
        height: 200px;
        background-color: #000000;
        opacity: 0.5;
        position: absolute; /*最近定位祖先元素为.top*/
        top:0;
        left: 0;
}
.top div:nth-child(3){
        position: absolute;
        width: 350px;
        height: 80px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto auto; /*四边都为0,margin为auto,居中*/
        text-align: center; /*内容又居中*/
}

本文来自投稿,不代表125jz立场,如若转载,请注明出处:http://www.125jz.com/5538.html

(2)
孙萍的头像孙萍管理团队
上一篇 2020年4月4日 上午7:39
下一篇 2020年4月4日 上午7:51

99%的人还看了以下文章

  • label文字与textarea、input垂直居中、顶部对齐的方法

    在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观,如下图。 姓名: 留言: 中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。 label文字与textarea、input垂直居中的方法 在input标签样式中加入css标签vertical-align: middle…

    2018年3月18日
    10.7K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    5.5K0
  • 36个漂亮的CSS3动态按钮,纯CSS制作无图片

    36个漂亮的纯CSS制作的动态按钮。

    2020年2月2日
    4.7K0
  • js判断输入字符串是否为空、空格、null总结

    本文总结了在用户输入表单数据时,如何使用JS判断输入空格,为空或null的三种情况。

    2021年11月30日
    5.4K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    3.7K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    3.3K0

发表回复

登录后才能评论