菜鸟学习笔记:表格布局和div+css布局
2017-02-12 本文已影响359人
钛合金3000
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局
<!doctype html>
<html>
<head>
<title>表格布局</title>
<meta charset="utf-8">
</head>
<body>
<table width="100%">
<tr>
<td colspan="2" style="background-color: blue">
<h1 align="center">导航</h1>
</td>
</tr>
<tr>
<td style="background-color: red" width="50%">
<dl>
<dt>推荐文章</dt>
<dd>
<ul>
<li>一个猴子成长史</li>
<li>你看个毛线</li>
<li>我就瞅你咋地</li>
<li>村里出了个半边天</li>
</ul>
</dd>
</dl>
</td>
<td style="background-color: yellow" width="50%">
<h1>一个猴子的成长史</h1>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</td>
</tr>
<tr>
<td colspan="2" style="background: black">
<h1 align="center" style="color:red">页脚</h1>
</td>
</tr>
</table>
</body>
</html>
实现效果
表格布局
**表格布局的思路就是把整个网页看成一个简单的表格,然后在不同的单元格内进行内容填充.下面我们再使用div+css进行布局,一般的div结构元素如下图
**
图片来自实验楼
撸起袖子写代码
<!doctype html>
<html>
<head>
<title>div布局</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>这是一个导航</h1>
</div>
<div id="pagebody">
<div id="sidebar">
<dl>
<dt>优秀文章展现</dt>
<dd>
<ul>
<li>你好,一只鸡</li>
<li>我在西河大桥看大腿</li>
<li>啊,大海好多水</li>
<li>我们走皮皮虾</li>
</ul>
</dd>
</dl>
<!-- <br>
<br>
<br> -->
</div>
<div id="mainbody">
<h1>开学啦</h1>
<p>坑比小学僧们再见啦</p>
<!-- <br>
<br>
<br>
<br> -->
</div>
</div>
<div id="footer">good good study, day day up</div>
</div>
</body>
</html>
css部分
#container{
width: 100%;
/*clear: both;*/
}
#header{
width: 100%;
background-color: blue;
text-align: center;
float: left;
/*clear: both;*/
}
#pagebody{
//float: left;
}
#sidebar{
width: 40%;
height: 500px;
background-color: red;
float: left;
/*clear: both;*/
}
#mainbody{
width: 60%;
height: 500px;
background-color: yellow;
float: left;
}
#footer{
width: 100%;
background-color: gray;
text-align: center;
font-size: 50px;
float: left;
}
实现效果
div+css布局
div布局的思路是是把页面看成一个大盒子,用盒子来盛装内容,至于两种布局方法的区别,看这里看这里:浅析div+css与表格布局的区别
