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

HTML排版

2016-01-23 00:07 330 查看

HTML排版一般有两种：

一:div排版
就是用多个div标签，而每一个div中又使用不同的css样式要求每个div的宽高颜色等属性
从而把一个版面给划分开来也是最常用，也是比较好用的。
训练代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
</head>
<style type="text/css">
body{
margin: 0;
}//为了去掉白边要使用该样式让边距为0
#container{
background-color: beige;
width: 100%;
height: 950px;
}
#head{
width: 100%;
height: 10%;
background-color:
4000
aqua;
}
#menu{
width: 20%;
height: 80%;
background-color: darkmagenta;
float: left;//这个地方必须使用浮动这边用的是从左到右的浮动方式
}
#body{
width: 80%;
height: 80%;
background-color: lawngreen;
float: left;//这个地方必须使用浮动这边用的是从左到右的浮动方式
}
#foot{
width: 100%;
height: 10%;
background-color: lightcoral;
}
</style>
<body >
<div id="container">
<div id="head">head</div>
<div id="menu">menu</div>
<div id="body">body</div>
<div id="foot">foot</div>
</div>
</body>
</html>
二:table排版
这种排版其实就是把表格进行css样式的美化，并把一些表格经行合并从而达到与div相同的
效果代码量也比div排版要少。
训练代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title布局</title>
</head>
<body marginwidth="0" marginheight="0">//去掉边框
<table width="100%" height="950px" style="background-color: darkgray">
<tr >
<td height="10%" width="100%" bgcolor="#f08080" colspan="2"></td>
</tr>
<tr>
<td heiht="80%" width="30%" bgcolor="aqua"></td>
<td heiht="80%" width="70" bgcolor="#7fff00"></td>
</tr>
<tr>
<td height="10%" width="100%" bgcolor="#ff8c00" colspan="2"></td> //colspan是合并单元格因为上面有两个单元而后面有一个所以要合并
</tr>
</table>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航