web设计：布局（6）_web布局设计-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37387187/article/details/90516936

网页布局

HTML 布局 - 使用div元素

在布局的时候一般会在外面加上一个div标签，像这样

<html>
<head> 
<meta charset="utf-8"> 

</head>
<body>
 
<div>
      <h1>第一行</h1>
 
</div>
<div>
      <h1>第二行</h1>
</div>

</body>
</html>

当网站内容比较多的时候，在外面加上一个div，再对div进行布局，加上一些css属性，这样才能更好规划内容

例如


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 

</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
hhh</div>
 
</div>
 
</body>
</html>

在这里插入图片描述

代码中的style属性后面会学到，了解一下就行，这就是css。

div就相当于一个容器。

常见的布局标签还有table，table在前面已经学习，是表格的意思。


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 

</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
hhhh</td>
</tr>
</table>
 
</body>
</html>

结果是一样的

在这里插入图片描述