HTML布局

or

网页布局对改善网站的外观非常重要,请慎重设计您的网页布局,大多数网站会把内容安排到多个列中(就像杂志或报纸那样),大多数网站可以使用

或者

e.g:虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用

元素/div 元素是用于分组 HTML 元素的块级元素

1

2

3

4

5

6

7

8 Main Title of Web Page

9

10

11 Menu

12 HTML

13 CSS

14 JavaScript

15

16

17 Content goes here

18

19

20 Copyright © w3cschool.cn

21

22

23

24

25

HTML 布局 - 使用table表格

使用 HTML

或者

1

2

3

4

5

6

7

8

Main Title of Web Page

9

10

11

12

13

14 Menu

15 HTML

16 CSS

17 JavaScript18

19

20 Content goes here

21

22

23

24

25 Copyright © w3cschool.cn

26

27

28

29

30

HTML 布局/使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。同时由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局，并优化它们)。

拓展：网页简单布局之结构与表现原则案例

概括：一开始我们接触网页制作的时候，就了解到html代表结构、css代表样式、javascript代表行为，网页制作中，我们一直强调结构与表现相分离的原则，这里面的结构一般指HTML，此外分离是说把它们写在不同的文件加以引用吗？当然不是，在这里的学习中了解到，分离不单是一种方法更是一种思想，简而言之，一个平面二维坐标，其中x轴代表技术发展，y轴代表网页制作需求，分离是根据技术发展和我们的网页制作需求完成的！

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。

相关内容

暂无相关文章

html lt;tablegt;,HTML布局lt;divgt;orlt;tablegt;，相关推荐

  1. 点击改变div高度_css实现div两列布局（两种方法）

    一.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 二.思路 首先把这个问题分步解决,需要攻克以下两点: 1.让两个div并排到一行 2.让一个div宽度固定,另个div占 ...

  2. Android布局优化之include、merge、ViewStub

    include:引入重复使用的相同布局 merge:减少include布局的层级,将子元素直接添加到merge标签的parent中 ViewStub:其实就是一个宽高都为0的一个View,它默认是不可 ...

  3. Laravel Dcat-admin 详情页多栏布局开发

    背景 随着 dcat-admin 越来越多的人使用,相信有许多跟我一样热爱这个项目的的人最后也会参与到这个项目中来,从使用者到项目的维护者,可以为项目贡献一份自己的力量.我以后也会将维护这个项目的一些 ...

  4. [JAVA EE] Thymeleaf 高级用法：模板布局，带参数的引用片段，表单验证，常用校验注解

    模板布局 公共部分通常定义为模板布局:如页眉,页脚,公共导航栏.菜单等. 模板布局定义方法 布局页中用 th:fragment 定义模板片段,其他页面用 th:insert 引用片段 例如:foote ...

  5. java gui 案例_JavaGui入门—布局的嵌套使用附实例

    JavaGui布局 常见布局 BorderLayout(边界布局) BorderLayout.EAST BorderLayout.WAST BorderLayout.NORTH BorderLayou ...

  6. HarmonyOS 使用DevEcoStudio创建一个xml布局以及引用布局

    文字描述创建 打开DevEco ,entry > src > main > resources > base",右键点击"layout"文件夹,选 ...

  7. HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用

    AdaptiveBoxLayout 是什么 AdaptiveBoxLayout 是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自 ...

  8. HarmonyOS UI开发 TableLayout(表格布局) 的使用

    TableLayout 是什么 TableLayout  是表格布局,就是使用表格的方式划分子组件, 个人感觉应该也不是常用的布局,常用的还是选择DirectionalLayout和Dependent ...

  9. HarmonyOS UI开发 PositionLayout(位置布局) 的使用

    PositionLayout 是什么 PositionLayout 是位置布局,在PositionLayout中,子组件通过指定准确的x/y坐标值在屏幕上显示.(0, 0)为左上角:当向下或向右移动时 ...

  10. HarmonyOS UI开发 DependentLayout(依赖布局) 的使用

    DependentLayout是什么 DependentLayout是依赖布局,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置.(类似Android的相对布局) Dependen ...

最新文章

  1. Oracle的介绍及其在安装和使用Oracle过程中可能遇到的困难及其相应的解决措施
  2. mysql5.7 only_full_group_by_MySQL5.7默认打开ONLY_FULL_GROUP_BY模式问题与解决方案
  3. 使用JQuery从客户端调用C#方法
  4. JavaEE 设计模式
  5. 在web前端调用后台java程序(java类)的方式
  6. JAVA就业面试题之单例模式
  7. MFC子线程访问主线程对话框程序的控件对象
  8. php登录个性验证码,PHP七种不同的个性创意验证码例子
  9. 完全弄懂C++中的构造与析构函数
  10. BZOJ1061 NOI2008 志愿者招募 线性规划、费用流
  11. 使用ExpandoObject将XML转换为动态对象
  12. which与whereis区别
  13. 【Beam Search】seq2seq中的beam search算法过程
  14. 异常：操作可能会破坏运行时稳定性
  15. Opencv Camshift对象跟踪
  16. Labview 做二维码识别
  17. Spiceworks数据统计：Win10发布半年使用情况
  18. 花花公子推荐伤感qq日志：乖不哭，我拜你
  19. linux mantis安装 yum,CentOS 安装和配置 Mantis
  20. mysql emoji 问号_mysql数据库怎么存入emoji表情，更改utf8mb4后为什么出现全是问号...

热门文章

  1. renren-fast：使用人人开源renren-fast报错Error:(11, 39) java: 程序包io.renren.datasource.annotation不存在
  2. SQL：postgresql求多个点组成的多边形的geom数据
  3. Javascript特效：简易留言板
  4. JavaScript中清空数组的三种方式对比以及JavaScript常用数组操作方法
  5. DB2 DatabaseMetadata类的使用
  6. python自动搜索最佳超参数之GridSearchCV函数
  7. 设置pyspark 启动时所使用的python版本
  8. Wicket实战（二）hello world
  9. Quartz的使用案例
  10. 时间选择插件jquery.timepickr