会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题

<style>
        body {
            background-color: #f1f1f1;
        }

        .phone {
            width: 1300px;
            height: 680px;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 680px;
            margin-top: 10px;
            background-color: pink;
        }

        .right {
            float: right;
            width: 1050px;
        }

        .item {
            width: 250px;
            height: 335px;
            float: left;
            margin-left: 10px;
            background-color: rgb(215, 212, 212);
            margin-top: 10px;
            text-align: center;
        }
        .left img {
            width: 234px;
            height: 680px;
        }
        .right img {
            width: 220px;
            height: 220px;
        }
    </style>

</head>

<body>
    <div class="phone">
        <div class="left">
            <img src="./images/1.webp">
        </div>
        <div class="right">
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
        </div>
    </div>
</body>

image.png

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



    
    Title
    
        {
            : ;
        }
        .,.,.{
            : %;
        }
        .{
            : ;
        }
        .{
            : ;
            : ;
            :;
            : ;
            : ;
        }
        .{
            : ;
        }
        .{
            : ;
        }
        .>{
            : ;
            : ;
            : ;
            : ;
            :;
            : ;

        }
        .,.,.,.{
            : ;
        }
        .>{
            : ;
            : ;
            : ;
            : ;
            : ;
        }
        .{
           : ;
            : ;
        }
        .{
            : ;
            : ;
        }
        .{
            : ;
            : ;
        }
        .{
            : ;
        }
        .{
            : ;
            : ;
            : ;
        }
        .{
            : ;
            : ;
        }
        .{
            : ;
            : ;

        }
        .{
            : ;
            : ;

        }
        .{
            : ;
            : ;

        }
        .{
            : ;
        }

    



    
        
            
                
                    18
                    200 | 
                    3999
                    
                
            
            
                
                    18 Pro
                    300 | 
                    4999
                    
                
            

        
        
            
                
                    
                    17AG
                    865 | 120 Hz
                    3699

                
            
            
            
                
                17
                865 | 120 Hz
                3699
            
            
            
                
                    
                    17 Pro
                    1200+12
                    4299
                
            
            
                
                    
                    17 Pro
                    1200+12
                    4299


WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 542楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/前端入门与基础知识 543楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5新增元素 544楼

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        body{

            background-color: #f5f5f5;

        }

        .exhibit{

            width: 1226px;

            height: 628px;

            margin: 0 auto;

            /* background-color: aqua; */

        }

        .left{

            float: left;

            width: 234px;

            height: 614px;

            /* background-color: black; */

        }

        .right{

            float: right;

            width: 992px;

            height: 614px;

            /* background-color: #fff; */

        }

        .box{

            float: left;

            width: 234px;

            height: 300px;

            padding: 20 auto;

            margin-bottom: 14px;

            margin-left: 14px;

            background-color: #fff;

            text-align: center;

        }

        .sal{

            height: 160px;

            width:160px;

            margin-top: 20px;

        }

        .ex{

            height: 614px;

            width: 234px;

        }

        .title{

            margin: 0 10px 2px;

            font-size: 14px;

            font-weight: 400;

            color: #333;

            text-align: center;


        }

        .desc{

            margin: 0 10px 10px;

            height: 18px;

            font-size: 12px;

            color: #b0b0b0;

            text-overflow: ellipsis;

            white-space: nowrap;

            text-align: center;

            overflow: hidden;

        }

        .price{

            margin: 0 10px 14px;

            text-align: center;

            color: #ff6700;

        }


    </style>

</head>

<body>

    <div class="exhibit">

        <div class="left">

            <img src="./images/1.webp" alt="1" class="ex">

        </div>

        <div class="right">

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>


            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

        </div>

    </div>

</body>

</html>

image.png

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

<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新特性 547楼

<!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 548楼

<!--主体开始-->
<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新特性 549楼

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变换以后,位置就不在不同的三行里面?

21.png

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

    <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基础元素 555楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637