33岁转职者的前端笔记 DAY 4 固定浮动选单 RWD 写法

随着智慧型手机的普及

网页设计也要随着时代的潮流而写出适合智慧型手机用户的网页

今天的笔记是目前最常见的 RWD 应用:固定浮动选单

首先先上范例图:

https://ithelp.ithome.com.tw/upload/images/20210904/20120789NCKcfsRyk4.jpg

背景虽然是白的但应该是看得出来我所说的效果吧XD

这是目前智慧型手机用户在线上购物最常见的排版:加入购物车及加入会员

范例语法如下:

<style>
  .button-block {
    position: fixed;
    bottom: 0;
  }

  .button-style {
    border: 1px solid #ff5353;
    border-radius: 5px;
    color: #ff5353;
    text-decoration: none;
    padding: 8px 0;
    margin-right: 10px;
    width: 98px;
    display: inline-block;
    text-align: center;
    background: #fff;
  }

  .button-style2 {
    border: 1px solid #ff5353;
    border-radius: 5px;
    color: #fff;
    background: #ff5353;
    text-decoration: none;
    padding: 8px 0;
    width: 98px;
    display: inline-block;
    text-align: center;
  }

  @media screen and (max-width:375px) {
    .button-block {
      left: 50%;
      margin-left: -107px;
      text-align: center;
    }
  }
</style>

<body>


  <div class="button-block">
    <a class="button-style" href="https://www.google.com/">加入会员</a>
    <a class="button-style2" href="https://www.google.com/">购物车</a>
  </div>




</body>

值得注意的是position: fixed;这个语法

通常我们会希望这两个按钮区块要在固定的页尾位子

这时候利用position: fixed;固定浮动的方式就能呈现我们所想要的效果罗


<<:  离职倒数27天:日本人为什麽对买房没兴趣

>>:  数位化世界

[Day 13] 资料产品生命周期管理-加工资料(二)

接续上篇 介绍一下一般开发 ETL 的流程。每只 ETL 都可以看作是独立的程序,有独立的开发流程。...

Day1 每个人都有一个财富自由梦

死线前的考验 大家好,身为一个工程师,做事情压死线是家常便饭,所以我昨天报名今天就开始写文章,我可...

[Day 29] 永和美食纪录-和陞屋牛排

前言 转眼间食记已经来到了倒数第二篇,不晓得这些日子以来笔者推荐的美食有没有读者去试过了呢?不过美食...

DAY18:激活函数

激活函数 每个神经元都有一个激活函数,由这层神经元输出给下层神经元的输入,中间就会有个函数关系,将之...

Progressive Web App 推播通知行为 (25)

推播通知行为 推播通知行为主要分成视觉、後续事件两大部分,前几天的文章开箱了: 通知选项视觉 後端推...