0
点赞
收藏
分享

微信扫一扫

阿里百秀响应式页面制作

冶炼厂小练 2022-04-14 阅读 22
css3前端bootstraphtml5

文章目录

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

一、技术选型

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

二、需求分析

1.页面布局分析

在这里插入图片描述

2.屏幕划分分析

  1. 屏幕缩放发现，中屏幕和大屏幕布局是一致的。因此列定义为col-md-就可以了，md是大于等于970px以上的。
  2. 屏幕缩放发现，小屏幕布局发生变化，因为需要为小屏幕根据需求改变布局。
  3. 屏幕缩放发现，超小屏幕布局又发生变化，因此需要为超小屏幕根据需求改变布局
  4. 策略：先布局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">
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <!-- 1.header -->
            <header class="col-md-2">
                <div class="logo">
                    <a href="#">
                        <img src="images/logo.png" alt="" class="hidden-xs">
                        <span class="visible-xs">阿里百秀</span>
                    </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>
            <!-- 2.article -->
            <article class="col-md-7">
                <!-- 新闻 -->
                <div class="news clearfix">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="upload/lg.png" alt="">
                                <p>阿里百秀</p>
                            </a>
                        </li>
                        <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>
                <!-- 发表 -->
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <h4>生活馆 关于之家的10个健康知识 你知道几个？</h4>
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2021-8-25</p>
                            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲例的知识吧！</p>
                            <p class="text-muted">阅读(9901)评论(0)赞(0)
                                <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
                            </p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/4.jpg" alt="">
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h4>生活馆 关于之家的10个健康知识 你知道几个？</h4>
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2021-8-25</p>
                            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲例的知识吧！</p>
                            <p class="text-muted">阅读(9901)评论(0)赞(0)
                                <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
                            </p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/4.jpg" alt="">
                        </div>


                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h4>生活馆 关于之家的10个健康知识 你知道几个？</h4>
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2021-8-25</p>
                            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲例的知识吧！</p>
                            <p class="text-muted">阅读(9901)评论(0)赞(0)
                                <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
                            </p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/4.jpg" alt="">
                        </div>


                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h4>生活馆 关于之家的10个健康知识 你知道几个？</h4>
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2021-8-25</p>
                            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲例的知识吧！</p>
                            <p class="text-muted">阅读(9901)评论(0)赞(0)
                                <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
                            </p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/4.jpg" alt="">
                        </div>

                    </div>
                </div>
            </article>
            <!-- 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 class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台……</p>
                </a>
            </aside>
        </div>
    </div>
</body>

</html>

（2）css部分

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    a {
        color: #666;
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: none;
    }
    
    body {
        background-color: #f5f5f5;
    }
    
    .container {
        background-color: #fff;
    }
    /* 修改container的最大宽度为1280 根据设计稿来走 */
    
    @media screen and(min-width:1280px) {
        .container {
            width: 1280px;
        }
    }
    /* header */
    
    header {
        padding-left: 0!important;
    }
    
    .logo {
        background-color: #429ad9;
    }
    
    .logo img {
        display: block;
        /* width: 100%; */
        max-width: 100%;
        /* logo图片不需要缩放 */
        margin: 0 auto;
    }
    /* 1.如果我们进入超小屏幕下，logo里面的图片就隐藏起来 */
    /* 2.事先准备好一个盒子，在logo里面，他平时是隐藏的，只有在超小屏幕下显示 */
    
    .logo span {
        display: block;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 18px;
        text-align: center;
    }
    
    .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;
    }
    
    .nav a::before {
        vertical-align: middle;
        padding-right: 5px;
    }
    /* 当我们进入 小屏幕还有超小屏幕的时候，nav里面的li浮动起来 并且宽度为20% */
    
    @media screen and (max-width:991px) {
        .nav li {
            float: left;
            width: 20%;
        }
        article {
            margin-top: 10px;
        }
    }
    /* 当进入 超小屏幕的时候 nav文字变成14px */
    
    @media screen and (max-width:767px) {
        .nav li a {
            font-size: 14px;
            padding-left: 15px;
        }
        /* 当处于超小屏幕时 第一个li 宽度为100% 剩下的小li各占50% */
        .news li:nth-child(1) {
            width: 100%!important;
        }
        .news li {
            width: 50%!important;
        }
        .publish h4 {
            font-size: 14px;
        }
    }
    /* article    */
    
    .news li {
        float: left;
        width: 25%;
        height: 128px;
        padding-right: 10px;
        margin-bottom: 10px;
    }
    
    .news li a {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }
    
    .news li:nth-child(1) {
        width: 50%;
        height: 266px;
    }
    
    .news li:nth-child(1) p {
        line-height: 41px;
        font-size: 20px;
        padding: 0 10px;
    }
    
    .news li a img {
        width: 100%;
        height: 100%;
    }
    
    .news li a p {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 41px;
        padding: 5px 8px;
        margin-bottom: 0;
        background: rgba(0, 0, 0, .5);
        font-size: 10px;
        color: #fff;
    }
    /* publish */
    
    .publish {
        border-top: 1px solid #ccc;
    }
    
    .publish .row {
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
    }
    
    .pic {
        margin-top: 10px;
    }
    
    .pic img {
        width: 100%;
    }
    /* aside */
    
    .banner img {
        width: 100%;
    }
    
    .hot {
        display: block;
        border: 1px solid #ccc;
        margin-top: 20px;
        padding: 0 20px 20px;
    }
    
    .hot span {
        border-radius: 0;
    }
    
    .hot p {
        font-size: 12px;
    }

（3）效果图展示

在这里插入图片描述

四、移动端布局总结

1.移动端主流方案

（1）单独制作移动端页面（主流）

京东……

（2）响应式页面兼容移动端（其次）

三星手机官网……

2.移动端技术选型

  • 流式布局（百分比布局）
  • flex弹性布局
  • rem适配布局
  • 响应式布局

建议：选取一种主要技术，其他技术作为辅助，混合技术开发

举报

相关推荐

百变周边秀

html编程语言

案例 7：响应式卡片布局页面

htmlJavaScript前端开发

JavaScript百炼成仙 1.14 秀

javascriptfor循环i++while循环虚拟化云计算

JavaScript百炼成仙 1.15 天秀

javascriptnode.js数组构造函数系统/运维

低代码如何构建响应式布局前端页面

自适应响应式页面布局虚拟化云计算

JavaScript百炼成仙 1.17 蒂花之秀

javascript开发语言ecmascript函数体码流系统/运维

响应式网页制作的一种方法（1）

响应式网页设计移动网页Html/CSS前端开发yyds干货盘点

响应式网页制作的一种方法（3）

自适应网页设计响应式响应式网页设计响应式网页制作Html/CSS前端开发yyds干货盘点

制作前端页面

前端csshtml

移动端适配和响应式页面中的常用单位

人工智能jupyteridepython
0 条评论