移動 WEB 開發之阿里百秀移動端頁面製做

時間 2020-12-14

標籤 javascript css html html5 java bootstrap ide 佈局字體欄目無線简体版

原文原文鏈接

1、技術選型

2、需求分析

1.頁面佈局分析

2. 屏幕劃分

3、頁面製做

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

1. 移動端頁面製做
2. 開發移動端頁面
3. 移動端頁面開發
4. 移動前端 web頁面
5. 移動端WEB頁面
6. 移動端頁面製做2
7. 移動端開發之Web App開發
8. 工做筆記：移動web頁面前端開發總結
9. 淺談移動端開發頁面
10. 移動端頁面開發相關
更多相關文章...
• 移動設備統計 - 瀏覽器信息
• ASP.NET Web Forms - HTML 頁面 - ASP.NET 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• PHP開發工具

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

移動 WEB 開發之 阿里百秀移動端頁面製做

1、技術選型

2、需求分析

1.頁面佈局分析

2. 屏幕劃分

3、頁面製做

1. 項目前期準備

2. container 寬度修改

3. 首頁佈局

4. logo製做

5. nav 內容製做

6. nav 中引入字體圖標

7. 新聞模塊佈局

8. news 中的 第1 模塊

8. news 第2345模塊

9.發表模塊佈局

10.發表publish 左側內容製做

10.發表publish 右側內容製做

11. asider 內容製做

4、頁面進行響應式

1. logo響應式製做

2.nav 響應式製做

3. news 響應式佈局

4. publish 響應式佈局

移動 WEB 開發之阿里百秀移動端頁面製做

8. news 中的第1 模塊