html网页布局

来源：互联网发布：网络语bug什么意思编辑：程序博客网时间：2024/05/21 05:08

<!doctype html><html><head><meta charset="utf-8"><title> </title><style type="text/css">#header,#siderLeft,#siderRight,#footer{border:solid 1px #666;padding:10px;margin:6px;}#header{width:500px }#siderLeft{float:left;width:60px;height:100px;}#siderRight{float:left;width:406px;height:100px}#footer{clear:both;width:500px;}</style></head><body><div id="header">导航</div><div id="siderLeft">菜单</div><div id="siderRight">内容</div><div id="footer">底部说明</div></body></html>

上述代码虽然可以运行，但是页面结构很多部分对于浏览器来说很多部分是未知的，因为浏览器通过ID号定位元素的，因此，只要开发者不同，就允许元素的ID号各异，这对浏览器来说，不能很好地表面元素的位置，必然会影响页面解析的速度

修改成HTML5代码：

<!doctype html><html><head><meta charset="utf-8"><title> </title><style type="text/css">header,nav,article,footer{border:solid 1px #666;padding:10px;margin:6px;}header{width:500px }nav{float:left;width:60px;height:100px;}article{float:left;width:406px;height:100px}footer{clear:both;width:500px;}</style></head><body><header>导航</header><nav>菜单</nav><article>内容</article><footer>底部说明</footer></body></html>

阅读全文

0 1