利用div css完成下图(作业记录)

最新推荐文章于 2023-03-30 12:21:44 发布

apple_70510988

最新推荐文章于 2023-03-30 12:21:44 发布

阅读量245

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/apple_70510988/article/details/127166588

版权

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <!DOCTYPE html>
       <html lang="en">
       <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
       .container{
       width: 1000px;
       height: 930px;
       border: 1px solid;
       margin: 0px auto;
       background-color: rgb(255, 255, 127);
                   text-align: center;
       }
       /* 设置头部样式 */
       .header{
       width: 1000px;
       height: 306px;
       margin: 0px auto;
       background-color:rgb(255, 255, 127);
       }
       /* 设置主体内容样式 */
       .content{
       height: 533px;
       width: 1000px;
       margin: 0px auto;
       }
       /* 设置主体内容左列的样式 */
       .content .demo1{
       width: 214px;
       height: 100%;
       background-color:#ffaaff;
       float: left;
                   border-top:1px solid;
                   border-bottom:1px solid;
       }
       /* 设置主体内容的中间的内容的样式 */
       .content .demo2{
       width: 684px;
       height: 100%;
       background-color: #aaffff;
                   border: 1px solid;
       float: left;
       }
       /* 设置主体内容右列的样式 */
       .content .demo3{
       width: 100px;
       height: 100%;
       background-color: #ffaaff;
       float: right;
                   border-top:1px solid;
                   border-bottom:1px solid;
       }
       /* 设置底部 */
       .bottom{
       width: 1000px;
       height: 71px;
       background-color: rgb(255, 255, 127);
       margin: 0px auto;
       }
       </style>
       </head>
       <body>
       <div class="container">
       <div class="header">header</div>
       <div class="content">
       <div class="demo1">left</div>
       <div class="demo2">main</div>
       <div class="demo3">right</div>
       </div>
       <div class="bottom">footer</div>
       </div>
       </body>
       </html>

apple_70510988

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
利用div css完成下图(作业记录)

代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
复制链接

扫一扫