css练习——页面布局

最新推荐文章于 2024-03-18 11:28:08 发布

fdbttry

最新推荐文章于 2024-03-18 11:28:08 发布

阅读量96

点赞数

分类专栏： css+html学习文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/fdbttry/article/details/132322503

版权

css+html学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       *{
           width: 100%;
       }
           .header{
               background-color: antiquewhite;
               text-align: center;

           }
           .left{
               background-color: aquamarine;
               float: left;
               width: 50%;
               height: 400px;
           }
           .right{
               background-color: blue;
               /* width: 50%; */
               height: 400px;
           }
           li{
               list-style: none;
           }
           .footer{
               background-color: aliceblue;
               text-align: center;
           }
       </style>
   </head>
   <body>
       <div class="header"><h1 style="margin-bottom: 0px;">主要的网页标题</h1></div>
       <div>
           <div class="left" >
               <li><h3>菜单</h3></li>
               <li><h3>菜单</h3></li>
               <li><h3>菜单</h3></li>
               <li><h3>菜单</h3></li>
           </div>
           <div class="right"><span>哈哈哈哈哈哈哈哈哈哈</span></div>
       </div>
       <div class="footer"><span>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</span></div>
   </body>
</html>