科技资讯

Document

HTML 盒子模型

 作业要求：使用css届性实现下面效果 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
</head>
<style type="text/css">
    body{
        margin: 0px;
        padding: 0px;
    }
    .box1{
        background-color: #cecece;     /*背景颜色灰色*/
        width: 800px;                  /*宽度800像素*/
        height: 500px;                 /*高度500像素*/
        margin: 0px auto;              /*容器居中*/
        margin-top: 30px;              /*上边距30像素*/
        display: flex;                 /*弹性布局*/
        flex-direction: column;        /*设置x轴从上到下*/
        justify-content: center;       /*设置在x轴上进行居中对齐（不懂可以上网查资料）*/

    }
    .box1-1{
        border: 2px solid black;        /*设置所有边框2像素 实线 黑色*/
        height: 460px;                  /*高度460像素*/
        width: 760px;                   /*宽度760像素*/
        flex-direction: column;         /*设置x轴从上到下*/
        justify-content: center;        /*设置在x轴上进行居中对齐（不懂可以上网查资料）*/
        margin-left: 20px;              /*左边距20像素*/
    }
    .box1-1 h1{
        margin-left: 30px;               /*左边距30像素*/
        border-bottom: 2px solid black;  /*设置下边框2像素 实线 黑色*/
        height: 50px;                    /*高度50像素*/
        width: 90%;                      /*宽度占页面的百分之90*/
        margin-top: 35px;                /*距离上边距35像素*/
    }
    .wenzi{
        width: 90%;                      /*宽度占页面的百分之95*/
        height: 40px;                    /*高度40像素*/
        border-bottom: 2px dotted black; /*下边框2像素 虚线 黑色*/
        margin: 0px auto;                /*容器居中*/
    }
    .wenzi p{
        margin-left: 80px;               /*距离左边距80像素*/
        margin-top: 23px;                /*距离上边距23像素*/
        font-weight: bold;               /*字体加粗*/
        font-size: 20px;                 /*字体20像素*/
    }
</style>
<body>
<div class="box1">           <!--最外面的盒子我们定义为box1-->
    <div class="box1-1">     <!--在box1里面再写一个盒子定义为box1-1-->
        <h1>最新文章/New Articles</h1>     <!--标题直接h1即可-->
        <div class="wenzi">   <!--文字用一个div盒子装起来 下面以此类推-->
            <p>背景招聘网页设计，平面设计，PHP</p>   <!--p标签写文字-->
        </div>
        <div class="wenzi">
            <p>体验javascript</p>
        </div>
        <div class="wenzi">
            <p>jquery世界来临</p>
        </div>
        <div class="wenzi">
            <p>网页设计师的梦想</p>
        </div>
        <div class="wenzi">
            <p>jquery中的链式编程是什么</p>
        </div>

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

 运行如下：