21xrx.com
登录
  

HTML 页面布局

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

城市相册
上海
成都
达州

上海

上海,简称“沪”或“申”,是中国共产党的诞生地,中华人民共和国直辖市,国家中心城市,超大城市,沪杭甬大湾区核心城市,国际经济、金融、贸易、航运、科技创新中心 [1-2] ,首批沿海开放城市.上海地处长江入海口,是长江经济带的龙头城市、G60科创走廊核心城市.隔东中国海与日本九州岛相望,南濒杭州湾,北、西与江苏、浙江两省相接.
版权 © 21xrx.com
版面设计用<div>元素
    网页版面设计通常用<div>元素,因为用CSS可以对它轻松定位.

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

例子

网站布局用HTML5

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

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

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

例子

用表格排版

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

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

例子

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

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2