有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<div class="white-nav">
    <div class="white-nav-bar">
        <div class="bar-left">
            <a href="#">
                <img  class="mi-logo"src="images/mi-logo.png" alt="">
                <img  class="mi-home" src="images/mi-home.png" alt="">
            </a>
        </div>
        <div class="bar-center">
            <ul>
                <li><a href="#">小米手机
                <div class="list">
                    <div class="list-center">
        <ul>
            <li>
                <a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
                </div>
                    <p class="name1">小米10S</p>
                    <p class="price1">3299元起</p></a>
            </li>
            <li><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a></li>
            <li><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a></li>
            <li><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a></li>
            <li><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a></li>
            <li class="last-list"><a href="#"><div class="img-box"><img src="images/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg" alt="">
            </div>
                <p class="name1">小米10S</p>
                <p class="price1">3299元起</p></a>
            </li>
        </ul>
    </div>
    </div>
                </a></li>

.white-nav{
    width: 1423px;
    height: 100px;
    background-color: #ffffff;
    position: relative;

}
.white-nav-bar{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}
.bar-left{
    width: 55px;
    height: 55px;
    background-color: #ff6700;
    margin-top: 22.5px;
    float:left;
    position: relative;
    overflow: hidden;

}
.bar-center{
    width: 875px;
    height: 100%;
    float: left;
    line-height: 100px;

}
.bar-right{
    height: 100px;
    width: 296px;
    position: relative;
    float: left;
}
.bar-center>ul{
    margin-left: 179px;

}
.bar-center li{
    padding: 0 10px;
    float: left;


}
.bar-center>ul>li>a{
    color: #333333;
}
.bar-center>ul>li>a:hover{
    color: #ff6700;
}
.mi-home{
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
}
.mi-logo{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.bar-left:hover .mi-logo{
    left: -100%;
}
.bar-left:hover .mi-home{
    left: 0;
}
.bar-left img{
    transition: all .2s;
}
.list{
    width: 1423px;
    height: 0;
    background-color: #fff;
    position: absolute;
    left: 40px;
    top: 100px;
    box-shadow: 0 3px 4px rgba(0,0,0,.2);
    transition: all .2s;
    overflow: hidden;
    float: left;



}
.list-center{
    width: 1226px;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -613px;
    float: left;
}
.list-center li{
    width: 204px;
    padding: 0;
}
.img-box{
    width: 100%;
    height: 110px;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    margin-top: 35px;
    margin-bottom: 16px;
}
.img-box img{
    height: 100%;
}
.list-center p{
    font-size: 12px;
    line-height: 20px;
}
.last-list .img-box{
  border-right: none ;
}
.name1{
    color: #333;
}
.price1{
    color: #ff6700;
}
.bar-center li:hover .list{
    height: 229px;
    border-top: 1px solid rgba(224,224,224,.6);

}
.bar-right{
    height: 100px;
    position: relative;
}
.bar-right input{
    width: 244px;
    height: 50px;
    border: 1px solid #e0e0e0;
    padding: 0 10px;
    box-sizing: border-box;
    outline: none;
    float: left;
    border-right: none;
    margin-top: 25px;

}
.bar-right>button{
    width: 52px;
    height: 50px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    float: left;
    margin-top: 25px;

}
.bar-right input:focus{
    border-color: #ff6700;
}
.bar-right input:focus~.iconfont{
    border-color: #ff6700;
}
.bar-right>button:hover{
    background-color: #ff6700;
    color: #fff;
}

.text-list{
    width: 243px;
    height: 0;
    border-top: none;
    position: absolute;
    top: 75px;
    left: 0;
    z-index: 990;
    background-color: #fff;
}
.bar-right input:focus+.text-list{
    height: 240px;
    border: 1px solid #ff6700;
    border-top: none;
}

老师我想问问为什么我的list显示不了100%的宽度

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 571楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
        }
        .box1,.top,.bottom{
            width: 100%;
        }
        .box{
            height: 1005px;
        }
        .center{
            width: 1240px;
            height: 1005px;
            background-color:#807e73;
            margin: 0 auto;
            text-align: center;
        }
        .top{
            height: 610px;
        }
        .bottom{
            height: 375px;
        }
        .top>div{
            width: 615px;
            height: 610px;
            float: left;
            margin-top: 10px;
            border-bottom:10px;
            background-color: azure;

        }
        .top-lift,.bottom1,.bottom2,.bottom3 {
            margin-right: 9px;
        }
        .bottom>div{
            width: 303px;
            height: 375px;
            float: left;
            margin-top: 10px;
            background-color: azure;
        }
        .ptop1{
           color: #333;
            font-size: 28px;
        }
        .ptop2{
            color: #333;
            font-size: 18px;
        }
        .ptop3{
            color: #c00;
            font-size: 22px;
        }
        .sptop1{
            font-size: 14px;
        }
        .imgtop{
            width: 460px;
            height: 460px;
            padding-top: px;
        }
        .imgbottom{
            width: 230px;
            height: 230px;
        }
        .pbottom1{
            color: #333;
            font-size: 16px;

        }
        .pbottom2{
            color: #999;
            font-size: 14px;

        }
        .pbottom3{
            color: #c00;
            font-size: 22px;

        }
        .spanbottom{
            font-size: 14px;
        }

    </style>
</head>
<body>
<div class="box1">
    <div class="center">
        <div class="top">
            <div class="top-lift">
                <a href="https://detail.meizu.com/item/meizu18.html" target="_blank">
                    <p class="ptop1">魅族 18</p>
                    <p class="ptop2">限时领券立省200 | 赠液态壳</p>
                    <p class="ptop3"><span class="sptop1">￥</span>3999</p>
                    <img src="meizu1.png" alt="魅族" title="魅族" class="imgtop" pos/>
                </a>
            </div>
            <div class="top-right">
                <a href="https://detail.meizu.com/item/meizu18pro.html" target="_blank">
                    <p class="ptop1">魅族 18 Pro</p>
                    <p class="ptop2">限时领券立省300 | 赠液态壳</p>
                    <p class="ptop3"><span class="sptop1">￥</span>4999</p>
                    <img src="meizu2.png" alt="魅族" title="魅族" class="imgtop"/>
                </a>
            </div>

        </div>
        <div class="bottom">
            <div class="bottom1">
                <a href="https://detail.meizu.com/item/meizu17.html" target="_blank">
                    <img src="meizu3.png" alt="魅族" title="魅族" class="imgbottom" />
                    <p class="pbottom1">魅族 17「AG梦幻独角兽」</p>
                    <p class="pbottom2">高通骁龙 865 | 120 Hz尝鲜模式</p>
                    <p class="pbottom3"><span class="spanbottom">￥</span>3699</p>

                </a>
            </div>
            <div class="bottom2">
            <a href="https://detail.meizu.com/item/meizu17.html" target="_blank">
                <img src="meizu4.png" alt="魅族" title="魅族" class="imgbottom" />
                <p class="pbottom1">魅族 17「松深入墨」</p>
                <p class="pbottom2">高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="pbottom3"><span class="spanbottom">￥</span>3699</p>
            </a>
            </div>
            <div class="bottom3">
                <a href="https://detail.meizu.com/item/meizu17pro.html" target="_blank">
                    <img src="meizu5.png" alt="魅族" title="魅族" class="imgbottom" />
                    <p class="pbottom1">魅族 17 Pro「定白」</p>
                    <p class="pbottom2">限时领券至高立省1200+12期免息</p>
                    <p class="pbottom3"><span class="spanbottom">￥</span>4299</p>
                </a>
            </div>
            <div class="bottom4">
                <a href="https://detail.meizu.com/item/meizu17pro.html" target="_blank">
                    <img src="meizu6.png" alt="魅族" title="魅族" class="imgbottom" />
                    <p class="pbottom1">魅族 17 Pro「乌金</p>
                    <p class="pbottom2">限时领券至高立省1200+12期免息</p>
                    <p class="pbottom3"><span class="spanbottom">￥</span>4299</p>
                </a>
            </div>
        </div>



    </div>
</div>
</body>
</html>

WEB前端全系列/第一阶段：HTML5+CSS3模块/初识CSS 572楼

<!--主体开始-->
<div class="cantent">
    <div class="wrap">
        <!--手机开始-->
        <div class="phone">
            <h3 class="title">手机</h3>
            <div class="phone-box">
                <div class="phone-box-left">
                    <a href="#">
                        <img src="image/cb1bd61ad71c45a4f67f09b075463944.jpeg" alt=""/>
                    </a>
                </div>
                <div class="phone-box-right">
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="big-img">
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=736&h=72" alt=""/>
                </a>
            </div>
        </div>
        <!--手机结束-->
    </div>
</div>
<!--主体结束-->


css
/*主体开始*/
.cantent{
    width: 100%;
    /*自动找高*/
    overflow: hidden;
    padding: 4px 0 12px;
    background-color: #f5f5f5;
}
.title{
    text-align: left;
    color: #333;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
}
.phone-box-left{
    width: 234px;
    height: 614px;
    float: left;
    transition: all .2s linear;
    box-sizing: border-box;
}
.phone-box-right{
    width: 992px;
    height: 614px;
    /*background-color: deepskyblue;*/
    float: left;


}
.phone-box-left img{
    width: 100%;
    height: 100%;
}
.items1{
    width: 234px;
    height: 282px;
    padding: 20px 0;
    margin: 0 0 14px 14px;
    background-color: #fff;
    float: left;
    transition: all .2s linear;
    /*box-sizing: border-box;*/
}
.items1 img{
    width: 160px;
    height: 160px;
    margin-bottom: 18px; ;
}
.name2{
    width: 214px;
    height: 20px;
    color: #333;
    font-size: 14px;
    line-height: 21px;
    margin: 0 10px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name3{
    width: 214px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
    margin: 0 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name4{
    width: 214px;
    height: 21px;
    color: #ff6700;
    margin: 0 10px 14px;
    font-size: 14px;
}
.phone-box-left:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    transform: translate(0,-2px);
}
.items1:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    transform: translate(0,-2px);
}
.big-img{
    width: 100%;
    height: 120px;

 }
.big-img img{
    width: 1226px;
    height: 120px;
    margin: 22px 0;
}

老师我已经遇见过好几次这种情况了，代码没问题，但就是不显示，去浏览器检索了也有，但就是显示不出来，空白一片，这到底是bug？还是什么问题，求老师解答下！！感谢

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 573楼

感觉效果出不来，我已经跟老师改的差不多了，但是还是没变化，一直这样。

04.商城官网_banner.zip

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 574楼

background-position ：这个属性会导致图片裁剪

问题：background-position 这个属性会导致图片比例变化吗？图片变形吗？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS常用属性 575楼

......WIFI.

我想询问下该怎样放进去酒店飞机下面图标的背景图片同时能让图片居中且背景颜色不会被图片颜色替换，纠结好久也没完成这个效果

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 576楼

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*transform转换
        1）translate转换*/
        .box{
            width: 100%;
            height: 500px;
            border: green solid 5px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: purple;
            transform: translate3d(50px,50px,50px);
        }
        /*2)rotate转换*/
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            transform: translateX(200px) rotate(45deg);
        }
         /*3.scale转换*/
         .box3{
             width: 100px;
             height: 100px;
             background-color:rgba(0,0,255,.5);
             transform: scale(1.5) translateX(50px);
             /*transform: translateX(50px) scale(1.5);*/
             /*为什么这里两种变换的顺序调换，div的位置会不一样？*/
         }

    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

</body>
</html>

2.效果图

我的问题有两个：

1）为什么一个transform里面，两种属性值顺序调换，div的位置不一样？（例如Box3，把translateX或是scale放前面，div3的X向位置会不一样）

2）为什么这三个div同为行内元素，做了transform变换以后，位置就不在不同的三行里面？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS选择器 577楼

老师，麻烦问下，添加那个大图白色导航右边的搜索框就下来了怎么回事？（图在附件）

代码.zip

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 578楼

    <table border="1" width="300px" height="300px" align="center">
        <tr>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
    </table>
    
    
    <table align="center" width="500px" height="400px">
        <tr bgcolor="pink">
            <th rowspan="2">酒店</th>
            <th>海外酒店</th>
            <th>团购</th>
        </tr>
        <tr bgcolor="pink">
            <!-- <th></th> -->
            <th>特价酒店</th>
            <th>民宿.客栈</th>
        </tr>
        <tr bgcolor="blue">
            <th rowspan="2">机票</th>
            <th>火车票</th>
            <th>抢票</th>
        </tr>
        <tr bgcolor="blue">
            <!-- <th></th> -->
            <th>特价机票</th>
            <th>专车</th>
        </tr>
        <tr bgcolor="green">
            <th rowspan="2">旅游</th>
            <th>目的地攻略</th>
            <th>邮轮旅游</th>
        </tr>
        <tr bgcolor="green">
            <!-- <th></th> -->
            <th>周边游</th>
            <th>定制旅游</th>
        </tr>
        <tr bgcolor="yellow">
            <th>景点玩乐</th>
            <th>美食林</th>
            <th>购物外汇</th>
        </tr>
        <tr bgcolor="yellow">
            <th>礼品卡</th>
            <th>WiFi电话</th>
            <th>保险签证</th>
        </tr>
    </table>

表格实操.png

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 579楼

<style>

.root{

width: 500px;

height: 500px;

}

.left{

float: left;

width: 250px;

height: 500px;

background-color: firebrick;

}

.right{

float: left;

width: 250px;

height: 500px;

background-color: cyan;

}

.top{

width: 250px;

height: 250px;

background-color: pink;

}

.bottom{

width: 250px;

height: 250px;

background-color: darkblue;

}

</style>

</head>

<body>

</div>

</div>

</body>

老师，left那个颜色为什么被覆盖了

WEB前端全系列/第一阶段：HTML5+CSS3模块/初识CSS 580楼

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.items{

height: 450px;

background-color: blueviolet;

float: left;

padding: 10px;

box-sizing: border-box;

}

.items>div{

width: 100%;

height: 100%;

background-color: coral;

}

/* 移动端 */

@media screen and(max-width:768px){

.items{

width: 50%;

}

/* ipad端 */

@media screen and(max-width:768px)and(max-width:992px)

{.items{

width: 33%;

}

/* pc端*/

@media screen and(max-width:768px){

.items{

width: 25%;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

老师为什么我这个显示不出来呀

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS盒子模型 581楼

<!--页脚开始-->
<div class="footer">
    <div class="wrap">
        <div class="footer-seriver">
            <ul>
                <li>
                    <a href="#">
                    <i class="iconfont">&#xe629;</i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe60e;</i>
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe606;</i>
                        <span>15天免费换货</span>
                    </a>

                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe624;</i>
                        <span>满99元包邮</span>
                    </a>

                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe617;</i>
                        <span>520余家售后网点</span>
                    </a>

                </li>
            </ul>
        </div>
        <div class="footer-link">
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <div class="footer-aside">
                <p class="tel">400-100-5678</p>
                <p class="time">8:00-18:00（仅收市话费</p>
                <a href="#" class="kefu">人工客服</a>
                <div class="follow">
                    关注小米：
                    <img src="image/wb.png" alt=""/>
                    <img src="image/wx.png" alt=""/>
                </div>

            </div>

        </div>
    </div>

</div>

老师我就想问下，在页脚最后右边的最后一排字“关注小米”这点本来我自己想的是用p标签，然后给嵌套两个a标签，然后在在a标签里给两个img

后面看到视频中老师用的div，我就想问下，最后一排为什么要用div上面三排出了有个用的a标签，其他都是用的p标签来写的，为什么最后这一点要用div

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 582楼

.main{
    width: 100%;
    height: 170px;
   
}
.main-center{
    width: 1240px;
    height: 170px;
    top: 0;
    left: 50%;
    margin-left: -620px;

}
.main-aside{
    width: 234px;
    height: 100%;
    padding: 3px;
    box-sizing: border-box;
    background-color: #5f5750;
    float: left;
}

<div class="main">
    <div class="main-center">
        <div class="main-aside"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>

    </div>
</div>

div main的高度设置不了，不显示

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 583楼

老师,可不可以把img设为背景图片,通过指向ul里面的li,来改变ul的父级元素的相邻兄弟的背景图片呢?!我实验了怎么不行

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS应用技巧 584楼

为什么我的shift+alt+up/down用不了

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 585楼

同学您好