html中用盒子模型写一个pc端简单的框架

快来打我* 2021-09-15 11:46 287阅读 0赞

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta charset="UTF-8">  
<title></title>  
<style type="text/css">  
.total\{  
          width: 600px;  
          /\*border:1px solid red;\*/  
          margin:0 auto;  
\}  
       div\{  
       border-radius: 15px;  
       text-align: center;  
       margin-top:10px;  
  
  
       \}  
      .header\{  
      /\*border: 1px solid red;\*/  
      background: \#C9F790;  
      \}  
      .nav\{  
      border: 1px /\*solid\*/ red;  
      background: \#C9F790;  
      \}  
        
      .left\{  
      /\*border: 1px solid red;\*/  
      width: 370px;  
      display: inline-block;  
      background: \#C9F790;  
      vertical-align: top;  
      margin-top: 0px;  
  
  
      \}  
      .right\{  
      /\*border: 1px solid red;\*/  
      width: 220px;  
      height: 197px;  
      display: inline-block;  
      background: \#C9F790;  
      vertical-align: top;  
      margin-top: 0px;  
      \}  
      .footer\{  
      /\*border: 1px solid red;\*/  
      background: \#C9F790;  
      \}  
      .bg1\{  
      background: \#D6F7CD;  
      margin:5px 10px;  
      \}  
      .style1\{  
      font-weight: bolder;  
      \}  
      .style2\{  
      margin-top: 50px;  
      \}  
      .style3\{  
      text-align:left;  
      \}  
  
  
</style>  
</head>  
<body>  
<div class="total">  
<div class="header">  
<div class="style1">header</div>  
<div>contain the branding like logo</div>  
</div>  
<div class="nav">  
<div class="style1">nav</div>  
<div>contains navigational section of the site</div>  
</div>  
<div class="content">  
<div class="left">  
<div>  
<div>  
<div class="style1">article</div>  
<div>web page main content</div>  
</div>  
<div class="bg1">  
<div >section</div>  
<div>divided section of main content</div>  
</div>  
<div class="bg1">  
<div >section</div>  
<div>divided section of main content</div>  
  
</div>  
</div>  
</div>  
<div class="right">  
<div class="style1 style2">aside</div>  
<div class="style3">contains extra infoemation and related contents or links</div>  
</div>  
  
    </div>  
<div class="footer">  
<div class="style1">footer</div>  
<div>contains information about copyright,privacy,terms of use,ect</div>  
</div>  
</div>  
</body>

</html>

效果图

![70][]

[70]: /images/20210813/10d0b4cc081b4b82948afec372ed2086.png