移动 WEB 开发之阿里百秀移动端页面制作

一、技术选型

二、需求分析

1.页面布局分析

2. 屏幕划分

三、页面制作

1. 项目前期准备

搭建项目结构
创建 html 骨架结构以及引入相关样式

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

    <!-- 引入bootstrap 样式文件 -->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- 引入我们自己的首页样式文件 -->

    <link rel="stylesheet" href="css/index.css">

    <title>Document</title>

</head>

2. container 宽度修改

index.css

/* 修改container最大宽度为 1280  */

@media screen and (min-width:1280px){

    .container {

        width: 1280px;

    }

}

3. 首页布局

index.html

 <div class="container">

       <div class="row">

           <header class="col-md-3">左侧</header>

           <article class="col-md-7">中间</article>

           <aside class="col-md-2">右侧</aside>

       </div>

   </div>

4. logo制作

index.html

<header class="col-md-3">

         <div class="logo">

               <a>

                 <img src="data:images/logo.png"/>

               </a>

          </div>

 </header>

index.css

/* header 左侧部分 */

.logo{

    background-color: #429ad9;

}

我们发现左侧是有padding值的

如果我们不想要padding-left，可以给header设置或者再添加一个类，记住不能给col-md-3设置，不然后面也会相应的被设置

header{

    padding-left: 0!important;

}

存在的问题，当屏幕缩放时，图片就会显示不全了

解决方法：让图片的宽度与父级一样宽，实现自适应的缩放效果

.logo img {

    width: 100%;

}

5. nav 内容制作

index.html

<div class="nav">

                <ul>

                    <li><a href="#" >生活馆</a></li>

                    <li><a href="#" >自然汇</a></li>

                    <li><a href="#" >科技湖</a></li>

                    <li><a href="#" >奇趣事</a></li>

                    <li><a href="#" >美食节</a></li>

                </ul>

</div>

index.html

index.css

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}

a {

    color: #666;

    text-decoration: none;

}

a:hover {

    text-decoration: none;

}

/* nav部分 */

.nav {

    background-color: #eee;

    border-bottom: 1px solid #ccc;

}

.nav a {

    display: block;

    height: 50px;

    line-height: 50px;

    padding-left: 30px;

    font-size: 16px;

}

.nav a:hover {

    background-color: #fff;

    color: #333;

}

6. nav 中引入字体图标

 <li><a href="#" class="glyphicon glyphicon-camera" >生活馆</a></li>

字体图标位置不对，需要调整一下字体图标位置

.nav a::before {

    vertical-align: middle;

    padding-right: 5px;

}

index.html

<div class="nav">

          <ul>

              <li><a href="#" class="glyphicon glyphicon-camera" >生活馆</a></li>

              <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>

              <li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li>

              <li><a href="#" class="glyphicon glyphicon-th" >奇趣事</a></li>

              <li><a href="#" class="glyphicon glyphicon-glass" >美食节</a></li>

          </ul>

</div>

7. 新闻模块布局

index.html

 <article class="col-md-7">

               <!-- 新闻模块 -->

               <div class="news">

                   <ul>

                       <li>1</li>

                       <li>2</li>

                       <li>3</li>

                       <li>4</li>

                       <li>5</li>

                   </ul>

               </div>

  </article>

index.css

/* 中间的新闻模块 */

.news li{

    float:left;

    width: 25%;

    height: 128px;

}

.news li:nth-child(1){

    width: 50%;

    background-color: pink;

    height: 266px;

}

8. news 中的第1 模块

想要第一个与后面的盒子有个 padding-right值，可以给 li 设置padding-right值，然后给里面的 a 设置宽高为 100%

.news li{

    float:left;

    width: 25%;

    height: 128px;

    padding-right: 10px;

}

.news li a {

    width: 100%;

    height: 100%;

    background-color: purple;

    display: block;

}

index.html

<li>

    <a href="#">

       <img src="upload/lg.png" alt="">

       <p>阿里百秀</p>

    </a>

 </li>

index.css

.news li a img {

     width: 100%;

     height: 100%;

 }

 .news li a p {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 41px;

    padding: 5px 10px;

    /* bootstrap默认的p标签有下 外边距，所以需要把P的外边距去掉 */

    margin-bottom: 0;

    background: rgba(0, 0, 0, .5);

    font-size: 12px;

    color: #fff;

}

.news li:nth-child(1){

    width: 50%;

    /* background-color: pink; */

    height: 266px;

}

.news li:nth-child(1) p {

    line-height: 41px;

    font-size: 20px;

    padding: 0 10px;

}

8. news 第2345模块

<div class="news">

    <ul>

        <li>

         <a href="#">

             <img src="upload/1.jpg" alt="">

             <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>

         </a>

     </li>

     <li>

         <a href="#">

             <img src="upload/2.jpg" alt="">

             <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>

         </a>

     </li>

     <li>

         <a href="#">

             <img src="upload/3.jpg" alt="">

             <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>

         </a>

     </li>

     <li>

         <a href="#">

             <img src="upload/4.jpg" alt="">

             <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>

         </a>

     </li>

    </ul>

</div>

如图，需要给每个 li 添加一个 margin-botttom

index.css

.news li{

    float:left;

    width: 25%;

    height: 128px;

    padding-right: 10px;

    margin-bottom: 10px;

}

9.发表模块布局

index.html

<!-- 发表模块 -->

<div class="publish">

    <div class="row">

        <div class="col-sm-9">abc</div>

        <div class="col-sm-3">123</div>

    </div>

 </div>

给 publish 添加 border-top

/* 发表模块 */

.publish{

    border-top: 1px solid red;

}

当给 publish添加 border-top的时候，发现并没有显示出来，其实线时跑到最上面去了，上面的盒子，里面的孩子时浮动的，而且上面盒子没有给定高度，所以说是有问题的，那么我们就要给上面的news盒子清除浮动，在 bootstrap中已经为我们写好了清除浮动的类就叫 clearfix

<div class="news clearfix">

10.发表publish 左侧内容制作

bootstrap中设置了一些字体大小样式

排版

<div class="col-sm-9">

    <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>

 </div>

辅助类修改文本颜色

<div class="col-sm-9">

    <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>

     <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>

     <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>

     <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>

     </p>

</div>

10.发表publish 右侧内容制作

index.html

 <div class="col-sm-3 pic">

      <img src="upload/2.jpg"/>

  </div>

index.css

.publish .row {

    border-bottom: 1px solid #ccc;

    padding: 10px 0;

}

.pic {

    margin-top: 10px;

}

.pic img {

    width: 100%;

}

11. asider 内容制作

index.html

<!-- aside部分 -->

<aside class="col-md-3">

    <a href="#" class="banner">

        <img src="upload/zgboke.jpg" alt="">

    </a>

    <a href="#" class="hot">

        <span class="btn btn-primary">热搜</span>

        <h4 class="text-primary">欢迎加入中国博客联盟</h4>

        <p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>

    </a>

</aside>

index.css

/* aside部分 */

.banner img {

    width: 100%;

}

.hot {

    display: block;

    margin-top: 20px;

    padding: 0 20px 20px;

    border: 1px solid #ccc;

}

/* 在bootstrap中有圆角边框，我们可以设置成自己想要的样式 */

/* 将span 的border-radius去掉 */

.hot span {

    border-radius: 0;

    margin-bottom: 20px;

}

.hot p {

    font-size: 12px;

}

bootstrap中，可以给任意元素添加按钮的样式，并且我们可以在它的基础上去修改成我们想要的样式

四、页面进行响应式

1. logo响应式制作

当我们对页面进行缩放时，发现logo的图片也跟着缩放，但是我们不需要图片缩放，图片就保持原来的大小，让图片水平居中就行

.logo img {

    /* width: 100%; */

    max-width: 100%;

}

让图片居中对齐

.logo img {

    /* width: 100%; */

    max-width: 100%;

    display: block;

    margin: 0 auto;

}

在超小屏幕下，logo图片里的文字就显得有点大

当我们进入超小屏幕下， logo里面的图片就会隐藏起来，取而代之的是我们准备好的一个文本

1.让logo图片在超小屏幕下隐藏

<div class="logo">

    <a>

        <img src="data:images/logo.png" class="hidden-xs"/>

    </a>

</div>

2.我们事先准备一个盒子装文本，它平时是隐藏的，只有在超小屏幕下才显示

<div class="logo">

    <a>

        <img src="data:images/logo.png" class="hidden-xs"/>

        <span class="visible-xs">阿里百秀</span>

    </a>

</div>

.logo span {

    display: block;

    height: 50px;

    line-height: 50px;

    color: #fff;

    font-size: 18px;

    text-align: center;

}

2.nav 响应式制作

/* 当我们进入小屏幕的时候，然nav里面的 li 都浮动起来，并且每个li 的宽度为20%; */

/* 并且让article有一个marin-top */

@media screen and (max-width:991px){

    .nav li{

        float: left;

        width: 20%;

    }

    article {

        margin-top: 10px;

    }

}

/* 当我们进入超小屏幕的时候，让 li的文字变得小一些 */

@media screen and (max-width:767px){

    .nav li a{

        font-size: 12px;

    }

}

3. news 响应式布局

/* 当我们进入超小屏幕的时候，让 li的文字变得小一些 */

@media screen and (max-width:767px){

    .nav li a{

        font-size: 12px;

        /*  在超小屏幕下nav 中的 a 就看不到了,所以需要设置一下 padding-left */

        padding-left: 0;

    }

    /* 当我们进入超小屏幕下 让 news 第一个li 宽度为100% 剩下的小 li 各50% */

    .news li:nth-child(1){

        width: 100%!important;

    }

    .news li{

        width: 50%!important;

    }

}

4. publish 响应式布局

在超小屏幕下 publish中的右侧图片不需要显示以及一些文字隐藏

<div class="row">

    <div class="col-sm-9">

           <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>

            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>

            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>

            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p>

    </div>

    <div class="col-sm-3 pic hidden-xs">

        <img src="upload/2.jpg"/>

    </div>

 </div>

超小屏幕下让 publish中的 h3 文字小一些

   .news li{

        width: 50%!important;

    }

    .publish h3 {

        font-size: 14px;

    }