经典的jQuery实现页面公共部分方法，附代码

先想到的自然是js来处理了，利用js(jQuery)或ajax从服务器上取回需要的公共页面然后插入页面。

一、使用jqury的load方法填充dom，不写回调函数也是可以的，例如：

$("#div1").load("/example/jquery/demo_test.txt"）

load方法使用示例：

<!DOCTYPE html><html><head>

$(document).ready(function(){ $("button").click(function(){ $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){ console.log('#'+responseTxt);

console.log('#'+statusTxt);

console.log(xhr); if(statusTxt=="success") alert("外部内容加载成功！");

if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText);

});

TML主体标记

代码分为三部分编写

<html>              是网页文件的最外层标记
	<head>          之间的文本是头信息
		不会显示在浏览器中，包括基本的描述，整个网页的公共属性
	</head>
	<body>      是网页文件的主体部分
		正文 ：文字、图片、链接、表单等
	</body>	
</html>

HTML文档头部标记

<title> </title> 只能有一个

<base /> 只能有一个

<meat> 可以有多个

title

定义网页标题，显示在浏览器的标题栏中
公司名称+公司产品
有利于搜索引擎（也是在搜索引擎中显示的标题）

base

基底网址标记
用于设定浏览器中文件的绝对路径
网页中的文件只需要写下文件的相路径即可，这个路径就是base中指定下的路径

link

设置外部文件的链接标记
用于确定本页面和其它文档之间的关系

meta两种用法

Name 用于在网页中加入一些关于网页的描述信息，网页的关键字，网页描述信息

http-equiv:属性用于在HTML文档中模拟HTTP协议的响应消息头，例如，告诉浏览器是滞缓存页面，使用什么样的字符集显示网页内容

Meta标签的name属性

不是自己定义的值：

Keywords : 网页的关键字

Description：网页的描述

Robots ： index noindex follow nofollow all none

Author

copright

Meta标签的http-equiv属性设置

Content-Type

Refresh

Expires

Windows-Target

Pragma

Page-Enter和Page-Exit

主本标记<body>

在它中放置网页中所有内容

Text
Bgcolor
Background
Link
Alink
Vlink
Topmargin
Leftmargin

只要是可以用样式控制的就不用HTML本身属性

Id name class style 通用属性，所有的元素都可以使用

DTD

文档类型定义

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Html
Public
Version
URL

大有学问#

今天实际操作上手有一点小变更，就是将top中的nav-bottom模块重划分到main部分中。

这样刚好是一个完整的main，不用重新切割测量大小。

今天写一个大概的行模块布局，详细部分下次再写。

CSS公共属性

/* 清除浏览器默认设置 */
* {
    margin: 0;
    padding: 0;
}
/* 背景颜色 */
body {
    background-color: #f3f6f6;
}
.bGW {
    background-color: white;
}
/* 添加浮动 */
.fL {
    float: left;
}
.fR {
    float: right;
}
/* 清除浮动 */
.clearF {
    overflow: hidden;
}
/* 版心宽度1200px,水平居中 */
.bX {
    width: 1200px;
    margin: auto;
}

top部分

.top {
    height: 101px;
  <!-- 临时背景颜色，方便看清楚盒子位置，填充实际内容时会删除掉该属性 -->
    background-color: antiquewhite;
}

<div class="top bX"></div>

top部分

nav部分

.nav {
    height: 420px;
  <!-- 这是吸取的真实背景颜色 -->
    background-color: #1c056c;
}

<div class="nav"></div>

nav

main部分

.mB42 {
    margin-bottom: 42px;
}
.menu {
    height: 60px;
    /* 盒子阴影 */
    box-shadow: 1px 2px rgba(118, 118, 118, 0.2);
    margin-top: 8px;
    margin-bottom: 37px;
}
/* 初阶段用于显示模块位置，实际布局需删除该选择器 */
.main-top,
.main-center div,
.main-bottom div {
    background-color:  white;
}
.main-top {
    height: 603px;
}
.main-center {
    height: 923px;
}
.main-center-top,
.main-center-bottom {
    height: 440px;
}
.main-bottom-top,
.main-bottom-bottom {
    height: 318px;
}

<div class="main bX">
  <!-- main可划分为四个大的行模块 -->
  <!-- menu行模块 -->
  <div class="menu bGW">main-menu</div>
  <!-- main-top行模块 -->
  <div class="main-top mB42">
    精品推荐
  </div>
<!-- main-center行模块 -->
  <div class="main-center mB42">
   <div class="main-center-top mB42">
     编程入门
   </div>
   <div class="main-center-bottom mB42">
     数据分析师
   </div>
  </div>
<!-- main-bottom行模块 -->
<div class="main-bottom mB42">
  <div class="main-bottom-top mB42">
    机器学习工程师
  </div>
  <div class="main-bottom-bottom">
    前端开发工程师
  </div>
 </div>
</div>

menu行模块和main-top行模块

main-center行模块

main-bottom行模块

footer部分

.footer {
    height: 417px;
}

<div class="footer bGW">
  <div class="bX">
    footer
  </div>
</div>

footer部分

下次更新完整代码。拜拜

在线咨询

上一篇：CSS 语音参考
下一篇：挑战与启示：从HTML提取失败中探索信息获取的新路径

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

经典的jQuery实现页面公共部分方法，附代码

TML主体标记

HTML文档头部标记

meta两种用法

Meta标签的name属性

Meta标签的http-equiv属性设置

主本标记<body>

文档类型定义

CSS公共属性

top部分

nav部分

main部分

footer部分

您的项目需求