前两篇内容讲述了流式布局，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="data: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;
}

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

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

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

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

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

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

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

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

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

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

背景颜色不同，大屏幕为绿色，中等屏幕为白色

logo位置不同大屏幕再导航栏左边，中等屏幕再导航栏上面（因为logo为白色，所以中等屏幕下有点看不出来）

搜索图标不见了大屏幕下有搜索图标（放大镜）而中等屏幕下没有

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

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

@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="data: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="data: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网页开发——项目：生活资讯网（响应式开发）相关推荐

关于响应式开发的设计规范
◆ ◆ ◆ 一.响应式开发知识要点本段内容由艾艺前端技术部Jay给大家分享: 现在都流行说做响应式开发,然而什么是响应式开发呢? 专业术语-响应式简单来说,就是页面应该有能力去自动响应用户的设 ...
响应式开发：登录界面实现
学习了慕课网上响应式开发的课程,对响应式开发有了一定的了解,完成了一个简单的小实战,登录界面的实现. 具体资源详见: https://download.csdn.net/download/ayanga ...
“生活资讯网“ 的心得
前言最近在做一个"生活资讯网"的项目,做了一个礼拜算是勉强完成了,是一个比较完善的项目,前两天一直在做一个页面,调整各种位置样式和错误,因为要在不同尺寸屏幕下呈现不同的界面,其中 ...
六十五、完成Vue项目去哪儿网App首页开发（来源：慕课网）
2020/10/21. 周三.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/21 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
HTML实训大作业网页设计：我的简历——响应式个人简历网站模板(1页) HTML+CSS+JavaScript web网页设计制作成品
HTML实训大作业网页设计:我的简历--响应式个人简历网站模板(1页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 >&g ...
HTML5期末大作业：美食主题网站设计——美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网 ...
linux字体栅格化,响应式开发---网页的布局方式、媒体查询、栅格化布局、less语言...
1.响应式开发介绍 a.网页布局方式 b.响应式布局优点:用一个页面适配不同终端的展示缺点:产生代码冗余,同时使网页体积变得很庞大,不会因为终端的改变而改变网页的体积,不同终端上有些没有显示出来的 ...
响应式开发---网页的布局方式、媒体查询、栅格化布局、less语言
1.响应式开发介绍 a.网页布局方式 b.响应式布局优点:用一个页面适配不同终端的展示缺点:产生代码冗余,同时使网页体积变得很庞大,不会因为终端的改变而改变网页的体积,不同终端上有些没有显示出来的 ...

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

一、公共部分

1. 头部部分

2.footer部分

二、首页部分

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

最新文章

热门文章

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

一、 公共部分

1. 头部部分

2.footer部分

二、首页部分

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

最新文章

热门文章

一、公共部分