会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 128778个问题
Python 全系列/第七阶段:网页编程基础/HTML5 16楼
Python 全系列/第七阶段:网页编程基础/HTML5 17楼
Python 全系列/第七阶段:网页编程基础/CSS3 18楼
Python 全系列/第七阶段:网页编程基础/CSS3 19楼
Python 全系列/第七阶段:网页编程基础/CSS3 20楼
Python 全系列/第七阶段:网页编程基础/CSS3 21楼
Python 全系列/第七阶段:网页编程基础/JavaScript语言 24楼
Python 全系列/第七阶段:网页编程基础/JavaScript语言 25楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>弹性盒子模型</p>
    <div>
        <p class="lk">父辈</p>
        <div>
            <p class="mn">子级1</p>
        </div>
        <div>
            <p class="m">子级2</p>
        </div>
        <div>
            <p class="n">子级3</p>
        </div>
    </div>
   <br>
   <p>盒子模型,只涉及:margin,padding,width,height差不多的这几个属性</p>
</body>
<style>
    p{
        font-weight: 500px;     /*对大字进行加粗*/
    }
    .lk{
        width:800px;
        height:800px;
        font-size: 90px;
        display:flex;
        background-color: aquamarine;
        flex-direction: column;
        align-items: center;
        justify-content: center;


    }
   /* 
   div>div{
        width: 200px;
        height: 200px;
        font-size: 20px;
        background-color: blueviolet;

    }
    */
    .mn{
        color: aquamarine;
        width: 200px;
        height: 200px;
        font-size: 20px;
        background-color: blueviolet;
    }
    .m{
        color: aquamarine;
        width: 200px;
        height: 200px;
        font-size: 20px;
        background-color: blueviolet;
    
    }
    .n{
        color: blueviolet;
        width: 200px;
        height: 200px;
        font-size: 20px;
        background-color: blueviolet;
    }
</style>
</html>

老师,下面三个为什么不在上面那个大盒子里面呢?


Python 全系列/第七阶段:网页编程基础/CSS3 26楼

<!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>
        #you{
            font-size: 30px;
            color: blue;
            background-color: chartreuse;
            width:500px;
            height:500px;

        }
        .classtyu{
            font-size:30px;
            color: blueviolet;
            background-color: aquamarine;
            width: 400px;
            height: 400px;
            background-repeat: no-repeat;
        }
        .classttt{
            font-size: 30px;
            color: blueviolet;
            background-color: aquamarine;
            width: 300px;
            height: 300px;
            background-repeat: no-repeat;
            background-image: url("a138b3258e7831b7e5c78462e96be42.jpg");
            background-position: center;

        }
    </style>
</head>
<body>
    <div id="you">一件愚蠢的事</div>
    <br>
    <div class="tyu">1 实现区块</div>
    <br>
    <div class="ttt">2 实现图片</div>
    <br>
    <div><p>3 总的</p></div>
    <br>
    <div><h1>总结</h1></div>
</body>
</html>

老师,这个怎么哪出错了吗?


Python 全系列/第七阶段:网页编程基础/CSS3 29楼
Python 全系列/第七阶段:网页编程基础/CSS3 30楼

百战程序员微信公众号

百战程序员微信小程序

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