移动web网页开发——项目：生活资讯网（响应式开发）

最新推荐文章于 2024-04-01 00:30:19 发布
最新推荐文章于 2024-04-01 00:30:19 发布
阅读量813 收藏 9
点赞数 4
分类专栏： 移动web网页开发 前端 文章标签： 大数据 前端 css3 bootstrap html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53619602/article/details/125514639
版权

前两篇内容讲述了流式布局，flex布局，rem适配布局，响应式布局四种布局页面，今天我们就以学习的内容来完成项目“生活资讯网”的设计。 

我们在设计开发生活资讯网可以选择的开发方式很多，如以下几种：

  • 流式布局（百分比布局）
  • flex布局（伸缩盒布局）
  • rem适配布局（rem单位+媒体查询+less 或 flexible.js+rem单位）
  • 响应式布局(纯响应式布局)
  • Bootstrap+响应式布局

这边我选择的是Bootatrap+响应式布局来完成的。

一、 公共部分

首先我们要先建立所需要的文件夹，用来存放相应的内容。公共部分需要一个common.css文件来存放公共样式

1. 头部部分

 首先我们要来完成头部部分的设计，效果图如下所示

下图是在大屏幕下的效果：

 下图是在中等屏幕下的效果

 下图是在小屏幕（手机屏幕）下的效果

 

首先我们要完成响应式布局需要在我们的html文件中引入bootstrap相应的文件

 <!--[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]-->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

然后连接相应的css样式文件 

<link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">

接下来我们就正式开始写代码了

因为头部导航栏背景是占满全部的，所以我们可以写一个盒子使他的宽度为100%；

<div class="header" id="topping">

他的css代码为

.header {
    width: 100%;
    background-color: #009900;
    padding: 10px 0;
}

 但是头部导航栏的内容又是在bootstrap的栅格系统内的，首先就是要加一个类名为container的div盒子，然后再里面写内容。

.html

<div class="header" id="topping">
        <div class="container ">
            <div class="header-top">
                <div class="logo ">
                    <a href="index.html"> <img src="images/logo.png" alt=""></a>
                </div>
                <div class="menu hidden-xs ">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="news.html">新闻</a></li>
                        <li><a href="recommed.html">推荐</a></li>
                        <li><a href="hot.html">热榜</a></li>
                        <li><a href="baby.html">育儿</a></li>
                        <li><a href="beauty.html">美容</a></li>
                        <li><a href="make.html">整形</a></li>
                        <li><a href="yangsheng.html">养生</a></li>
                    </ul>
                </div>
                <a href="#" class="menu-icon"></a>

                <div class="search hidden-sm">
                    <a href="search.html"></a>
                </div>
            </div>
        </div>
    </div>

.css

.header-top {
    position: relative;
}

.logo {
    width: 25%;
    float: left;
}

.logo img {
    max-width: 100%;
}

.menu {
    width: 75%;
    float: left;
    padding-top: 25px;
}

.menu ul li {
    position: relative;
    float: left;
    height: 40px;
    font-size: 17px;
    padding: 0 20px;
}

.menu ul li:nth-child(1) a {
    color: #000;
}

.menu ul li::after {
    content: "";
    position: absolute;
    display: block;
    top: -5px;
    left: 70px;
    height: 40px;
    width: 1px;
    border-right: 1px solid #009900;

}

.menu ul li a:hover,
.menu ul li a:focus {
    color: #000;
}



.menu-icon:hover .menu-list {
    transform: translateX(0) 2s;
}

.search {
    position: absolute;
    right: 0;
    top: 20px;
}

.search a::after {
    content: "";
    font-family: 'icomoon';
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

 这样在大屏幕下的头部样式基本就完成了。

那要怎么将大屏幕下的样式转变为中等屏幕或者小屏幕下的样式呢？

这时候就用到了媒体查询，我们可以通过媒体查询来实现随着屏幕大小改变样式也随着改变的功能。

这时我们有两种方法来实现媒体查询

  1. 写三个头部样式，在根据媒体查询选择使用哪一个样式
  2. 根据媒体查询再原有基础上更改

方法一实现过程繁琐，花费时间较多，因此作者选择的是方法二，在原有基础上更改。

首先我们先用媒体查询“选择”屏幕大小

@media screen and (max-width: 991px) {
  /*  中等屏幕 */
}
@media screen and (max-width: 767px) {
    /*  小屏幕 */
}

 然后我们找出大屏幕与中等屏幕头部部分的区别：

  1. 背景颜色不同，大屏幕为绿色，中等屏幕为白色
  2. logo位置不同  大屏幕再导航栏左边，中等屏幕再导航栏上面（因为logo为白色，所以中等屏幕下有点看不出来）
  3. 搜索图标不见了   大屏幕下有搜索图标（放大镜）而中等屏幕下没有

 

 然后我们根据找到的不同来实现

首先更改背景颜色（注意一定要写在媒体查询里面）

@media screen and (max-width: 991px) {
    .header {
        background-color: #fff;
        padding: 0;
    }
}

然后更改导航栏logo的位置

@media screen and (max-width: 991px) {
 .header .logo {
        float: none;
        width: 160px;
        height: 40px;
        margin: 0 auto;
    }

    .header .menu {
        width: 100%;
    }
}

最后实现搜索图标的隐藏，这次我们不再媒体查询里面实现，而是在html文件中类名后面加上  hidden就行了

<div class="search hidden-sm">

这样我们就实现了从大屏幕到中等屏幕的转换了

2.footer部分

尾部部分相较于头部部分就比较简单。在不同屏幕下只需要将文字的居中就行了

下图为大屏幕下的效果：

下图为中等屏幕和小屏幕下的效果： 

 html

<div class="footer clearfix">
        <div class="container">
            <div class="footer-nav clearfix">
                <a href="#">网站首页</a>
                <a href="#">新闻</a>
                <a href="#">推荐</a>
                <a href="#">热榜</a>
                <a href="#">育儿</a>
                <a href="#">美容</a>
                <a href="#">整形</a>
                <a href="#">关于我们</a>
            </div>
            <p>Copyright © 2002-2020 某某新闻资讯网 版权所有</p>

            <div class="footer-list">
                <span>友情链接: </span>
                <a href="#"> 织梦模板 </a>
                <a href="#"> 企业网站建设</a>
                <a href="#"> 站长论坛</a>
                <a href="#"> 网站建设</a>
                <a href="#"> 智能DNS</a>
                <a href="#">开封家电清洗</a>
                <a href="#">找织梦模板</a>
            </div>
        </div>
    </div>

css

.footer {
    width: 100%;
    padding: 10px 0;
    background-color: #282828;
}

.footer-nav {
    width: 100%;
    margin: 30px 0;
}

.footer-nav a {
    font-size: 15px;
    margin-right: 20px;
    color: #ccc;
}

.footer p {
    color: #666;
    font-size: 15px;
}

.footer-list {
    margin: 20px 0;
    padding-top: 20px;
    border-top: 1px solid #666;
    color: #666;
}

.footer-list a {
    color: #666;
    margin: 0 10px;
    /* font-size: 12px; */
}

用媒体查询实现文字居中效果

@media screen and (max-width: 991px) {
 .footer {
        text-align: center !important;
    }

    .footer .footer-nav a {
        font-size: 14px;
    }

    .footer p {
        font-size: 12px !important;
    }

    .footer .footer-list {
        font-size: 12px;
        margin: 10px 0;
    }
}

注意：修改样式是注意权重   可以使用 “！important”来提高权重

 公共样式文件的源代码  common.css

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?nukazs');
    src: url('../fonts/icomoon.eot?nukazs#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?nukazs') format('truetype'),
        url('../fonts/icomoon.woff?nukazs') format('woff'),
        url('../fonts/icomoon.svg?nukazs#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

* {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

body {
    font-size: 14px;
    background-color: #f2f2f2;
    color: #000;
}

ul {
    list-style: none;
}

a {
    margin: 0;
    text-decoration: none;
    color: #fff;
}

a:hover {
    text-decoration: none;
    color: #fff;
}

a:focus {
    text-decoration: none;
    color: #fff;
}

/* header----------------------------- */
.gotop a {
    font-family: 'icomoon';
    position: fixed;
    bottom: 60px;
    right: 50px;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 35px;
    background-color: rgba(0, 0, 0, .5);
}

.header {
    width: 100%;
    background-color: #009900;
    padding: 10px 0;
}

@media screen and (max-width: 991px) {
    .header {
        background-color: #fff;
        padding: 0;
    }

    .header .logo {
        float: none;
        width: 160px;
        height: 40px;
        margin: 0 auto;
    }

    .header .menu {
        width: 100%;
    }

    .footer {
        text-align: center !important;
    }

    .footer .footer-nav a {
        font-size: 14px;
    }

    .footer p {
        font-size: 12px !important;
    }

    .footer .footer-list {
        font-size: 12px;
        margin: 10px 0;
    }
}

@media screen and (max-width: 767px) {
    .header {
        background-color: #009900;
        padding: 20px 0;
    }

    .header .menu-icon {
        position: absolute;
        top: 0;
        left: 20px;
    }

    .header .menu-icon::before {
        content: "";
        font-family: 'icomoon';
        font-size: 25px;
    }


    .header .search {
        top: 0;
        right: 20px;
    }
}

.header-top {
    position: relative;
}

.logo {
    width: 25%;
    float: left;
}

.logo img {
    max-width: 100%;
}

.menu {
    width: 75%;
    float: left;
    padding-top: 25px;
}

.menu ul li {
    position: relative;
    float: left;
    height: 40px;
    font-size: 17px;
    padding: 0 20px;
}

.menu ul li:nth-child(1) a {
    color: #000;
}

.menu ul li::after {
    content: "";
    position: absolute;
    display: block;
    top: -5px;
    left: 70px;
    height: 40px;
    width: 1px;
    border-right: 1px solid #009900;

}

.menu ul li a:hover,
.menu ul li a:focus {
    color: #000;
}

.menu-list {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
    transform: translateX(-9999px);
}


.menu-list div {
    width: 70%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
}

.menu-list ul li {
    font-family: 'icomoon';
    padding-left: 20px;
}

.menu-list ul li a {
    display: block;
    margin: 30px 0;
    width: 100%;
    color: #333;
}

.menu-list ul li:nth-child(1) a {
    margin-top: 50px;
    font-size: 30px;
}

/* .menu-list ul li:nth-child(1) a:active{

} */

.menu-list ul li:nth-child(2) a {
    color: #009900;
}

.menu-list ul li:nth-child(n+2) a:hover {
    color: #009900;
}

.menu-icon:hover .menu-list {
    transform: translateX(0) 2s;
}

.search {
    position: absolute;
    right: 0;
    top: 20px;
}

.search a::after {
    content: "";
    font-family: 'icomoon';
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

/* footer--------------------------------------------------- */
.footer {
    width: 100%;
    padding: 10px 0;
    background-color: #282828;
}

.footer-nav {
    width: 100%;
    margin: 30px 0;
}

.footer-nav a {
    font-size: 15px;
    margin-right: 20px;
    color: #ccc;
}

.footer p {
    color: #666;
    font-size: 15px;
}

.footer-list {
    margin: 20px 0;
    padding-top: 20px;
    border-top: 1px solid #666;
    color: #666;
}

.footer-list a {
    color: #666;
    margin: 0 10px;
    /* font-size: 12px; */
}

二、首页部分

首先引用公共部分样式完成公共样式，然后再写首页部分的内容。

由上图可以看出 首页顶部部分分为左右两部分，那我们可以使左边占8份，右边占4份

 <div class="top">
        <div class="left col-md-8">
          </div>
        <div class="right col-md-4 hidden-sm hidden-xs">
          </div>
  </div>

在左边插入一张图片，使图片宽度为100%就行了

html

<div class="left col-md-8">
                        <div class="top-pic">
                            <img src="images/top1.jpg" alt="">
                        </div>
                    </div>

css

.top-pic img {
    width: 100%;
}

右边只需要写入标题，插入图片，用ul来实现标题

html

                   <div class="right col-md-4 hidden-sm hidden-xs">
                        <div class="headline">
                            <h4>头条</h4>
                            <img src="upload/headline.jpeg" alt="">
                            <ul>
                                <li><a href="ys1.html">六个减肥小妙招来帮助上班族</a></li>
                                <li><a href="#">饭后六件事做不得 无形中伤害你的健康</a></li>
                                <li><a href="#">割双眼皮不要进入这几个误区</a></li>
                                <li><a href="#">整形手术 帮你打造魔鬼身材</a></li>
                                <li><a href="#">如何治疗白头发 这个妙招拿走不谢</a></li>
                            </ul>
                        </div>
                    </div>

css

.headline {
    border-top: 2px solid #009900;
    background-color: #fff;
}

.headline h4 {
    font-size: 20px;
    padding: 0 10px;
    font-weight: 400;
    line-height: 50px;
}

.headline img {
    width: 100%;
    height: 180px;
}

.headline li a {
    display: block;
    height: 39px;
    padding: 0 10px;
    line-height: 39px;
    color: #000;
}

.headline li a:hover {
    background-color: #000;
    color: #fff;
    transition: all .3s;
}

.headline li a::before {
    content: "";
    font-family: 'icomoon';
    color: green;
    margin-right: 10px;
}

完成了大屏幕下的布局，接着就和上面一样使用媒体查询来完成中等屏幕和小屏幕下的布局

首先将右边的样式隐藏，可以用hidden来完成

然后让左边的内容占满所有，在更改相应的图片大小就可以了

html

 <div class="top">
                    <div class="left col-md-8">
                        <div class="top-pic">
                            <img src="images/top1.jpg" alt="">
                        </div>
                    </div>
                    <div class="right col-md-4 hidden-sm hidden-xs">
                        <div class="headline">
                            <h4>头条</h4>
                            <img src="upload/headline.jpeg" alt="">
                            <ul>
                                <li><a href="ys1.html">六个减肥小妙招来帮助上班族</a></li>
                                <li><a href="#">饭后六件事做不得 无形中伤害你的健康</a></li>
                                <li><a href="#">割双眼皮不要进入这几个误区</a></li>
                                <li><a href="#">整形手术 帮你打造魔鬼身材</a></li>
                                <li><a href="#">如何治疗白头发 这个妙招拿走不谢</a></li>
                            </ul>
                        </div>
                    </div>

                </div>

css

@media screen and (max-width: 991px) {
    .top {
        margin-top: 0 !important;
        margin-bottom: 10px;
    }

    .top-pic img {
        height: 250px;
    }

    .pic-nav div {
        height: 150px !important;
        margin-bottom: 20px !important;
    }
}

接下来的内容都差不多按照上面的方法取写就可以完成，响应式布局差不多就是这样完成的

在开始做这个项目前，作者觉得这个都点难实现，但真的上手之后，就发现其实没有想象中的那么困难，所以你们在遇到什么觉得很难完成的事，不妨先大胆的取试试，万一成功了呢。试一试有没什么关系，不成功就算了，成功了就皆大欢喜不是吗

芋泥丶
关注
专栏目录
移动端web开发
lzh17538073353的博客
08-10 2823
随着互联网技术的快速发展，加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。 移动端Web主要指运行在移动端（手机、ipad）的web页面, 因为具备HTML5特性也叫H5页面、Web App等。 【H5页面、微网页、微站、wap站、webAPP】 如:京东商城手机版，淘宝触屏版，苏宁易购手机版 ...
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）.zip
05-28
响应式框架bootstrap框架教程，包括源码，课件，课后习题
移动Web学习03-移动Web开发基础知识&Flex布局
沉睡的猫的博客
04-01 849
*设置基准长度：设置伸缩项目在主轴上的基准长度，若主轴是横向的宽失效，若主轴是纵向的 高失效 这个值默认是auto*/子之间的距离我们没办法控制，比如我们在375的屏幕下的分辨下可以的，但是如果分辨率在变大，右侧的空白就会变大，在如果是。浮动通常用于PC布局，因为PC端有版心的存在、在以前Flex是有兼容性问题存在的，但是现在已经不在考虑兼容性问题了。/*浏览器在计算主轴上是否有剩余空间时，他拿的是主轴的基准长度去计算的 auto 横轴指宽，侧轴指高*/字面意思，它是用户正在看到的网站的区域。
web前端开发项目资源网站，私家珍藏！
clhq71932的博客
02-13 696
1.CodePen： http://codepen.io/ 网站里有很多很酷的特效，而且可以看到效果的源代码，也可以看到实现效果，是一个非常不错的前端开发学习资源网站。 ...
WEB移动开发项目
07-15
html5移动实例开发项目，JSP,JQUERY,JAVA WEB
移动web
weixin_48697269的博客
04-22 97
移动web 理想视口的标准写法 是 五个值 必须要有的 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"> 4个基础的移动端布局 1、百分比布局 – 流式布局 2、flex布局 – 一点点难度 属性和值 太多了 父盒子的 6个重点 子盒子 3个 有一
《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）》-配套源码.rar
06-28
响应式Web开发项目教程（HTML5+CSS3+Bootstrap） 《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）》_资源，里面代码详细，可供新手参考
响应式web开发项目教程-源代码.zip
08-07
响应式+bootstrap+HTML5+JavaScript网页课程，收集整理课程相关源代码方便个位看官学习
基于uni-app开发的新闻和资讯类App模板
02-22
6. **响应式布局**：uni-app支持Flexbox布局，可以实现自适应不同设备屏幕大小的设计，保证在不同设备上的良好显示效果。 7. **性能优化**：通过懒加载、预加载等技术，优化图片加载速度，提高用户体验。同时，合理...
门户网zhan_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
响应式网页设计（Responsive Web Design，RWD）是一种网页设计方法，旨在为用户提供一致且良好的用户体验，无论他们使用何种设备访问网站——无论是桌面电脑、平板还是智能手机。这一设计理念由著名设计师Ethan ...
响应式Web开发项目教程 第一章
12-27
响应式Web开发项目教程，第一章里面的全部内容，有完整的代码
手机端Web项目开发
11-06
手机端Web项目开发/西安乐高云智能科技有限公司/DarrenMJ
html5移动Web网页开发模板.zip
10-26
含有html5移动Web网页开发模板.共9个.
移动端web前端项目.zip
11-13
移动端web前端项目 内容有填写邮寄地址 收件人 联系手机 所在地区(点击选择) 详细地址 邮政编号 提交。可做为填写快递信息使用
手机web网站模板系列-5[内含59个模板]
02-26
1.列表式首页触屏版html5响应式手机app网站模板下载.zip 2.买花网微信鲜花网触屏版手机wap购物网站模板下载.rar ...等等
基于PHP的响应式互联网网络科技类网站.zip
04-19
响应式网页设计是一种现代网页开发技术，它使得网站能够根据用户使用的设备——无论是桌面电脑、平板还是智能手机——自动调整布局、图片和内容，提供最佳的浏览体验。在"基于PHP的响应式互联网网络科技类网站"项目...
PHP实例开发源码-百姓生活门户网站+手机版 v1.0.zip
10-17
其次，移动版的开发意味着源码可能包含了响应式设计或者单独的API接口，以适应不同设备的屏幕尺寸和操作方式。PHP可以与前端技术如HTML、CSS和JavaScript配合，创建适应各种设备的页面布局。此外，使用RESTful API...
uni-app学习笔记和新闻资讯app项目总结
qq_46336617的博客
06-22 838
随着移动应用开发的快速发展，跨平台开发成为了许多开发者的追求。在我最近的学习中，我有幸接触到了Uni-app这个跨平台应用开发框架，它为我打开了一扇全新的大门。本文将分享我在学习Uni-app的过程中的笔记和项目心得体会。一、uni-app是什么？Uni-app是一个基于Vue.js框架的跨平台应用开发框架，它可以同时开发iOS、Android和Web应用。使用Uni-app，我们只需要编写一套代码，即可在不同平台上运行应用，大大提高了开发效率和降低了维护成本。
移动web项目开发问题笔记
kjah
12-03 149
前阵一直在做的移动web项目项目已进入尾声,以下总结下在项目中遇到的问题和技术要点    开发问题及要点 1. viewport 窗口适应    通过设置viewport使页面适应设备的宽度 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-...
移动端html网页制作
最新发布
06-07
移动端 HTML 网页制作，需要考虑到移动设备的屏幕尺寸、分辨率、显示效果等因素，以下是一些制作移动端 HTML 网页的基本步骤： 1. 了解移动端网页设计的基本原则和规范，包括视觉设计、排版、配色、交互设计等方面的要求。 2. 使用 HTML5 和 CSS3 进行网页布局和样式设计。其中，应该优先考虑移动设备的屏幕尺寸和分辨率，采用响应式设计或流式布局方式。 3. 使用 JavaScript 和 jQuery 等框架实现页面交互效果和动画效果，如下拉菜单、弹出层、滚动加载等。 4. 对于移动端网页的性能优化，需要注意减少 HTTP 请求次数、压缩图片大小、使用缓存等方法提高网页访问速度和用户体验。 5. 在进行移动端网页制作时，应该优先考虑网页的易用性和可访问性，确保用户能够方便地浏览和操作网页。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值