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

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选择器 559楼

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

*{

    margin0;

    padding0;


}

.items{

    height450px;

    background-colorblueviolet;

    floatleft;

    padding10px;

    box-sizingborder-box;

}

.items>div{

    width100%;

    height100%;

    background-colorcoral;

}

/* 移动端 */

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

    .items{

    width50%;

}

}

/* ipad端 */

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

{.items{

    width33%;

}


}

/*  pc端*/

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

.items{

    width25%;

}

}

    </style>

</head>

<body>

    <div class="box" >

        <div class="items">


        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

        <div class="items">

        </div>

    </div>

</body>

</html>

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

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

<!--页脚开始-->
<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新特性 564楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 567楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 568楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 569楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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