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

后台开发学习（三）对HTML5简单学习

2017-03-01 17:43 148 查看

今天开始了解一些简单的HTML5布局，然后后面就要进入后台一些方面的知识了，激动中。

div布局:

div本身是什么都没有的，通过对div样式的控制来完成布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>divLayout</title>
<style type="text/css">
body{
margin: auto;
}

div#container{
width: 100%;
height: 950px;
background-color: aliceblue;
}

div#head
{
width: 100%;
height: 15%;
background-color: aqua;
}

div#content_menu
{
width: 30%;
height: 70%;
background-color: beige;
float: left;
}

div#content_body
{
width: 70%;
height: 70%;
background-color: brown;
float: left;
}

div#foot
{
width: 100%;
height: 15%;
background-color: coral;
clear: left;
}

</style>

</head>
<body>

<div id="container" >
<div id="head">header</div>
<div id="content_menu">menu</div>
<div id="content_body">body</div>
<div id="foot">bottom</div>
</div>
</body>
</html>

table布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TableLayout</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: darkgray">
<tr>
<td colspan="3" height="15%" width="100%" style="background-color: coral">head</td>
</tr>
<tr>
<td height="70%" width="10%" style="background-color: blueviolet">left_menu</td>
<td height="70%" width="80" style="background-color: inherit">main_body</td>
<td height="70%" width="10%" style="background-color: darkgoldenrod">right_menu</td>
</tr>
<tr>
<td colspan="3" height="15%" width="100%" style="background-color: darksalmon">bottom</td>
</tr>

</table>

</body>
</html>

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

标签： html5

相关文章推荐

新的分享

章节导航