CSS固定层的效果实现

固定层的作用

  • 内容不随页面滚动

应用范围

  • 一般用于头部导航/底部导航/页面中间导航(京东的宝贝详情页有用到,看图)

小伙伴们可以去京东随便打开一个宝贝看看..


制作

预备知识:

  • DIV+CSS基础
  • Position的四个参数作用,这里主要用到fixed属性

Tips:

  • fixed和absolute都是脱离文档流的

    区别:

    • absolute会随页面滚动而fixed不会
    • absolute的父级元素若是使用了position属性,absolute会遵循就近原则,以最近的父辈为基准
    • fixed是以内容窗口为基准进行偏移

代码实现

没有用到图片,用背景色和边框来区别,实现了顶部和底部固定,以及中间反馈固定

代码很简易,基本都是CSS2.1的知识,内含注释,看下面代码

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <title>CSS固定层的效果实现</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        outline: 0;
        border: 0;
        font-size: 100%;
      }
      /*CSS简易版reset*/

      ul {
        list-style: none;
      }

      ul li {
        float: left;
        margin: 25px;
        border: 2px solid #000;
        width: 140px;
        height: 40px;
        font-size: 30px;
        line-height: 30px;
        font-weight: bold;
      }

      div a {
        text-decoration: none;
      }
      /*ul及li的基础样式*/

      body {
        padding-top: 100px;
        padding-bottom: 80px;
      }
      /*看最后一段注释*/

      p.hightline {
        color: #f00;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
      }
      /*高亮内容第一段和最后一段*/

      #contianer {
        margin: 0 auto;
        background: #99E025;
        width: 800px;
        positon: relative;
      }
      /*盒子居中,背景颜色,宽度*/

      #header {
        background: #5CE755;
        height: 100px;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
      }
      /*顶部固定,因为宽度100%所以铺满*/

      #content p {
        text-indent: 2em;
      }
      /*行首缩进*/

      #footer {
        background: #5CE755;
        height: 80px;
        position: fixed;
        bottom: 0;
        left: 100px;
        right: 100px;
      }
      /*不设置块的宽度,通过left和right来适应窗口宽度*/
      /*#content{margin:100px auto;}*/
      /*可以通过设置margin,使页面初始化的时候内容不会被挡住,具体根据其他块大小设置
    当然也可以通过body增加padding,使其正常显示(Bootstrap就是这样做的)
    */

      .feedback {
        position: fixed;
        left: 0;
        top: 50%;
        width: 120px;
        height: 40px;
        border: 2px solid #000;
      }
      /*固定*/

    </style>
  </head>

  <body>
    <div id="contianer">
      <div id="header">
        <ul>
          <li><a href="#">测试001</a></li>
          <li><a href="#">测试002</a></li>
          <li><a href="#">测试003</a></li>
          <li><a href="#">测试004</a></li>
          <li><a href="#">测试005</a></li>
        </ul>
      </div>
      <div id="content">
        <p class="hightline">我是第一段啊,,看看有木有挡住</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit sed quisquam voluptatem veritatis incidunt enim dolore tenetur voluptas labore ex modi tempore culpa expedita, quis esse fugit vel atque dolor!</p>
        <p>Ratione, doloribus ipsum reiciendis delectus rerum. Recusandae unde officia enim facere doloribus ut omnis velit voluptatibus, distinctio, quisquam sit quae veniam, accusantium possimus repudiandae dicta dignissimos consequatur magnam eaque corporis.</p>
        <p>Ipsum expedita magni quod, nesciunt velit voluptate autem esse, sit tenetur quaerat nisi necessitatibus quae, repellendus ad optio quis suscipit laudantium. Corrupti non illum aliquid quisquam perspiciatis tempore esse nihil?</p>
        <p>Delectus, similique minima eligendi aliquid omnis animi repellendus tenetur necessitatibus sint reiciendis voluptatum ipsum eaque deserunt recusandae laborum sapiente dolores, non explicabo pariatur temporibus nam minus ut enim repudiandae illo!</p>
        <p>Quod deleniti quidem harum facere doloribus eaque aspernatur error. Labore facere repellendus quo, eaque atque fugiat quis perferendis amet dignissimos aspernatur impedit hic, eveniet beatae tempora ea dolorum nisi deleniti!</p>
        <p>Voluptatibus, beatae tempora consequuntur nihil non molestias, dicta aliquid nostrum ut libero quas enim necessitatibus placeat ducimus molestiae quod! Nesciunt repellendus perspiciatis provident laboriosam dicta doloremque quia sunt minima eius!</p>
        <p>Voluptas minus tenetur libero corrupti fugit modi dolorum, laborum quasi ab odio necessitatibus ut repellat delectus officiis impedit laudantium voluptates? Numquam tenetur quisquam odio omnis quis quaerat, recusandae quibusdam, nemo!</p>
        <p>Dicta tempora dolorum, molestiae ratione dolore quae alias libero reiciendis in harum porro eos magnam aliquam aut explicabo, iste ipsa temporibus nulla vel voluptates veritatis doloremque ut? Accusantium reprehenderit, dicta!</p>
        <p>Alias ea minus voluptates, quis, recusandae molestiae tempora quaerat eaque! Temporibus natus voluptas magni quisquam eaque, atque cum distinctio, iste, voluptates repellendus tenetur delectus veniam fuga aspernatur laborum similique voluptatem!</p>
        <p>Fugiat ducimus quis aut unde eligendi dolor sapiente numquam quasi repellendus, adipisci veniam minus alias sequi eaque maiores quam. Voluptatibus adipisci quo nobis voluptate quibusdam, tenetur deleniti velit vitae quis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam recusandae autem, et quasi sit, necessitatibus? Quo numquam magnam ipsum omnis! Voluptas labore, saepe excepturi, quod minus aliquam iste vitae laborum?</p>
        <p>Omnis asperiores ad, cumque. Impedit nisi ratione quas in libero eaque! Cumque vero ut, sint obcaecati dolorem quisquam alias esse iure nesciunt eligendi! Minus, iste. Doloribus libero animi natus laborum.</p>
        <p>Nulla laboriosam voluptates dolor totam, amet laudantium eos esse ea explicabo odit natus excepturi, unde iusto provident illo, nesciunt eveniet consectetur cupiditate consequuntur! Odio praesentium, placeat deleniti, accusantium aperiam quisquam.</p>
        <p>Iure maxime assumenda corporis consequuntur adipisci odit facilis doloribus, optio a nisi pariatur, inventore possimus aut. Consequatur vitae sapiente commodi, nostrum assumenda, similique nihil, molestiae repellendus amet ipsum exercitationem
          saepe.</p>
        <p>Esse magnam, nisi quae suscipit possimus. Excepturi asperiores consequuntur voluptatem omnis voluptatum iusto est pariatur id, rerum expedita, mollitia eos et consectetur dolorum, doloribus tempora corrupti fugiat quidem necessitatibus tempore!</p>
        <p>Recusandae hic rerum, facilis quae blanditiis et, voluptate reiciendis ad deserunt animi culpa tempora odit repellat molestiae unde saepe mollitia temporibus ab. Consequatur nisi cum similique voluptates provident velit. Suscipit?</p>
        <p>Ipsa quod dolore ullam rerum eius eum aliquid cupiditate quas suscipit ad eaque facilis, distinctio eveniet deserunt aut odio a officia ipsam id, perferendis architecto consectetur voluptatibus laborum! Accusamus, porro!</p>
        <p>Maxime dolores aliquid eum eaque temporibus harum esse laudantium qui atque velit, veritatis labore cumque id dolorem incidunt nulla optio, soluta doloremque praesentium commodi corporis eveniet necessitatibus. Velit, perspiciatis. Iusto.</p>
        <p>Incidunt ipsum quibusdam officiis odit laboriosam hic sequi illo animi quisquam eos quia, aperiam voluptatibus dicta mollitia nemo minus molestiae a non rem optio natus nam recusandae sapiente blanditiis, deleniti!</p>
        <p>Ea, tempora. Laborum animi, voluptate! Error sapiente numquam inventore, eveniet saepe non ipsam iusto nisi! Natus explicabo deserunt aperiam unde, consectetur assumenda, tenetur delectus reprehenderit quo nesciunt blanditiis et quis.</p>
        <p>Nihil tenetur vero asperiores, ad illo assumenda nostrum, at itaque amet eius enim neque, sapiente quis tempora a. Doloribus amet neque dicta nihil atque voluptatum molestiae odit, consequatur optio aliquid.</p>
        <p>Labore cumque libero qui voluptatibus veniam hic quibusdam cum, tenetur magnam nemo, odio ipsam ipsum ea. Rem facilis officiis minus, aut temporibus dignissimos voluptatem quasi necessitatibus cupiditate illo aperiam, adipisci?</p>
        <p>Iste minus eveniet nemo eius voluptatum in, excepturi sit quibusdam similique qui fugit, dicta est mollitia, corporis, placeat voluptatem quos. Amet reprehenderit saepe vitae doloribus unde, maxime sapiente, doloremque voluptas.</p>
        <p>Ipsum natus veritatis ducimus excepturi voluptatibus in, modi voluptate quod. Neque magni voluptatem, hic dignissimos minus veritatis harum quasi. Quidem accusamus nihil sapiente eaque recusandae assumenda eius, maiores vitae quaerat.</p>
        <p>Totam itaque fugiat quasi quos quidem, vel modi cum impedit corrupti iure, quo laborum dolores doloremque libero nam facere praesentium? Nam quam dolores, iusto nemo minus magnam iure sit consequatur.</p>
        <p>Voluptatem nemo, dolorum commodi ipsa, quasi ut aliquam quas aut quos! Nemo quae vel odio sunt, perspiciatis quo dolor, esse sequi saepe aperiam nostrum sed, cupiditate corporis, totam natus quia.</p>
        <p>Ratione vero numquam, officiis vitae illum debitis odio nemo fuga, laboriosam, ut iusto? Obcaecati maxime blanditiis error tempore rerum doloribus consequatur veniam optio voluptatibus enim aspernatur nobis aliquam, reprehenderit non.</p>
        <p>Qui asperiores alias deleniti ipsam, sapiente quasi nobis pariatur accusamus deserunt inventore aut incidunt officiis maiores, rerum saepe necessitatibus sit! Ipsam iusto reiciendis quod suscipit, non sint repudiandae, error nulla.</p>
        <p>Ipsa est aliquam non, odio illo veniam beatae eaque. Aperiam tempore odit laboriosam vitae incidunt dignissimos, dolorem blanditiis quam nobis nihil magni laudantium libero sit accusantium, inventore hic laborum provident!</p>
        <p>Voluptates minus veritatis sint quas laborum nostrum, velit, sed eveniet at accusamus repellat ut est impedit ipsam deleniti eos in aspernatur. Minima porro enim consequatur debitis illo pariatur deleniti quod.</p>
        <p>Maxime, fugit, odit! Neque dolorem velit minima mollitia est consectetur, omnis vero hic ipsam natus at deserunt, unde assumenda ullam perspiciatis in a nulla odit doloremque quam laudantium quis. Error!</p>
        <p>Qui, molestiae! Ut, nostrum, quia veniam necessitatibus illo eaque a magni saepe eum ipsum? Neque pariatur perferendis dolore temporibus voluptas sapiente enim accusamus hic molestias, cum illo magnam rerum quaerat.</p>
        <p>Earum, inventore, porro. Officiis recusandae blanditiis repudiandae error incidunt nesciunt iste, voluptatibus similique nihil voluptatum, asperiores deleniti harum velit praesentium minima nobis ea repellendus aliquid vitae, excepturi! Dolore
          doloribus, vel.</p>
        <p>Esse reiciendis dolorem neque repellendus doloremque voluptatibus natus nostrum dignissimos eveniet voluptatum non eum commodi facilis deleniti iusto cum consequatur vel praesentium in, dicta consequuntur eos? Neque totam, rerum quis!</p>
        <p>Voluptates pariatur laudantium possimus et deserunt blanditiis ratione voluptatum aut. Error, assumenda, vero? Nam possimus sequi repudiandae molestias iusto laboriosam error, quisquam debitis non, alias placeat quasi facilis nostrum assumenda.</p>
        <p>Explicabo deleniti, aut qui assumenda. Cumque in minima cupiditate sint facere temporibus error omnis, similique nostrum facilis fugit, eos voluptatum molestiae possimus soluta quos excepturi magnam, repellendus nulla maiores amet.</p>
        <p>Non provident consequuntur minus libero voluptates voluptatum omnis maiores rem, dolorum, saepe quibusdam dignissimos corporis unde quisquam, pariatur dicta, animi illum? Earum voluptatum iure nemo consequuntur et incidunt quia aliquid.</p>
        <p>Molestiae voluptatem modi mollitia libero facilis suscipit at porro, expedita ipsam laboriosam nihil sed, commodi voluptatibus itaque, ex doloribus repellat saepe ea numquam dolores magnam officia. Natus explicabo adipisci inventore?</p>
        <p>Possimus dolorem ad obcaecati. Provident iusto doloribus incidunt, nihil, amet eum omnis pariatur dolor accusantium libero cupiditate, blanditiis architecto ea vero? Totam perferendis ipsam, est natus enim magnam beatae vel.</p>
        <p>Voluptatibus ratione fuga expedita placeat odio dolores maxime quas voluptas exercitationem, illum repudiandae laborum nobis libero, earum rem deserunt quam laboriosam suscipit quasi. Ducimus iusto laborum, error reiciendis voluptatem magni.</p>
        <p class="hightline">我是最后一段啊,,看看有木有挡住</p>
      </div>
      <div id="footer">
        <ul>
          <li><a href="#">测试001</a></li>
          <li><a href="#">测试002</a></li>
          <li><a href="#">测试003</a></li>
          <li><a href="#">测试004</a></li>
          <li><a href="#">测试005</a></li>
        </ul>
      </div>
      <div class="feedback">我是反馈窗口啊</div>
    </div>

  </body>

</html>
时间: 2024-10-06 05:37:15

CSS固定层的效果实现的相关文章

CSS立体文字效果最佳实践

上一篇的<纯CSS3文字效果推荐>文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,今天来补充下,顺便领略sass的强大功能,请大家摩摩拳擦擦掌,开工咯! 案例效果还是在codepen,在线研究点这里,下载收藏点这里. 1.单单纯纯的效果一 为了简化操作,我们使用和上一篇文章<纯CSS3文字效果推荐>一样的文档结构,后面的效果大差小不差,也就不再列出. <div contenteditable

css 实现评分效果

css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上稍有偏差. 我的理解:有人认为background-position  的位置移动中,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置, 可参见:http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html

利用div和css制作三角形效果

利用div和css制作三角形效果:本章节介绍一下如何利用div和css实现三角形效果,虽然看起来表神奇,但是原理是非常的简单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁

HTML5 CSS3专题 纯CSS打造相册效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点. 先看html文件: <body> <div id="gallery"> <h1>纯CSS3相册效果&l

css三级菜单效果

一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>css实现三级菜单</title> <style type="text/css"> *{margin:0;padding:0} ul{list-style:none} a{text-decoration:none} body{fon

css图片切换效果分析+翻译整理

Demos:http://tympanus.net/Tutorials/CSS3SlidingImagePanels/ 出处:http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/ 这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板.主要想法是在面板中使用背景图片,然后在点击标签后让动画起效. 今天我们将向您展示如何创建仅适用于CSS一些巧妙的滑动图像面板.该想法是使用背景图像的面板和一个标签上点击时动画

纯CSS实现圆角效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

如何利用CSS实现三角形效果

如何利用CSS实现三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.有时候我们经常发现有些矩形的某个地方会出现三角形效果,感觉挺神奇的,当然可以使用背景图片实现,这里简单介绍一下不采用背景图片的效果.代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件