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: 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>
|
HTML排版
最新推荐文章于 2024-07-10 22:00:13 发布