阿里百秀页面编写

做出页面

页面编写分析

结构上进行拆分，分为三部分。按照bootstrap，左中右分别分配2,7,3 页面编写要规划好，看似简单的页面，也要熟练才可以快速写出来 在css里面是img标签，还有注意选择器不要写错了。写错了，样式就不会对。

左侧阿里百秀页面解决页面缩放，图标的照片变大问题

解决方案：在css文件里面设置如下，其中display:block与margin: 0 auto;是为了图片居中。这个图标是小图片加背景色生成的。所以可以设置居中

/* 这里是img */
.logo img {
    /* width: 100%; */
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

设置了之后

超小屏幕下，图片如何隐藏，只显示文字？

第一步隐藏图片设置

<div class="row">
          <div class="logo">
            <a href="#">
              <!-- 如果进入超小屏幕，隐藏原来的图片使用class="hidden-xs" -->
              <img src="./images/logo.png" alt="" class="hidden-xs">
              <span class="visible-xs">阿里百秀</span>
            </a>
            <div class="nav">
              <ul>
                <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                <li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li>
                <li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
                <li><a href="#" class="glyphicon glyphicon-filter">美食节</a></li>
              </ul>
            </div>
          </div>
        </div>

第二步：

文字在小屏幕下才显示

<span class="visible-xs">阿里百秀</span>

文字上下、左右居中显示，使用line-height: 50px;其中50px即为height，text-align: center;

.logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

提高元素权重的方法，通过以下几种方式来提高html元素的权重：

1. 使用ID选择器：在CSS中使用ID选择器可以提高权重，因为ID选择器是唯一的，只会匹配一个元素。

2. 使用!important关键字：在CSS中使用!important可以强制将属性应用到元素上，即使有更高的权重。

@media screen and (max-width:767px) {
    .nav li a {
        font-size: 14px;
        padding-left: 0;
    }
    /* 当我们处于超小屏幕，第一个li宽度为100%，剩下的小li，各50% */
    /* 使用!important关键字做法：是width: 100% !important; */
    .news ul li:nth-child(1) {
        width: 100% !important;
    }
    /* 类选择器要写对 */
    .news ul li {
        width: 50% !important;
    }

    .publish h3 {
        font-size: 14px;
    }
}

3. 嵌套选择器：在CSS中使用嵌套选择器可以增加权重，例如：div p a会比a的选择器更具优先级。

@media screen and (max-width:767px) {
    .nav li a {
        font-size: 14px;
        padding-left: 0;
    }
    /* 当我们处于超小屏幕，第一个li宽度为100%，剩下的小li，各50% */
    
    /* 嵌套选择器做法是：*/
    .news ul li:nth-child(1) {
        width: 100%;
    } 
    /* 类选择器要写对 */
    .news ul li {
        width: 50% !important;
    }

    .publish h3 {
        font-size: 14px;
    }
}

4. 继承选择器：在CSS中使用继承选择器可以增加权重，因为它可以影响后代元素。例如：使用body作为选择器，可以将属性应用到整个页面上。

5. 使用伪类和伪元素：在CSS中使用伪类和伪元素可以增加权重，因为它们可以影响元素的状态和样式。

6. 使用多个选择器：在CSS中使用多个选择器可以提高权重。例如，div, p{}将应用到所有的div和p元素。

注意的是，不推荐使用!important关键字，因为它会覆盖其他样式，并且很难维护。应该尽量使用其他方法来增加元素的权重。

/* 修改container的宽度为1280根据设计稿来走的 */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}


body {
    background-color: #f5f5f5;
}

.container {
    border-left-color: #fff;
}

@media screen and (min-width:1280px) {
    .container {
        width: 1280px;
    }
}

/* header */
header {
    padding-left: 0 !important;
}

.logo {
    background-color: rgb(55, 148, 216);
}

/* 这里是img */
.logo img {
    /* width: 100%; */
    display: block;
    max-width: 100%;
    margin: 0 auto;
}



/*1.我们如果进入了超小屏幕下 logo里面的图片就隐藏起来 */
/*2.我们事先准备好一个盒子 在logo里面，它平时是隐藏起来的，只有在超小屏幕下显示*/
.logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

.nav {
    background-color: #eee;
    border-bottom: 1px solid #ccc;

}

.nav a {
    display: block;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.nav a:hover {
    background-color: #fff;
    color: #333;
    /* margin-left: 10px; */
}

/* 设置图标的外边距 */
.nav a::before {
    vertical-align: middle;
    padding-right: 5px;
}

.news li {
    float: left;
    width: 25%;
    height: 128px;
    padding-right: 10px;
}

/* 当我们进入小屏幕还有超小屏幕的时候，我们nav里面的li浮动起来，并且宽度为20% */
@media screen and (max-width:991px) {
    .nav li {
        float: left;
        width: 20%;
    }

    article {
        margin-top: 10px;
    }
}

/* 当我们进入超小屏幕的时候，文字变小 */
@media screen and (max-width:767px) {
    .nav li a {
        font-size: 12px;
    }

    /* 当我们处于超小屏幕，第一个li宽度为100%，剩下的小li，各50% */
    /* 第一种做法：是width: 100% !important; */
    .news ul li:nth-child(1) {
        width: 100% !important;
    }


    /* 第二种做法是：*/

    /* .news ul li:nth-child(1) {
        width: 100%;
    } */

    .new ul li {
        width: 50% !important;
    }

}

.news li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: purple;
}

.news li:nth-child(1) {
    width: 50%;
    height: 266px;
    /* background-color: pink; */
    padding: 0px 10px;
}

.news li:nth-child(1) p {
    line-height: 41px;
    font-size: 20px;
    padding: 0 10px;
}

.news li a img {
    width: 100%;
    height: 100%;
}

.news li a p {
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 41px;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, .5);
    font-size: 12px;
    color: #fff;

}

.pic {
    margin-top: 10px;
}

.pic img {
    /* display: block; */
    width: 100%;
    /* height: auto; */
}

.publish {
    border-top: 1px solid #ccc;
}

.publish .row {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.banner img {
    width: 100%;
}

.hot {
    display: block;
    padding: 0 20px 20px;
    margin-top: 20px;
    border: 1px solid #ccc;
}

.hot span {
    border-radius: 0;
    margin-bottom: 20px;
}

.hot p {
    font-size: 12px;
}

/* .pic image {} */