前端html文档的基本布局

项目中前端部分是依据美工的效果图开展工作的，当拿到一张效果图以后最主要也是最重要的部分就是进行网页结构的的布局工作，当布局完成以后前端部分基本完成了大半，所以根据项目中遇到的布局以及个人的一些想法将布局部分进行一次总结。

网页布局最初是采用表格布局也就是table布局，但是该布局据说是在多层嵌套时会产生性能问题，具体以及测试本人并未实践，所以它已经成为过去时，现在最多的布局方式也是最主流的布局方式是div+css布局。当然这种布局也存在问题，因为无法实现语义化布局使得seo效能低下。随着html5规范的公布，让语义化布局成为比较合理的布局（个人见解）。所以基于接下来总结的布局也是基于html5的语义化布局以及div+css组合的方式进行布局，来满足项目的需求

上文提到的组合方式是在界面中体布局上采用语义化布局，在其内部采用div+css，实现整体语义化，局部盒子布局的方式。

<!DOCTYPE html>

<html>

<head>

<title>文档的基本结构</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="css/normalize.css">

<link rel="stylesheet" type="text/css" href="css/base.css">

<script src="js/jquery-1.7.2.min.js"></script>

<script src="js/baseframe.js"></script>

<!--[if lt IE 9]>

<script src="js/html5shiv.js"></script>

<script src="js/json2.js"></script>

<![endif]-->

</head>

<body>

<div class="main">

<header class="grp_header"></header>

<nav class="grp_nav"></nav>

<section class="grp_section">

<aside class="grp_aside"></aside>

<article class="grp_article"></article>

</section>

<section class="grp_section">

<figure class="grp_figure">界面局部独立块使用</figure>

<article class="grp_article"></article>

</section>

<footer class="grp_footer clear"></footer>

</div>

</body>

</html>

</body>

</html>

代码说明：

0、normalize.css为css样式重置，解决各种浏览器的默认样式带来的样式影响，base.css为文档样式表文件，可以理解为通用样式，当有具体业务时可以再次创建新文件用于保存业务样式，各个不同的业务创建不同的业务样式（个人见解）。同理于js文件，创建通用js方法文件，并创建业务js文件（baseframe.js）。

1、布局代码中为了兼容IE低版本，引入了支持html5标签的html5shiv.js文件；

2、为了支持低版本的JOSN方法，引入了json2.js文件；

3、在body中嵌入main样式，为了实现文档整体的样式调整，header表示文档头、页眉，nav表示导航也是一级菜单，article表示文档正文部分，aside表示边栏，section表示文档分块，footer表示文档页脚。

4、其中article中分为左右布局，左边为aside，右边为section，该出采用浮动布局，即float，左侧浮动，右侧进行块状格式化上下文，即bfc,实现左右不会越界，兼容性也没有问题。（注：bfc实现办法：overflow:hidden;*zoom:1）

来自为知笔记(Wiz)

时间： 2024-10-06 00:42:57

前端html文档的基本布局

前端html文档的基本布局的相关文章

前端理论--文档对象模型

前端 HTML文档详解

前端学习文档推荐

BugPhobia进阶篇章：前端技术/设计文档

html文档页面重绘和重新布局

transform布局不会脱离文档流

数组对象元素的添加，String对象，BOM对象以及文档对象的获取

js基础，DOM 文档对象模型

页面标准文档流、浮动层、float属性（转）