今天完成的事情：

今天修复完导航栏的bug，写好了自适应的内容，用一个大的div套着，让他们自适应屏幕，用到栅格系统，用到了它框架的东西。任务8第一个页面写的差不多了，明天能写完。

明天计划的事情：

写第2个页面。

遇到的问题：

导航栏的bug，一开始他的导航栏边框，缩小时被挤下来，一开始用了隐藏的方法dispiay：onne但是只能隐藏掉，但是hover时没法显示出来，我还用了改变它颜色的，但是导航栏和背景色不一样，所以最后还是师兄帮忙，发现了问题，其实就是我用了dispiay，然后他变成块元素，脱离了原有的东西，导致被挤出来，去掉了之后我没法让他居中，

@media screen and (max-width:780px){
#top{
    width: 100%;
    text-align: center;
    margin: 0;
}
}

用了媒体查询，因为他是屏幕变小了才出现了这个问题，给了一个宽度100%但是还是有小问题，边框没有居中，我用了一个margin0 才做好。

<div class="row">
    <div class="col-md-3  col-sm-6  content-box">
        <div class="introduce">
            <img src="../img/css8.4.png" height="108" width="108"/>
        <h4>技术顾问：周杰伦</h4>
        <p>百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
    </div>
    </div>

用了它Bootstrap自带的栅格系统，col-md-3这个是宽度25%

.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {

这个是直接可以拿过来用的，用了这个栅格系统，就不需要添加什么，它会自动帮你自适应，用25%

50% 100%，不同的数值里面添加的有不同的百分比，不需要再用媒体查询解决。

我写的div盒子，在变小的时候就积压变形，如果给中间字体一个固定的宽，可以解决，但是就达不到自适应，但是给盒子一个

.number{
    min-width: 80px;
    text-align: center;
    line-height: 80px;
    width: 80px;
    border-radius: 50%;
    box-shadow: 0 0 1px #333333;
    font-size: 2rem;
    color: #29b078;
}

min-width最小宽度就可以防止它被挤压变形。

一开始引的图片有点变形，上下也没有对齐，给图片一个div一个固定的高，宽的方面有栅格系统给他，就防止它变形了。

收获：

学会了媒体查询

1)500px-800px之间的设备 @media screen and (min-width: 500px) and (max-width: 800px) { ... }

       (2)最小宽度500  @media screen and (min-width: 500px){... }

　　(3)在非打印设备下 @media not print and (max-width: 1200px)

栅格系统

使用栅格系统的网页设计非常有条理，看上去也很舒服，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。

最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，不用再为网站的每一个页面都想一个宽度或高度了；对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的；对于内容编辑或广告销售来说，所有的广告都是规则的、通用的，再也不用做出一套多张不同尺寸的广告图了。这对于大型网站的开发和维护来说，能节约不少成本。

•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序

•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统

•栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

1. 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}