本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家带来的内容是介绍如何使用HTML布局web页面?(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。一, 效果图。
二,代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>html 列表</title>
</head>
<body>
<!--使用div元素的网页布局-->
<div id= "container" style= "width:500px" >
<div id= "header" style= "" >>
<h1 style= "margin-bottom:0" >main title o f web page</h1>
</div>
<div id= "menu" style= "height:200px;width:100px;float:left" >
<b>menu</b>
<br> html
<br> css
<br> javascript
</div>
<div id= "content" style= "height:200px;width:400px;float:left" >
ontent goes here
</div>
<div id= "footer" style= "clear:both;text-align:center" >
Copyright ? W3CSchool.cc
</div>
<!--使用table元素的网页布局-->
<table width= "500" border= "0" >
<tr>
<td colspan= "2" style= "" >>
<h1>main title of web page</h1>
</td>
</tr>
<tr>
<td style= "width:100px" >
<b>menu</b>
<br>html
<br>css
<br>javascript</td>
<td style= "height:200px;width:400px" >
content goes here</td>
</tr>
<tr>
<td colspan= "2" style= "text-align:center" >
Copyright ? W3CSchool.cc</td>
</tr>
</table>
</body>
</html>
|
参考资料:《菜鸟教程》
以上就是如何使用HTML布局web页面?(代码示例)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Html的基础笔记
Html查看器是什么意思
Html如何制作滚动歌词
form标签的action属性怎么用?form标签action属性的用法介绍(附实例)
Html的<progress>标签
vue源码之目录结构的简单分析
Html textarea是什么意思?如何获取textarea标签中的换行符和空格?
Html中class是什么意思
怎么打开Html网页
Html hr标签的属性有哪些?Html hr标签的样式详解
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何使用HTML布局web页面?(代码示例)