html第四课时

最新推荐文章于 2021-06-17 14:23:13 发布

summerG1

最新推荐文章于 2021-06-17 14:23:13 发布

阅读量366

点赞数

分类专栏： html总结

本文链接：https://blog.csdn.net/gmdjajy/article/details/38229701

版权

html总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer-box{
            width: 100%;
           /* height: 650px;*/
            border: 10px solid black;
            margin: 0 auto;
            padding: 1.5em;
            box-sizing: border-box;

        }
        .card{
            width: 16%;
            height: 130px;
            border: 5px solid red;
            margin: 0 auto;
            float: left;/*浮动可以向左也可以向右*/
            box-sizing: border-box;/*边框和内容总共占百分之二十*/
            margin: 1.5em;/*浮动的margin不会重叠*/
            background: #8187ff;
           /* color:black;*/

        }
        .empty{
            clear: left;
        }
        .card div{
            font-size: 20px;
            font-family: cursive;
            text-align: center;
            height: 100%;
            line-height: 120px;
           /* display: table-cell;*/

        }

    </style>
    <script type="text/javascript">
        function initBox(){
            var box= document.getElementById("outbox");
            var result="";

            for(var i=0;i<16;i++)
            {
                result+="<div class=\"card\"><div>"+(i+1)+"床</div></div>";
            }
            result+="<div class=\"empty\"></div>";
            box.innerHTML=result;
        }

    </script>
</head>
<body οnlοad="initBox()">
    <div id="outbox" class="outer-box">

        <div class="empty"><!--清除浮动属性，大盒子没有高度，仍然会自动包裹所有小盒子的大小-->
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link type="text/css" href="css/table.css" rel="stylesheet">-->

    <style>
        .outer-box{
            width: 100%;
           /* height: 650px;*/
            border: 10px solid black;
            margin: 0 auto;
            padding: 1.5em;
            box-sizing: border-box;

        }
        .card{
            width: 16%;
            height: 130px;
            border: 5px solid red;
            margin: 0 auto;
            float: left;/*浮动可以向左也可以向右*/
            box-sizing: border-box;/*边框和内容总共占百分之二十*/
            margin: 1.5em;/*浮动的margin不会重叠*/
           /* background: #6e81ff;*/
            padding: 2px;

        }
        .card2{
            width: 16%;
            height: 130px;
            border: 5px solid red;
            margin: 0 auto;
            float: right;/*浮动可以向左也可以向右*/
            box-sizing: border-box;/*边框和内容总共占百分之二十*/
            margin: 1.5em;/*浮动的margin不会重叠*/
            /*background: #6e81ff;*/
            padding: 2px;

        }
        .empty{
            clear: left;
        }
    </style>
</head>
<body>
    <div class="outer-box">
        <div class="card">
            <img width="100%" height="100%" src="images/1.jpg">/*图片的加载*/
        </div>

        <div  class="card2">
            <img width="100%" height="100%" src="images/1.jpg">
        </div>
        <div>
            hhahahahhaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div>
        <div class="empty">

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

summerG1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html第四课时

--> .outer-box{ width: 100%; /* height: 650px;*/ border: 10px solid black; margin: 0 auto; padding: 1.5em; box-sizi
复制链接

扫一扫