内容简介：在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在PC端，我们可以使用position:fixed来实现。但是由于position:fixed存在一定的兼容性问题，而且移动端的视口较多，这个固定究竟是相对于哪个视口，很容易搞错。因此，通常都会使用绝对定位来代替固定定位。下面具体代码举例：HTML代码如下所示：
在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在PC端，我们可以使用position:fixed来实现。但是由于position:fixed存在一定的兼容性问题，而且移动端的视口较多，这个固定究竟是相对于哪个视口，很容易搞错。因此，通常都会使用绝对定位来代替固定定位。下面具体代码举例：
HTML代码如下所示：
<body>
<header class="header-box">
<div class="header-top">
</div>
<div class="header-bottom">
</div>
</header>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
CSS代码如下所示：
.header-box{
/*position:fixed;*/
position:absolute;
left:0;
top:0;
width:100%;
height:179px;
background:#ef3229;
}
ul>li{
height:350px;
border-bottom: 1px solid black;
}
上面的html中定义了顶部固定区域和下方内容区域。顶部使用了position进行了绝对定位。内容区域高度超过了可视区。
最终得到的效果如下图所示：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- Vue实战-头部模块编写（5）
- 将 Swift 序列切分为头部和尾部
- IPV4与IPV6的头部PK
- Vue-SSR: head Mixin 实现头部信息管理
- 程序员难逃二八法则，如何晋升为头部 20% 玩家？
- Proxy-Go v10.3 发布，新增 Proxy 私密头部控制参数！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Swift语言实战入门
伍星、罗飞、刘志华、王浩力、刘蕾 / 人民邮电出版社 / 2014-10-23 / 79
《Swift语言实战入门》以Swift语言的基础知识和实战技巧为主要内容，佐以大量的实例和图片进行讲解。全书内容分为三大部分，共11章节。第一大部分讲述Swift语言的基础知识和语法，第二大部分讲解开发框架和库的相关内容，第三大部分集中讲解以2048游戏为例的实战演练，从入门到实战层层递进。本书注重实战，秉承着学以致用的原则，让读者真正看后能够实际操作。120个代码清单全部共享，配套教学视频在线收......一起来看看 《Swift语言实战入门》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
正则表达式在线测试
正则表达式在线测试