您的位置：首页 > Web前端 > HTML

html学习-day03:简单首页布局

2014-01-05 00:31 267 查看

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

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css div布局布局

相关文章推荐

新的分享

章节导航