本文摘自PHP中文网,作者墨辰?R,侵删。
html常用的布局有两种。第一种一是div布局,优点是比较方便简洁,代码比较少,制作和维护也比较容易,就是有些地方不同的浏览器兼容性不一样,可能会有不同的显示。第二种是table布局,代码比较多,到后期维护起来是非常头疼的,但是table布局规避了许多浏览器不兼容的问题。1.div布局
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 | <!DOCTYPE html>
< html >
< head lang = "en" >
< meta charset = "utf-8" >
< title ></ title >
< style >
body{margin: 0; padding: 0;}
#header{width:100%; height: 90px; background: #b19f9d; }
#nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;}
.content{width: 950px; height: 900px; background: #847369; margin: 0 auto;}
.left{width:30%; height: 900px; background: #decfd4; float: left;}
.right{width: 70%; height: 900px; background: #b3a19d; float: left;}
footer{width:100%; height: 150px; background: #a8817a;}
</ style >
</ head >
< body >
< header id = "header" >
< nav id = "nav" >空空</ nav >
</ header >
< div class = "content" >
< div class = "left" ></ div >
< div class = "right" ></ div >
</ div >
< footer ></ footer >
</ body >
</ html >
|
2.table布局
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 | <!DOCTYPE html>
< html >
< head lang = "en" >
< meta charset = "utf-8" >
< title ></ title >
< style >
</ style >
</ head >
< body marginheight = "0px" marginwidth = "0px" >
< table width = "100%" height = "950px" style = "background-color:gray" >
< tr >
< td colspan = "2" width = "100%" height = "10%" style = "background-color: aqua" >< td >
</ tr >
< tr >
< td width = "20%" height = "80%" style = "background-color: blue" >< td >
< td width = "80%" height = "80%" style = "background-color: blue" >< td >
</ tr >
< tr >
< td colspan = "2" width = "100%" height = "10%" style = "background-color: black" >< td >
</ tr >
</ table >
</ body >
</ html >
|
总结:
阅读剩余部分
相关阅读 >>
认识javascript是如何工作的,深入v8引擎和编写优化代码
Html如何实现点击链接打开一个新窗口
使用Html+css制作一些动画提示工具
canvas原生实现前端网页移动端签名
Html块级、行级元素介绍
Html中引用jquery的两种方法
Html首行缩进怎么设置
怎么设计自己的网页
js怎么去掉Html标签
如何去除Html边框间隙
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html写网页如何布局