目录
............................比较麻烦
技术选型
方案：我们采取响应式页面开发方案
技术：bootstrap框架
设计图： 本设计图采用 1280px 设计尺寸
需求分析
1. 页面布局分析
2. 屏幕划分分析
① 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的。 因此我们列 定义为 col-md- 就可以了， md 是大于等于 970 以上的
② 屏幕缩放发现 小屏幕 布局发生变化，因此我们需要为 小屏幕根据需求改变布局
③ 屏幕缩放发现 超小屏幕布局又发生变化，因此我们需要为 超小屏幕根据需求改变布局
④ 策略： 我们先布局 md以上的 pc端布局，最后根据实际需求在修改 小屏幕 和 超小屏幕的 特殊布局样式
页面制作
Bootstrap 使用四步曲： 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容
<meta charset="UTF-8">
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
<!--[if lt IE 9]>
<!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif] -->
引入bootstrap样式文件
<!-- 引入bootstrap的样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
引入自己的CSS文件
页面制作注意点
container 宽度修改
因为本效果图采取 1280的宽度， 而Bootstrap 里面 container宽度 最大为 1170px，因此我们需要手动改下container宽度
@media screen and (min-width:1280px) {
.container {
width: 1280px;
}
}添加字体图标
相当于给a添加了一个before伪元素
.nav ul li a::before { vertical-align: middle; padding-right: 5px; }
这里如果加margin值会掉下来，所以给每个p加上padding值
另外记得给.news清除浮动，直接在类名后面加上clearfix就行，bootstrap里面已经设置好了
我们如果进入了我们的超小屏幕
logo里面的图片就隐藏起来，里面变成文字
然后事先准备好一个盒子里面装着文字，平时隐藏起来，只有在超小屏幕下显示
当我们进入小屏幕和超小屏幕的时候，我们nav里面的li浮动起来，并且宽度为16.6%。
利用媒体查询
当我们进入小屏幕和超小屏幕的时候，里面的文字会变小14px
当我们处于超小屏幕时，第一个li宽度为100%，剩下的各占50%
超小屏幕下，记得发布模块的img隐藏
https://download.csdn.net/download/muziqwyk/85385794