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

  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    2.8K0
  • 5种 CSS 实现DIV中内容垂直居中的方法

    使用 CSS 实现DIV中内容垂直居中并不容易,有些方法在一些浏览器中无效。 今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法,以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 <div class=…

    2018年9月23日
    5.2K0
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    3.8K0
  • CSS制作三行二列居中布局,高度自适应

    本实例要制作三行二列网页布局,这是网页制作中最常见的布局方式,如何使整个页面内容居中,如何使高度适应内容自动伸缩,是本实例中的难点。 <html> <head> <style type="text/css"> body{ background:#999; text-align:center; color…

    2018年7月29日
    3.4K0
  • javascript-快速掌握DOM技术

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

    2018年7月17日
    1.9K0
  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    4.2K0

发表回复

登录后才能评论