个性化阅读
专注于IT技术分析

html网页布局 – HTML教程

点击下载

上一章HTML教程请查看:html JavaScript脚本

网页布局是非常重要的,让你的网站更好地看,它需要相当多的时间来设计一个网站的布局与良好的外观和感觉。

现在,所有的现代网站都使用基于CSS和JavaScript的框架来提供响应性和动态的网站,但是你可以使用简单的HTML表格或除法标签结合其他格式标签来创建一个良好的布局。本章将给你几个例子,如何创建一个简单的,但工作的布局为你的网页使用纯HTML及其属性。

HTML布局-使用表格table

创建布局最简单和最流行的方法是使用HTML <table>标记,这些表按列和行排列,因此你可以以任何方式使用这些行和列。

例子

例如,下面的HTML布局示例是使用一个具有3行和2列的表实现的,但是页眉和页脚列使用colspan属性跨列

<!DOCTYPE html>
<html>

   <head>
      <title>HTML布局-使用Table</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>网页主标题</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>主菜单</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
                技术和分析教程
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2018 srcmini02.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

这将产生以下结果:

HTML布局-使用表格table

多列布局-使用表格table

你可以设计你的网页为:把你的网页内容放在多个网页。你可以保持你的内容在中间栏,你可以使用左栏使用菜单和右栏可以用来放置广告或其他一些东西。这种布局将非常类似于我们的网站srcmini02.com。

例子

这里有一个创建三列布局的例子:

<!DOCTYPE html>
<html>

   <head>
      <title>三列HTML布局</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>主菜单</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
                
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               IT技术分析博客
            </td>
                
            <td bgcolor = "#aaa" width = "20%">
               <b>右菜单</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

这将产生以下结果:

多列布局-使用表格table

HTML布局-使用DIV和SPAN

<div>元素是用于分组HTML元素的块级元素,虽然<div>标记是块级别的元素,但是HTML <span>元素用于在内联级别对元素进行分组。

虽然我们可以用HTML表格实现很好的布局,但是表格并不是作为一个布局工具来设计的,表table更适合显示表格数据。

注意,这个例子使用了层叠样式表(CSS),所以在理解这个例子之前,你需要更好地理解CSS是如何工作的。

例子

在这里,我们将尝试使用<div>标记和CSS实现相同的结果,无论你在前面的示例中使用<table>标记实现了什么。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML布局 - 使用DIV和SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
        
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>这是页面主标题</h1>
         </div>
            
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>主菜单</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
            
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>IT技术分析博客 - srcmini</p>
         </div>
        
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>右菜单</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
            
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2018 srcmini02.com
            </center>
         </div>
            
      </div>
   </body>

</html>

这将产生以下结果:

HTML布局 - 使用DIV和SPAN

我们可以使用DIV、SPAN和CSS创建更好的布局,有关CSS的更多信息,请参阅CSS教程。

赞(0)
未经允许不得转载:srcmini » html网页布局 – HTML教程

评论 抢沙发

评论前必须登录!