快速注册

我的HTML作业－网页布局3

小鲁阿姨 2017-08-08 16:32:10

1.田字格布局：充分利用float
方法一：
<!DOCTYPE html>
<html lang="zh-cn" >
<head>
<title>田字格布局</title>
<style type="text/css">
.box{
  width: 430px;
  height: 430px;
}
  .dd{
  width:200px;
  height:200px;
  border:1px solid yellow;
     }
     #lefttop{
      background:red;
      float:left;
     }
     #righttop{
      float:left ;
      background: green;
     }
     #leftbuttom{
      background:grey;
      float:left;
     }
     #rightbuttom{
      background: purple;
      float:left;
     }
</style>
</head>
<body>
<div class="box">
<div class="dd" id="lefttop"></div>
<div class="dd" id="righttop"></div>
<div class="dd" id="leftbuttom"></div>
<div class="dd" id="rightbuttom"></div>
</div>
</body>
</html>
方法二：
  .dd{
  width:200px;
  height:200px;
  border:1px solid yellow;
     }
     #lefttop{
      background:red;
      float:left;
     }
     #righttop{
      float:left ;
      background: green;
     }
     #leftbuttom{
      background:grey;
      float:left;
      clear:left;
     }
     #rightbuttom{
      background: purple;
      float:left;
     }
拓展
float:left;
float:right;
float:both;
clear:left;
思考：如果父div中的子div都是浮动的，父div的高度，有没有被撑起来？
2.完成一个基本网页布局。
<!DOCTYPE html>
<html lang="zh-cn" charset="utf-8">
<head>
<title>基本网页布局</title>
<style type="text/css">
div{
  width:1200px;
  height:1600px;
}
#header{
  height:200px;
  background:blue;
}
#main{
  height:1300px;
  background:purple;
}
#footer{
  height: 100px;
  background:grey;
}
#left{
  width: 900px;
        height:1300px;
  background:green;
  float:left;
}
#right{
  width:300px;
  height:1300px;
  background:red;
  float:left;
}
</style>
</head>
<body>
    <div id="content">
<div id="header"></div>
<div id="main">
  <div id="left"></div>
  <div id=right></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
附：新手常犯的几个错误：
a.不加doctype，导致低版本IE解析效果不一样；
b.id为数字；
c.文件编码与charset声明不一致。

HTML

回应转发赞收藏

还没人转发这篇日记

小鲁阿姨 (北京)

Chance favors the one with a prepared mind.

我的HTML作业－网页布局3

热门话题 · · · · · · ( 去话题广场 )