概述
|
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排版的全部内容，希望文章能够帮你解决HTML排版所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复