index 首页

官方应援手灯专区
官方应援手福专区
签名商品专区
官方DVD专区

薛之谦
IKON
鹿晗
GOT7
EXO
Astro(韩国)
Winner
BigBang

            </div>  
            <!-- ul>(li>img\[src=img/pro/$.jpg\]+div.right>span.title+span.money+div>span.love+span.num)\*9 -->  
            <ul>  
                <li>  
                    <img src="img/pro/1.jpg" alt="">  
                    <div class="right">  
                        <span class="title">\[现货包邮\]加一联创 Imore bear 万魔熊 头</span>  
                        <span class="money">￥50</span>  
                        <div><span class="love"></span><span class="num">0</span></div>  
                    </div>  
                </li>  
                <li>  
                    <img src="img/pro/2.jpg" alt="">  
                    <div class="right">  
                        <span class="title">\[现货包邮\]加一联创 Imore bear 万魔熊 头</span>  
                        <span class="money">￥50</span>  
                        <div><span class="love"></span><span class="num">0</span></div>  
                    </div>  
                </li>  
                <li>  
                    <img src="img/pro/3.jpg" alt="">  
                    <div class="right">  
                        <span class="title">\[现货包邮\]加一联创 Imore bear 万魔熊 头</span>  
                        <span class="money">￥50</span>  
                        <div><span class="love"></span><span class="num">0</span></div>  
                    </div>  
                </li>  
                <li>  
                    <img src="img/pro/4.jpg" alt="">  
                    <div class="right">  
                        <span class="title">\[现货包邮\]加一联创 Imore bear 万魔熊 头</span>  
                        <span class="money">￥50</span>  
                        <div><span class="love"></span><span class="num">0</span></div>  
                    </div>  
                </li>  
                <li>  
                    <img src="img/pro/5.jpg" alt="">  
                    <div class="right">  
                        <span class="title">\[现货包邮\]加一联创 Imore bear 万魔熊 头</span>  
                        <span class="money">￥50</span>  
                        <div><span class="love"></span><span class="num">0</span></div>  
                    </div>  
                </li>  
                <li>  
                    <img src="img/pro/6.jpg" alt="">  
                    <div class="right">  
                        <span class="title">\[现货包邮\]加一联创 Imore bear 万魔熊 头</span>  
                        <span class="money">￥50</span>  
                        <div><span class="love"></span><span class="num">0</span></div>  
                    </div>  
                </li>  
                <li>  
                    <img src="img/pro/7.jpg" alt="">  
                    <div class="right">  
                        <span class="title">\[现货包邮\]加一联创 Imore bear 万魔熊 头</span>  
                        <span class="money">￥50</span>  
                        <div><span class="love"></span><span class="num">0</span></div>  
                    </div>  
                </li>  
                <li>  
                    <img src="img/pro/8.jpg" alt="">  
                    <div class="right">  
                        <span class="title">\[现货包邮\]加一联创 Imore bear 万魔熊 头</span>  
                        <span class="money">￥50</span>  
                        <div><span class="love"></span><span class="num">0</span></div>  
                    </div>  
                </li>  
                <li>  
                    <img src="img/pro/9.jpg" alt="">  
                    <div class="right">  
                        <span class="title">\[现货包邮\]加一联创 Imore bear 万魔熊 头</span>  
                        <span class="money">￥50</span>  
                        <div><span class="love"></span><span class="num">0</span></div>  
                    </div>  
                </li>  
            </ul>  
        </div>  
    </div>  
    <div class="type2" >  
              <img src="img/footer\_v180123.png" >  
    </div>  
         <script type="text/javascript">  
                     window.onload=function(){  
                         var myImg=document.getElementById("myimg");  
                         var arr=\["img/banner/1.jpg","img/banner/2.jpg","img/banner/3.jpg","img/banner/4.jpg"\];  
                         var n=0;  
                         setInterval(function(){  
                             n++;  
                             if(n==arr.length){  
                                 n=0;  
                             }  
                             myImg.src=arr\[n\];  
                         },1000);  
                     }  
                 </script>

</body>

body{
background-color: #CCCCCC;
}

.content ul{
padding: 0px;
margin: 0px;
}
.content ul li{
display: inline-block;
}
.content{
width: 1000px;
margin: 0 auto;
}
.content .banner img{
width: 1000px;
}
.content .star{
margin-top: 20px;
}
.content .star .tilte{
background-image:url(../img/zhuxing.png);
background-repeat: no-repeat;
height: 45px;
}
.content .star li {
background-color: white;
vertical-align: bottom;
/*vertical-align: bottom（底部）水平对齐*/
}
.content .star li:last-child {
height: 135px;
margin-left: 20px;
}
.content .star li:last-child{
background-color:#CCCCCC;
}
.content .star li:last-child img {
height: 124px;
width: 240px;
margin-top: 10px;
}
.content .star li img{
width: 180px;
}
.content .star li span{
display: block;
text-align: center;
padding: 5px;
height: 20px;
line-height: 20px;
color: #999999;
font-size: 12px;
}
.content .top{
margin-top:20px ;
}
.content .top .title{
height: 40px;
background-image: url(../img/shop_title2.png);
background-repeat: no-repeat;
background-position: 0 -60px;
}
.content .top li{
margin: 0 3px;
width: 115px;
background-color: #FFFFFF;

}
.content .top li:first-child{
margin-left: 0;
}
.content .top li:last-child{
margin-right: 0;
}
.content .top img{
width: 115px;
}
.content .top span{
display: block;
text-align: center;
line-height: 30px;
height: 30px;
width: 115px;
font-size: 14px;
padding: 5px;
}
/* .content .top span:nth-child(6){
margin-left: 10px;
} */
.content .list li{
background-color: #FFFFFF;
width: 322px;
margin: 10px 5px;
height: 154px;
}

.content .list li:nth-child(3n+1){
margin-left: 0;
}
.content .list li:nth-child(3n){
margin-right: 0;
}
.content .list img{
height: 154px;
width: 154px;
}
.content .list .right span{
display: block;
color: #999;
margin: 10px 5px;
width: 150px;
font-size: 14px;
height: 40px;
overflow: hidden;
}
.content .list .right{
display:inline-block;
vertical-align: top;
}
.content .list .right .title{
/* margin-top: 30px; */
margin-top: 30px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.content .list .right .money{
color: #DE4767;
}
.content .list .right div span{
display: inline-block;
}
.content .list .right div {
margin-top: -7px;
}
.content .list .right .love{
width: 12px;
height: 12px;
background-image: url(../img/icon/ico.png);
background-repeat: no-repeat;
background-position:0 -74px;
margin-top: 0px;
}
.content .list .right .num{
width: 100px;
margin-top: -6px;
vertical-align: top;
}
.type2{
background-color: #FFFFFF;
margin-top: 10px;
height: 60px;
/* line-height: 80px; */
/* margin: auto; */
}
.type2 img{
margin-top: 5px;
margin-left: 250px;
width: 1000px;
}

ul>(li>img[src=img/pro/$.jpg]+div.right>span.title+span.money+div>span.love+span.num)*9

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将所有

元素加上display:inline-block样式，原本垂直的列表就可以水平显示了

vertical-align: bottom; 字体显示在一行

1、vertical-align

.content .star li{

vertical-align: bottom;
height: 135px;
/* vertical-align: bottom;底部对齐 */
}

vertical-align: bottom; 底部对齐

vertical-align: top; 顶部对齐

vertical-align: bottom; 水平对齐

2.超过文本设定的宽度显示省略号

.content .list .right .title{
margin-top: 30px;
display: block;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //浏览器的兼容
line-clamp: 2;
-webkit-box-orient: vertical;
}

3.背景图片（精灵图）

background-image: url(../img/icon/ico.png); //背景图片
background-repeat: no-repeat; //背景图片不平铺
background-position: 0px -72px; //背景图片的位置

面试题：

11. 为什么要使用 css sprites

(1) css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

(2) css sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 css 的

"background-image","background-position"的组合进行背景定位，这样可以减少。

(3) 很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务

器增加很大的压力。12. 描述一下渐进增强和优雅降级之间的不同

(1) 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功

能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

(2) 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行