移动 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;}