移动 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="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="images/logo.png" class="hidden-xs"/>
</a>
</div>
2.我们事先准备一个盒子装文本，它平时是隐藏的，只有在超小屏幕下才显示
<div class="logo">
<a>
<img src="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;
}
