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%的人还看了以下文章

  • 纯JS实现的验证码-可自定义长度和字符

    纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

    2018年10月9日
    3.7K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    4.0K0
  • 第14课:元素的定位

    CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。本课我们将讨论以下内容: CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…

    2020年2月25日
    3.8K0
  • javascript-快速掌握DOM技术

    Javascript的组成: 1.  js的语法(核心)。 2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本):DOM1,DOM2,DOM3 3. BOM(浏览器模型)  BOM是Browser Object Model的…

    2018年7月17日
    2.7K0
  • 第1课:开始学习HTML

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

    2018年1月20日
    6.4K0
  • jquery全选和反选功能代码,兼容所有浏览器

    <!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码,兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…

    2019年11月1日
    3.7K0

发表回复

登录后才能评论