Html 页面布局| 21xrx.com

HTML 页面布局

一个网站的内容一般会分成很多板块来展示(就像杂志和报纸).

城市相册

上海

成都

达州

上海

上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市,国家中心城市,超大城市,沪杭甬大湾区核心城市,国际经济、金融、贸易、航运、科技创新中心 [1-2] ,首批沿海开放城市.上海地处长江入海口,是长江经济带的龙头城市、G60科创走廊核心城市.隔东中国海与日本九州岛相望,南濒杭州湾,北、西与江苏、浙江两省相接.

版权 © 21xrx.com

版面设计用<div>元素

网页版面设计通常用<div>元素,因为用CSS可以对它轻松定位.

这个例子用了四个<div>元素创建了多列布局:

例子

<body>

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style><div id="header">
<h1>城市相册</h1>
</div>

<div id="nav">
上海<br>
成都<br>
达州
</div>

<div id="section">
<h1>上海</h1>
<p>上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市,
国家中心城市,超大城市,沪杭甬大湾区核心城市,
国际经济、金融、贸易、航运、科技创新中心 [1-2] ,
首批沿海开放城市.上海地处长江入海口,是长江经济带的龙头城市、
G60科创走廊核心城市.隔东中国海与日本九州岛相望,
南濒杭州湾,北、西与江苏、浙江两省相接.</p>
</div>

<div id="footer">
版权 © 21xrx.com.com
</div>

</body>

网站布局用HTML5

HTML5提供了一些新的语义级的元素,用来定义页面的不同部分.

<nav>

<aside>

<header> - 定义文档或段的标题
<nav> - 定义导航菜单的容器
<section> - 在文档里定义一个版面
<article> - 定义一个独立的文章容器
<aside> - 定义内容的旁白(侧边栏)
<footer> - 给文档或某个板块定义页脚
<details> - 定义附加信息
<summary> - 定义<details>标签的标题信息

下面这个例子用<header>,<nav>,<section>和<footer>创建一个多列布局

例子

<body>
<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>
<header>
<h1>城市相册</h1>
</header>

<nav>
上海<br>
成都<br>
达州
</nav>

<section>
<h1>上海</h1>
<p>上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市,
国家中心城市,超大城市,沪杭甬大湾区核心城市,
国际经济、金融、贸易、航运、科技创新中心 [1-2] ,
首批沿海开放城市.上海地处长江入海口,是长江经济带的龙头城市、
G60科创走廊核心城市.隔东中国海与日本九州岛相望,南濒杭州湾,
北、西与江苏、浙江两省相接. </p>
</section>

<footer>
版权 © 21xrx.com
</footer>

</body>

用表格排版

<table>元素不是设计来进行排版的工具. <table>的作用在于显示表格式的数据

用<table>标签可以实现排版,因为表格可以用CSS设计.

例子

<body>

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp th {
    width:40px;
}
</style><table class="lamp">
<tr>
  <th>
    <img src="/public/images/example_one.jpg" alt="Note"
 style="height:32px;width:32px">
  </th>
  <td>
    表格不是设计来进行页面排版.
  </td>
</tr>
</table>

</body>

警告:用表格创建版面没错,但是不推荐使用！避免用表格进行版面设计

HTML 页面布局

上海

版面设计用<div>元素

例子

网站布局用HTML5

例子

用表格排版

例子

评论区