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

  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    2.7K0
  • 第5课:文本

    文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解: text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

    2020年2月22日
    2.2K0
  • H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

    frameset标签定义框架集,它用于组织多个窗口(框架)。每个框架存在一个独立的文档。 <frameset id=”frame” frameborder=”0″ framespacing=”0″ rows=”100,*” border=”false” scrolling=”yes”> <frame name=”topframe” scro…

    2020年1月1日
    6.6K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    2.3K0
  • 导航特效:jquery实现当前(活动)菜单样式变化

    用户点击导航或菜单上不同的栏目,被选中的导航栏目会变换样式,出现图片或背景颜色的变化,用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前(活动)菜单样式变化,导航菜单模式用的是背景颜色,你可以换成背景图片以符合建站需要。 当前(活动)菜单样式变化实现原理 在html代码中给首页(默认选中)加上class名cur <a href=…

    2018年2月8日
    1.8K0
  • CSS制作三角形原理—超简单

    网页制作中我们经常会需要三角形图标,例如内容展开收起、左右箭头点击切换轮播,点击某条列表数据查看详情等。 三角形图标应用范围广,我们有必要了解一下它的实现原理。 1) 一个最基础的边框效果 .content { width: 50px; height: 50px; border: 2px solid; border-color:#ff9600 #3366ff…

    2019年11月26日 网页制作
    2.5K0

发表回复

登录后才能评论