CCS边框样式——网页布局

原创 2018-12-21 01:41:18 255
摘要:<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>CCS盒模型</title>    

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>CCS盒模型</title>
       <style type="text/css">
           *{padding: 0px; margin: 0px;}
           .bar{
               width: 100%;
               height: 50px;
               background-color: black;
               color:#cccccc;
           }
           .content{
               width: 1000px;
               height: 500px;
               margin: 20px auto;
               border-radius:10px;
               box-shadow:0px 5px 30px #ccc;
           }
           .ad{
               width: 1000px;
               height: 100px;
               margin: 20px auto;
               border-radius:10px;
               box-shadow:0px 5px 30px #ccc;
           }
           .content2{
               width: 1000px;
               height: 350px;
               margin: auto;
           }
           .news{
               float: left;
               width: 200px;
               height: 350px;
               border-radius:10px;
               box-shadow:0px 5px 30px #ccc;
           }
           .newcourse{
               float: left;
               margin: 0px 10px;
               width: 580px;
               height: 350px;
               border-radius:10px;
               box-shadow:0px 5px 30px #ccc;
           }
           .books{
               float: left;
               width: 200px;
               height: 350px;
               border-radius:10px;
               box-shadow:0px 5px 30px #ccc;
           }
           .link{
               width: 1000px;
               height: 100px;
               margin: 20px auto;
               border-radius:10px;
               box-shadow:0px 5px 30px #ccc;
           }
       </style>
   </head>
   <body>
       <div class="bar">导航栏</div>
       <div class="content">内容</div>
       <div class="ad">广告</div>
       <div class="content2">
       <div class="news">头条</div>
       <div class="newcourse">最新课程</div>
       <div class="books">常用手册</div>
       </div>
       <div class="link">友情链接</div>
   </body>
</html>

批改老师:天蓬老师批改时间:2018-12-21 08:59:37
老师总结:边框是盒框的重要组成部分, 如果数值为0, 单位可以省略掉不要写,例如: padding: 0px , 建议直接写成: padding: 0; 这样更好些

发布手记

热门词条