随着智慧型手机的普及
网页设计也要随着时代的潮流而写出适合智慧型手机用户的网页
今天的笔记是目前最常见的 RWD 应用:固定浮动选单
首先先上范例图:
背景虽然是白的但应该是看得出来我所说的效果吧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;
固定浮动的方式就能呈现我们所想要的效果罗
接续上篇 介绍一下一般开发 ETL 的流程。每只 ETL 都可以看作是独立的程序,有独立的开发流程。...
死线前的考验 大家好,身为一个工程师,做事情压死线是家常便饭,所以我昨天报名今天就开始写文章,我可...
前言 转眼间食记已经来到了倒数第二篇,不晓得这些日子以来笔者推荐的美食有没有读者去试过了呢?不过美食...
激活函数 每个神经元都有一个激活函数,由这层神经元输出给下层神经元的输入,中间就会有个函数关系,将之...
推播通知行为 推播通知行为主要分成视觉、後续事件两大部分,前几天的文章开箱了: 通知选项视觉 後端推...