# 需求  # 1、分析 ## 技术选型  ## 页面布局分析 大盒子container 1行row 3列nav2份 articit 7份aside 3份  ## 屏幕划分分析  # 2、页面制作 ## 创建文件夹结构  ## 书写结构  ## container 宽度修改 ### 框架宽度不满足设置稿的宽度， 手动新建index.css添加设置稿所需要的宽度  当框架宽度不满足设置稿的宽度， 手动新建index.css添加设置稿所需要的宽度  # 3、制作 ## header class="co1-md-2" |  |  | | --- | --- | |  |  | | html 字体图标引用看看 | nav 基本布局 | ## article class="co1-md-7" ### 上半部分  | 每个lia标签里的内容 | p大li | | --- | --- | 最后清除浮动 ### 下部分 划分 9 3 份 每次划分用行 row  第一行 |  |  | | --- | --- | ## <aside class="co1-md-3"  | html | | --- | # 响应调整 1、小屏幕以上可用 （设置一个限制最大宽度值）  1.我们如果进入了超小屏幕下logo里 面的图片就隐藏起来\*/  2.我们事先准备好一个盒子在logo里面，它平时是隐藏起来的， 只有在超小屏幕下显示（超小屏幕下显示文字 logo图片隐藏）\*/  导航栏 |  |  | | --- | --- | | 当我们进入**小屏幕还有超小屏幕 的时候我们nav 里面的li浮动起来并且宽度为20%** | **当我们进入超小屏幕的时候我们nav文字会变成14px** | /\*当我们进入小屏幕还有超小屏幕的时候我们nav 里面的li浮动起来并且宽度为20% \*/ @media screen and ( max-width: 991px) { nav li { float: left; width: 20%; } /\*当我们进入超小屏幕的时候我们 nav 文字会变成14px \*/ @media screen and (max-width: 767px) { navlia{ font-size: 14px ; } 新闻 | 正常屏幕下 | 超小屏幕 | | --- | --- |