apicloud apicloud

注册
查看: 9466|回复: 10

[新手教程] 从1开始学晋城(三) —— 蓝色样式

主题:
28
帖子:
88
云币:
757

[新手教程] 从1开始学晋城(三) —— 蓝色样式

9466 10 | 发表于 2014-12-6 22:30:37 |阅读模式 | |
本帖最后由 老邮局 于 2015-7-23 20:48 编辑

》》更多视频教程请关注 www.9y.cm《《


我们来看下蓝色部分的布局:

具有的特征:
1、整个按钮组外边框有阴影效果。
2、每个正方形按钮(li标签)外部样式:右侧和下侧有边框。
3、每个按钮内部样式:由一个图标和文字组成。
4、每行第4个按钮右侧无边框。


如何实现:
1、box-shadow设置阴影效果。2、这种多个同类元素的,一般用ul和li标签吧。
3、按钮肯定要触发哒,就用a标签。常用的方法是里面包裹着一个img和一个span
4、笨的方法是,每个li定义个id,在css中处理掉右侧边框。不过这里用高大上的伪类选择器。


先看下布局:
  1. <div id="life">
  2.         <ul>
  3.                 <li class="checkin"><a tapmode="active" onclick="openWin('checkin')">签到有礼</a></li>
  4.                 <li class="shop"><a tapmode="active" onclick="openWin('404')">24h便利店</a></li>
  5.         </ul>
  6. </div>
复制代码

1、整体阴影
  1. #life{
  2.         -webkit-box-shadow: 0px 2px 4px #dddcdc;    // 阴影y轴偏移2px,阴影模糊宽度4px,颜色等设置
  3.         box-shadow: 0px 2px 4px #dddcdc;
  4. }
复制代码

2、每个按钮外部的基本样式(按钮的宽和高、右侧和下侧有边框、每行4个按钮)

  1. 08  #life ul li{
  2. 09        text-align: center;                                // 文字水平居中
  3. 10        border-right: 1px solid #d9d9d9;       // 右边框的宽度、样式、颜色
  4. 11        border-bottom: 1px solid #d9d9d9;   // 下边框的宽度、样式、颜色
  5. 12        float: left; width: 25%;                          // 每个按钮占屏幕的25%,一行将由4个按钮组成。
  6. 13        -webkit-box-sizing: border-box;        // 盒子模型,这个非常重要,后面我们详细说明!!!!
  7. 14        box-sizing: border-box;
  8. 15        background-color: #fff;
  9. }
复制代码
》行12定义按钮的宽度每个按钮(li标签)占用25%的屏幕宽度,也就是一排四个按钮;按钮的高度在第3步中定义
》行13,开启border-box盒子模型。box-sizing是盒子模型的一种。CSS中盒子模型是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型。他们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系;他们不同之处呢?两者的计算方法不一至:
简单的说,content-box 外增长,border-box内增长。

例如:当定义好一个元素的宽以后,再定义其padding、margin、border等属性,会有什么情况发生呢:

box-sizing
简要说明
看图识字
content-box width为内容宽度,盒子会向外扩展,撑爆你的页面
border-box width为元素整体宽度,盒子会向内扩展,压缩内容

因此,如果不设置为border-box,稍加不爽,就可能撑爆你的页面:


3、按钮内部样式:图标和文字
  1. 19  #life ul li a{
  2. 20          display: block;                                                        // a默认无宽高,我们要为他加载背景图片所以需要设置它为block,再设置宽高,这是套路
  3. 21          padding-top: 60px; padding-bottom: 16px;        // 给a设置高度,其实就是定义了单个按钮的总高度为:padding-top + padding-bottom + 文字高度
  4. 22          color: #4d4d4d;                                                      // 文字的颜色
  5. 23          background-repeat: no-repeat;                            // 图片不重复显示
  6. 24          background-position: center 16px;                      // 背景图片显示的具体位置:左右居中,离上边框16px
  7. 25          -webkit-background-size: 35px 35px;                  // 背景图片缩放为35px × 35px大小
  8. 26          background-size: 35px 35px;
  9. 27  }
  10. 28  #life ul li.checkin a{
  11. 29          background-image: url(../image/checkin.png);  // 加载本地图片
  12. 30  }
  13. 31  #life ul li.shop a{
  14. 32          background-image: url(../image/shop.png);
  15. 33  }
复制代码
》行21,设置按钮的高度,(a标签设置为block后,其会充满父元li,因此a的高度就是整个按钮li标签的高度),宽度第2步中说了,是屏幕宽的25%。
》行24,设置背景图片加载进来在什么位置显示(左右居中,离上边框16px的位置显示)。

我给大家画个图感觉一下:


4、每行第四个按钮右侧无边框
  1. #life ul li:nth-child(4n){     // 匹配4的倍数,也就是4、8、12、16......
  2.         border-right: 0;
  3. }
复制代码
这里用到了css3的伪类选择器(nth-child)。用它最大的好处是,你直接可以通过an+b这个公式定位某个子元素,而不必每个li标签都定义一个id。




OK,蓝色部分的布局我们就说完了,红色和绿色部分也不说了,道理一样。自己动手写了几行代码多少有点心得了,比如布局尽量使用盒子,因为它具有“弹性”,否则会出异常情况,比如我的荣耀6虚拟按键是可以隐藏/显示,会造成截然不同的状况:
                           




文章导航:
从1开始学晋城(一) —— 概览
从1开始学晋城(二) —— 首页main部分
从1开始学晋城(三) —— 蓝色样式

从1开始学晋城(四) —— 热门活动
从1开始学晋城(五) —— 下拉菜单

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

主题:
2
帖子:
16
云币:
15
发表于 2014-12-7 10:03:59 |
感谢毛豆的分享,如果能多介绍数据交互方面的就更好了。

主题:
3
帖子:
20
云币:
111
发表于 2014-12-7 11:29:16 |
真的十分感谢楼主的无私分享,让新手快速入门!

马路杀手

UID:934

主题:
4
帖子:
676
云币:
1223
发表于 2014-12-8 10:45:18 |
分析的非常好啊~~~

主题:
28
帖子:
521
云币:
85900011

APICloud粉丝端午节

发表于 2014-12-8 15:14:11 |
高手啊。。。

主题:
2
帖子:
9
云币:
25
发表于 2014-12-9 15:40:58 |
真赞!收藏参考...

驾校小白

UID:14416

主题:
0
帖子:
2
云币:
2
发表于 2014-12-9 18:55:24 |
apicloud 后台不分享,光看前台页面有什么用啊

主题:
8
帖子:
363
云币:
2726

APICloud粉丝

发表于 2015-7-8 18:40:43 |
好东西,赞一下

驾校小白

UID:166352

主题:
0
帖子:
15
云币:
23
发表于 2015-9-26 15:42:38 |
谢谢分享

主题:
1
帖子:
8
云币:
27
发表于 2017-4-6 15:08:53 |
function tijiao(){
  
    var client = new Resource("A6945307925821", "8A5F43DE-2BBB-F6B4-DEB3-610CED2515E7");
var Model = client.Factory("jilu");
   var getUrl='/jilu/count?filter=';
            var urlParam={
                    where:{username:uname}
            }
               ajaxRequest(getUrl + JSON.stringify(urlParam) , 'GET', '', function (ret, err) {
              if( input[type="radio"]:checked ){
              
                     
                    var bodyParam = {
                        a1: '正常',
              }
              
              
                    };
                    ajaxRequest(registerUrl, 'post', JSON.stringify(bodyParam), function (ret, err) {
                        if (ret) {  api.alert({
                                msg: '数据保存成功!'
                             
                            }, function () {
                           
                                api.closeWin();
                            });
                            }
                            }
                            }
                            }
                            )}单选按钮表单,保存不了

12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表