html网页布局 – HTML教程 html网页布局|HTML

上一章HTML教程请查看：html JavaScript脚本
网页布局是非常重要的，让你的网站更好地看，它需要相当多的时间来设计一个网站的布局与良好的外观和感觉。
现在，所有的现代网站都使用基于CSS和JavaScript的框架来提供响应性和动态的网站，但是你可以使用简单的HTML表格或除法标签结合其他格式标签来创建一个良好的布局。本章将给你几个例子，如何创建一个简单的，但工作的布局为你的网页使用纯HTML及其属性。
HTML布局-使用表格table创建布局最简单和最流行的方法是使用HTML < table> 标记，这些表按列和行排列，因此你可以以任何方式使用这些行和列。
【html网页布局 – HTML教程】例子
例如，下面的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 srcmini.com < /center> < /td> < /tr>< /table> < /body>< /html>

这将产生以下结果：

文章图片
多列布局-使用表格table你可以设计你的网页为：把你的网页内容放在多个网页。你可以保持你的内容在中间栏，你可以使用左栏使用菜单和右栏可以用来放置广告或其他一些东西。这种布局将非常类似于我们的网站srcmini.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>

这将产生以下结果：

文章图片
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 srcmini.com < /center> < /div>< /div> < /body>< /html>

这将产生以下结果：