HTML布局

最新推荐文章于 2024-10-18 16:48:21 发布

crystalheting

最新推荐文章于 2024-10-18 16:48:21 发布

阅读量108

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/crystalheting/article/details/103608862

版权

HTML布局：

1、使用`<div>布局：`

例如：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>HTML布局</title>
  <style>
  body{
  margin:0px;
  }
  #container{
  width:100%;
height:500px;
background-color:#F0F8FF;
 }
#heading{
  width:100%;
height:10%;
background-color:#90EE90;
 }
 #content-menu{
  width:30%;
height:80%;
background-color:#ADD8E6;
float:left;
 }
 #content-body{
 width:70%;
height:80%;
background-color:#FAF0E6;
float:left;
 }
 #footing{
width:100%;
height:20%;
background-color:#FFDEAD;
 }
   </style>
 </head>
 <body>
  <div id="container">
 <div id="heading">头部</div>
 <div id="content-menu">内容菜单</div>
 <div id="content-body">内容主体</div>
 <div id="footing">底部</div>
  </div>

效果：
在这里插入图片描述

2、使用`<table>布局：`

例如：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>table布局</title>
  <style>
  body{
  margin:0px;
  }
    </style>
 </head>
 <body >
 <table width=600px height=300px style="background-color:#FFEFD5" cellspacing=0px>
 <tr>
  <td colspan="3" width="100%" height="10%" style="background-color:#DCDCDC">
  </td>
 </tr>
  <tr>
  <td width="20%" height="80%" style="background-color:#808080">
     <ul  style="background-color:white" >
    <li >我的主页</li>
    <li >博客管理</li>
    <li >文章管理</li>
    <li>评论管理</li>
   </ul>
  </td>
   <td width="60%" height="80%" style="background-color:white"></td>
  <td width="20%" height="80%" style="background-color:#808080"></td>
 </tr>
 <tr>
  <td colspan="3" width="100%" height="10%" style="background-color:#DCDCDC"></td>
 </tr>
 </table>
 </body>
</html>

效果：
在这里插入图片描述