html学习-day03:简单首页布局_html 简单布局首页-CSDN博客

本文链接：https://blog.csdn.net/kimyoungvon/article/details/17856993

省去多余文字，只留概念：

margin:盒子与盒子之间的距离。
border:盒子的边框。
padding:盒子边框到内容的距离。

有个问题想请教一下，中间左边四个div怎么设置边框？还有就是右边的绿色的div，怎么添加两个div，然后按照2:8的比例来占据右边的div呢？路过的同行麻烦给点意见。

直接上图：

代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <style>
     #container{
            width:1002px;
            background:gray;
          }
          #header{
            width:1002px;
            height:120px;
            background:red;
          }
          #main{
            width:1002px;
            height:700px;
            background:yellow;
          }
          #lside{
            height:700px;
            width:700px;
            float:left;
            background:pink;
          }
          .four{
            height:330px;
            width:330px;
            float:left;
            background:black;
            margin:10px;

          }
          #rside{
            width:302px;
            height:700px;
            float:left;
            background:green;
          }

          #footer{
            width:1002px;
            height:120px;
            background:blue;
          }
   </style>
</head>

<body>
    <div id="content">
     <div id="header"></div>
     <div id="main">
       <div id="lside">
         <div class="four"></div>
         <div class="four"></div>
         <div class="four"></div>
         <div class="four"></div>
       </div>
       <div id="rside"></div>
     </div>
     <div id="footer"></div>
    </div>
</body>
</html>