總體設計

在開始之前我們對網頁應該有大致的把握，也就是說，在開始之前我們就要清楚我們要實現的目標，對應的最基礎的框架結構，并且通過使用我們學過的那些標簽和屬性來實現。我們可以隨便在網上找一個樣式簡單點的網頁來實現，這可能要涉及到一小部分的css樣式的內容（畢竟只用HTML很難寫出相同的效果）。下面我們就先展示一下我們要完成的效果：

大家可以看出，這個頁面實現起來難度應該不大，這里涉及到布局，圖片的插入，背景顏色調整，鏈接實現頁面內的跳轉，表單實現文本輸入和郵件發送，再加上最基礎的文本格式，用我們前面講過的知識，足以對付。

下面，我們就先來用一個結構圖將這個頁面的結構為大家剖析一下。讓大家對這個實驗結構有更好的理解：?

2.2 總體框架及布局

前面的章節中我們講過兩種實現布局的方式，一個是表格元素，一個是div元素，這里我們選擇使用div元素來實現。這里涉及到一點css的東西，用了style。但是無關緊要，完全能理解。下面我們就來具體講解下：

首先我們將整個頁面橫向分為五個塊，整個頁面我們先看作一個大的塊，其他的塊嵌套在其中。我們現在就為他們命名。

整個頁面我們看作時一個塊，我們將其命名為container，所有的塊都嵌套在其中 下面就是標題，命名為header，這是整個頁面的頭部，一個標題加一個本頁面鏈接，沒什么多說的

下一個是我們第一個大的部分，占了第一篇頁面的絕大多部分，有一張工程師的插圖，命名為paragraph。

接下來有四張插圖的部分，我們將其算為一個大的塊（其實有四個塊，水平并列，每一個塊插一張圖）這四個小塊分別命名為leftside、middle1、middle2、rightside。

再下來就是表單發送郵件的塊，主要實現文本輸入和郵件發送，將其命名為footer1.

最后就是一個美化的底邊框，將其命名為footer2。

下面就是具體的代碼，在這個style中，順便設置了一些對這個塊的總體設置（所占寬度，高度，對齊等）：

<style> #container {width: 1300px;margin: 0 auto; /* 使 #container 居中 */ } #header {background-color: darkslategray;height: 130px;font-size: 16px; } #paragraph {background-color: lightseagreen;height: 550px;text-align: center;font-size: 30px; } #leftside {height: 350px;width:310px;float: left; } #middle1 {height: 350px;width: 340px;float: left; } #middle2 {height: 350px;width: 340px;float: left; } #rightside {height: 350px;width: 310px;float: left; } #leftside img, #middle1 img, #middle2 img, #rightside img {width: 100%; } #footer1 {background-color: powderblue;height: 600px;clear: both;text-align:center; } #footer2 {background-color: lightslategrey;height: 100px;clear: both;text-align:center; } </style>

2.3 具體模塊實現

上面介紹了總體的模塊，這里我們就具體來看看如何實現每一塊的實現：

header：

<div id="header" ><br/><h1 style="color: aliceblue;text-align: center">Colorful Shi yan Lou</h1><a href="#con" style="float: left;color: lightgray">Contact us</a></div>

這是頭塊的具體內容，設置了字體顏色對其方式，還加入了一個頁面間跳轉的鏈接，鏈接的另一半在后面的footer1中，點擊這里以后，頁面會跳轉到footer1。

paragraph：

<div id="paragraph"><br/><p><img src="profile.png"><br/><h1 style="color: aliceblue">we are engineers</h1><p style="color: aliceblue">we are young</p></p></div>

這個paragraph塊插入了一張圖，定義了字體顏色，而且在前面的總體聲明中可以看出，還設置了這個模塊的字體對齊方式及字體大小。

中間模塊：

<div id="leftside" align="center"><h1 style="color: lightslategray">Working</h1><img src="cabin.png" height="260" width="300"></div><div id="middle1" align="center"><h1 style="color: lightslategray">Eating</h1><img src="cake.png" height="260" width="300"></div><div id="middle2" align="center"><h1 style="color: lightslategray">Playing</h1><img src="game.png" height="260" width="300"></div><div id="rightside" align="center"><h1 style="color: lightslategray">Sleeping</h1><img src="circus.png" height="260" width="300"></div>

這四個塊就一起講了，這里要實現的就是在每個塊中插入圖片，在圖片上面有字體描述，由于定義的每個塊的寬度是大于圖片的大小，所以才能產生圖片與圖片之間白色邊框的效果，不然，會擠在一起。要想實現幾個塊水平并列的放置，還可以采用列表的形式。這里我們就只是簡單的通過定義大小來實現水平排列，這就是我們實現的效果

這些都是很簡單的實現方式，很容易理解，接下來我著重講講footer1塊（表單實現文本輸入和郵件發送）

2.4 添加表單實現文本輸入和郵件發送

以前我們講到過使用< a>標簽實現郵件發送，就是在標簽中加入mailto屬性，其實表單實現郵件發送也是很相似的在form標簽中action加入mailto。這里還有要注意的就是，表單輸入到類型以前講的很清楚，要是大家有疑惑可以回頭看看。下面時具體的代碼內容

<div id="footer1" ><br/><a name="con"><h1 style="color: lightslategray;">let's learn with us<br/>good good study, day day up</h1></a><div style="background-color: powderblue;width:450px;height: 400px;float: left"></div><div style="background-color: orange;width: 400px;height: 400px;float:left"><img src="user.png" style="text-align: center"><br /><br /><form action="MAILTO:support@shiyanlou.com" method="post" enctype="text/plain"><h3>Send emali to shiyanlou</h3>your name:<br/><input type="text" name="name" value="yourname" size="20"><br />your email:<br/><input type="text" name="mail" value="yourmailaddress" size="20"><br />what you wanna say:<br/><input type="text" name="comment" value="yourcomment" size="20"><br /><br /><input type="submit" value="send"><input type="reset" value="rewrite"></form></div></div>

在上面這個模塊中，首先開頭的就是鏈接的跳轉地址，觸發地是在header里面定義的。接下來我們為了使發送表單的塊居中，采用了最原始的方法，就是在前面加上一個與背景顏色一樣的空塊，使他們并列。再后面就是表單的應用，定義表單，并規定長度，實現文本和密碼的輸入。最后加上兩個按鈕，實現確認和重置。所有的寫法都很基礎，沒有涉及到更高深的東西。

這就是footer模塊的具體樣子?

?

轉載于:https://www.cnblogs.com/hackerbird/p/8783533.html

總結

以上是生活随笔為你收集整理的HTML加固5——汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。