10.1.3多行多列复杂模式代码（Web前端开发技术--清华大学出版社）

最新推荐文章于 2024-08-22 11:06:05 发布

c323u2bdf

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量520

点赞数 1

分类专栏： HTML 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_60212533/article/details/127293549

版权

HTML 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

效果图：

代码：(以下两个文件名可自行修改）

html文件-----demo8_8.html(文件名）

<!--P152页 10.1.3-->
<html>
    <head>
        <meta charset="UTF-8">
        <link type="text/css" rel="stylesheet" href="demo8_8.css">
    </head>
    <body>
        <div id="container" class="">
            <div id="header" class="">
                <div id="logo" class="">logo</div>
                <div id="nav" class="">nav</div>
            </div>
            <div id="main" class="">
                <div id="left" class="">
                    <div id="left_up_1" class="">left_up_1</div>
                    <div id="left_up_2" class="">left_up_2</div>
                    <div id="left_down_1" class="">left_down_1</div>
                    <div id="left_down_2" class="">left_down_2</div>
                </div>
                <div id="center" class="">
                    <div id="center_up" class="">center_up</div>
                    <div id="center_down" class="">center_down</div>
                </div>
                <div id="right" class="">
                    <div id="right_up" class="">right_up</div>
                    <div id="right_down" class="">right_down</div>
                </div>
            </div>
        </div>
        </div>
    </body>
</html>

css文件----demo8_8.css(文件名）

*{
    font-size: 16px;margin: 0 auto;padding: 0px;
}
#container{
    background: #334455;width: 100%; height: 700px;
}
#header{
    background: #FF4455;width: 100%;height: 150px;
}
#logo{
    background: #FFDD55;width: 100%;height: 100px;
}
#nav{
    background: #ffdd99;width: 100%; height: 50px;
}
#main{
    background: #33DD55;width: 100%;height: 500px;
}
#left{
    background: #33FBFB;width: 33%;height: 100%;float: left;
}
#left_up_1{
    background: #99BBDD;width: 100%;height: 125px;
}
#left_up_2{
    background: #AABBCC;width: 100%;height: 125px;
}
#left_down_1{
    background: #BBCCDD;width: 100%;height: 125px;
}
#left_down_2{
    background: #CCDDEE;width: 100%;height: 125px;
}
#center{
    background: #88FBFB;width: 34%;height: 100%;float: left;
}
#center_up{
    background: #66FF66;width: 100%;height: 200px;
}
#center_down{
    background: #45DD22;width: 100%;height: 200px;
}
#right{
    background: #DDFBFB;width: 33%;height: 100%;float: left;
}
#right_up{
    background: #55DDFB;width: 100%;height: 150px;
}
#right_down{
    background: #667733;width: 100%;height: 300px;
}
#footer{
    background: #DDDD11;width: 100%;height: 50px;
}