總體設(shè)計

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

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

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

2.2 總體框架及布局

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

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

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

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

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

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

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

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

<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 具體模塊實現(xiàn)

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

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>

這是頭塊的具體內(nèi)容，設(shè)置了字體顏色對其方式，還加入了一個頁面間跳轉(zhuǎn)的鏈接，鏈接的另一半在后面的footer1中，點擊這里以后，頁面會跳轉(zhuǎn)到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塊插入了一張圖，定義了字體顏色，而且在前面的總體聲明中可以看出，還設(shè)置了這個模塊的字體對齊方式及字體大小。

中間模塊：

<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>

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

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

2.4 添加表單實現(xiàn)文本輸入和郵件發(fā)送

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

<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>

在上面這個模塊中，首先開頭的就是鏈接的跳轉(zhuǎn)地址，觸發(fā)地是在header里面定義的。接下來我們?yōu)榱耸拱l(fā)送表單的塊居中，采用了最原始的方法，就是在前面加上一個與背景顏色一樣的空塊，使他們并列。再后面就是表單的應(yīng)用，定義表單，并規(guī)定長度，實現(xiàn)文本和密碼的輸入。最后加上兩個按鈕，實現(xiàn)確認(rèn)和重置。所有的寫法都很基礎(chǔ)，沒有涉及到更高深的東西。

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/hackerbird/p/8783533.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。