发表于: 2016-10-09 14:58:11

1 1107


完全0基础小白,自学了一段时间的html和css

今天完成的事情:自以为html和css学会了,但是看到题目后,下意识的第一反应竟然是:做一个表格(捂脸,原谅小白)。

但是随后想了一下,结合各位师兄弟的日报,运用到的知识是网页布局 div这个标签。

代码如下,其他的倒还是简单: 大的框里;三小框,header,content,footer;再每个框里放入三个同样框。

<!DOCTYPE HTML>

<html>

<head>

    <title>task1</title>

    <style type="text/css">

        .box{

                height:480px;

                width:480px;

                margin:20px;

        }

        .header,.content,.footer{

                height:150px;

                float:left;

        }

        .inner{

            width:149px;

            margin:1px;

            background: sandybrown;

            height: 149px;

            float: left;

            border-radius: 10px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="header">

            <div class="inner"></div>

            <div class="inner"></div>

            <div class="inner"></div>

        </div>

        <div class="content">

            <div class="inner"></div>

            <div class="inner"></div>

            <div class="inner"></div>

        </div>

        <div class="footer">

            <div class="inner"></div>

            <div class="inner"></div>

            <div class="inner"></div>

        </div>

        </div>

    </div>

</body>

</html>

效果图如下:

感觉有点烦了,看到一位师兄的省去了,header,content和footer,也做出了这个效果,不知道为什么?(有师兄看到了麻烦告知我)不太明白,也就没用他那个方法。

明天计划的事情:完成任务 配置Nginx这个任务,继续复习之前的,html和css知识

收获:加油,多动用学过的知识。


返回列表 返回列表
评论

    分享到