HTML网页开发（燕十八）-实战首页布局-作业

最新推荐文章于 2021-06-29 06:49:20 发布

kexin_power

最新推荐文章于 2021-06-29 06:49:20 发布

阅读量850

点赞数

分类专栏： html学习笔记文章标签： html 布局

本文链接：https://blog.csdn.net/kexin_power/article/details/51851984

版权

html学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>第八课 实战首页布局</title>
<style>
    #container{
        width :1002px;
        background: gray;
    }
    #header {
        height:120px;
        background:green;
    }
    #main {
        height:600px;
        background: yellow;
    }
    #lside{
        float:left;
        height:600px;
        width:700px;
        background: pink;
    }
    #a1 {
        float:left;
        height:300px;
        width:350px;
        background: red;
    }
    #a2 {
        float:left;
        height:300px;
        width:350px;
        background: pink;
    }
    #a3 {
        float:left;
        height:300px;
        width:350px;
        background: green;
    }
    #a4 {
        float:left;
        height:300px;
        width:350px;
        background: red;

    }
    #rside{
        float:right;
        height:600px;
        background: yellow;
        width:302px;
    }
    #footer {
        height: 120px;
        background: blue;
    }

</style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="main">
            <div id="lside">
                <div id="a1">a1</div>
                <div id="a2">a2</div>
                <div id="a3">a3</div>
                <div id="a4">a4</div>
            </div>
            <div id="rside"></div>
        </div>

        <div id="footer"></div>
    </div>

</body>
</html>

kexin_power

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML网页开发（燕十八）-实战首页布局-作业

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>第八课实战首页布局</
复制链接

扫一扫

专栏目录