經典的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部分

您的項目需求