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

时间  2020-12-14
标签 javascript css html html5 java bootstrap ide 布局 字体 栏目 无线 繁體版
原文   原文链接

1、技术选型

在这里插入图片描述

2、需求分析

1.页面布局分析

在这里插入图片描述

2. 屏幕划分

在这里插入图片描述

3、页面制做

1. 项目前期准备

  1. 搭建项目结构
    在这里插入图片描述
  2. 建立 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.cssjavascript

/* 修改container最大宽度为 1280  */
@media screen and (min-width:1280px){
    .container {
        width: 1280px;
    }

}

3. 首页布局

index.htmlcss

<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.htmlhtml

<header class="col-md-3">
         <div class="logo">
               <a>
                 <img src="images/logo.png"/>
               </a>
          </div>
 </header>

index.csshtml5

/* header 左侧部分 */
.logo{
    background-color: #429ad9;
}

在这里插入图片描述
咱们发现左侧是有padding值的
在这里插入图片描述java

在这里插入图片描述

若是咱们不想要padding-left，能够给header设置或者再添加一个类，记住不能给col-md-3设置，否则后面也会相应的被设置bootstrap

header{
    padding-left: 0!important;
}

在这里插入图片描述

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

在这里插入图片描述

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

.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.htmlui

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中，能够给任意元素添加按钮的样式，而且咱们能够在它的基础上去修改为咱们想要的样式
在这里插入图片描述

在这里插入图片描述

4、页面进行响应式

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

在这里插入图片描述

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程