【呼叫网管】HTML 布局
发布时间:2016-11-11  
网站布局
 
大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。
 
可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
 
提示:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!
 
 
HTML 布局 - 使用 <div> 元素
 
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局:
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>
 
上面的 HTML 代码会产生如下结果:
 
 

返     回

2022-07-21外贸客户拖欠钱款? 教你几招,对外贸风险说ByeBye!
2022-07-05海运全面退烧,卖家有了翻盘转机
2022-06-302022年下半年,这些外贸新规正式落地!
2022-05-26不是产品问题,也不是报价太高,他为何就是拿不下这个订单?
2022-05-10必收藏!257个外贸常用的英文缩写
2022-05-10货物到港后,客户不提货,被退运,被拍卖,怎么办?
2022-05-10当前情况下,是谁在抢占国际贸易的“出口蛋糕”?
2022-04-21外贸老鸟私藏干货 | 52个客户开发渠道和工具
咨询热线
业务、服务支持:18261168899  sisi@one-all.com
公司总机:0519-89605835
地址:江苏省常州钟楼区怀德桥南华景大厦19楼
传真:0519-89605808
Copyright © 2025 中环互联网 All Rights Reserved 《中华人民共和国增值电信业务经营许可证》编号:苏 B2-20100284 苏ICP备05049784号-1.
免费获取互联网整合营销方案