介绍
小编给大家分享一下的HTML如何布的局,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
利用HTML进行布局的方法有:通过& lt; table>标签来对表格的行和列进行排列来实现页面布局的效果,也可实现将网页内容放在多个页面中的多列布局;还可以使用div和span标签进行布局
页面布局是图形设计的一部分,用于处理页面上视觉元素的排列。接下来在文章中为大家详细介绍如何利用HTML进行网页布的局,希望对大家有所帮助。
<强>页面布局:
<李> 标题:前端的一部分,用于页面顶部灵活;header>标签用于在网页中添加标题部分。
<李> 导航栏:导航栏与菜单列表相同。它用于使用超链接显示内容信息。
<李> 索引/侧边栏:它包含其他信息或广告,并不总是需要添加到页面中。
<李> 内容部分:内容部分是显示内容的主要部分。
<李> 页脚,页脚部分包含联系信息和与网页相关的其他查询。页脚部分始终放在网页的底部灵活;footer>标签用于设置网页中的页脚。
<强>使用表格布局
最简单和最流行的创建布局的方法是使用HTML & lt; table>标签。可以按照自己喜欢的方式来对表格中的列和行进行排列例
例如,使用包含3行和2列的表来实现以HTML下布局示例,但页眉和页脚列使用colspan属性跨越两列
& lt;表宽度=?00%”;,边界=?”的在
& lt; tr>
& lt; td colspan=?”;背景=? b5dcb3"比;
& lt; h2>标题& lt;/h2>
& lt;/td>
& lt;/tr>
& lt; tr valign=皌op"祝辞
& lt; td背景=? aaa",宽度=?0“的在
& lt; b>侧边栏& lt;/b>
& lt;/td>
& lt; td背景=? eee"宽度=?00”;身高=?00“比;
内容
& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td colspan=?”;背景=? b5dcb3"比;
& lt; center>
页脚
& lt;/center>
& lt;/td>
& lt;/tr>
& lt;/table> <>强效果图:
<强>多列布局
将网页内容放在多个页面中,可以将内容保留在中间列中,也可以使用左栏使用菜单,右栏可以用于放置广告或其他内容。
& lt;表宽度=?00%”;,边界=?”的在
& lt; tr valign=皌op"祝辞
& lt; td背景=? aaa",宽度=?0%”的在
& lt; b>左菜单& lt;/b>
& lt;/td>
& lt; td背景=? b5dcb3"身高=?00”;,宽度=?0%”的在
内容
& lt;/td>
& lt; td背景=? aaa",宽度=?0%”的在
& lt; b>右菜单& lt;/b>
& lt;/td>
& lt;/tr>
& lt; table> <>强效果图:
<强>使用div布局
& lt; div>元素是用于对HTML元素进行分组的块级元素,虽然& lt; div>标记是块级元素,但HTML & lt; span>元素用于在内联级别对元素进行分组
& lt; div风格=翱矶?450 px"比;
& lt; div风格=癰ackground - color: # b5dcb3;宽度:100%,比;
& lt; h2>标题& lt;/h2>
& lt;/div>
& lt; div风格=癰ackground - color: # aaa级;身高:200 px;宽度:100 px;浮:左,“比;
& lt; div> & lt; b>左侧栏& lt;/b> & lt;/div>
& lt;/div>
& lt; div风格=癰ackground - color: # eee;身高:200 px;宽度:250 px;浮:左;“比;
& lt; b>内容& lt;/b>
& lt;/div>
& lt; div风格=癰ackground - color: # aaa级;身高:200 px;宽度:100 px;浮:没错,“比;
& lt; div> & lt; b>右侧栏& lt;/b> & lt;/div>
& lt;/div>
& lt; div风格=癰ackground - color: # b5dcb3;明确:both"比;
& lt; center>
页脚
& lt;/center>
& lt;/div>
& lt;/div> <>强效果图:
看完了这篇文章,相信你对HTML如何布局有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
