阿里百秀响应式页面制作

最新推荐文章于 2023-02-16 16:23:31 发布

王祎0825

最新推荐文章于 2023-02-16 16:23:31 发布

阅读量1.1k

点赞数 2

分类专栏：阶段二：移动web网页开发文章标签： css3 前端 bootstrap html5

本文链接：https://blog.csdn.net/qq_44757223/article/details/124112569

版权

本文详细介绍了阿里百秀移动端首页的响应式页面制作过程，选用Bootstrap框架，通过分析页面布局和屏幕尺寸变化，制定了适应不同屏幕大小的布局策略。在页面制作过程中，涉及HTML骨架结构创建、样式文件引入和内容书写。最后，对移动端布局进行了总结，探讨了主流移动端解决方案和技术选型，包括流式布局、flex布局、rem适配和响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例：阿里百秀移动端首页

一、技术选型

方案：采取响应式页面开发方案
技术： Bootstrap框架
设计图：采用1280px设计尺寸

二、需求分析

1.页面布局分析

在这里插入图片描述

2.屏幕划分分析

屏幕缩放发现，中屏幕和大屏幕布局是一致的。因此列定义为col-md-就可以了，md是大于等于970px以上的。
屏幕缩放发现，小屏幕布局发生变化，因为需要为小屏幕根据需求改变布局。
屏幕缩放发现，超小屏幕布局又发生变化，因此需要为超小屏幕根据需求改变布局
策略：先布局md以上的pc端布局，最后根据实际需求再修改小屏幕和超小屁股木的特殊布局样式

三、页面制作

Bootstrap使用分为四步：1.创建文件夹结构。2.创建html骨架结构。3.引入相关样式文件。4.书写内容。

1.创建文件夹结构

在这里插入图片描述

2.创建html骨架结构

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
<!--[if lt IE 9]>  
<script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

3.引入相关样式文件

 <!-- 引入bootstrap的样式文件 -->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <!-- 引入我们自己的首页样式文件 -->
 <link rel="stylesheet" href="css/index.css">

4.书写内容

header部分

<header class="col-md-2">
    <div class="logo">
        <a href="#">
            <img src="images/logo.png" alt="">
        </a>
        </div>
            <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-gift">奇趣事</a>
                    </li>
                    <li>
                        <a href="#" class="glyphicon glyphicon-glass">美食杰</a>
                    </li>
            </div>
</header>

在这里插入图片描述

5.container宽度修改

因为本效果图采取1280的宽度，而bootstrap里面container宽度最大为1170px，因此需要手动改下container宽度。

6.代码展示

（1）html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"