生活随笔
收集整理的這篇文章主要介紹了
设计一个简单的家乡网站
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
利用HTML和CSS 即可完成簡單設計
整體思路：利用網頁內鏈接跳轉到不同頁面，index.html是主頁面，分有幾個小部分的頁面，可以根據設計者需要安排不同主題的內容，然后實現跳轉即可。整體代碼用到的都是比較常用的標簽例如列表、塊、段落、鏈接等。
index.html 代碼：
<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
//樣式用外部鏈接，這樣顯示和樣式分離比較美觀，不過可以根據設計者需要<title>家鄉名字</title>
<link href="../css/shouye.css" rel="stylesheet" type="text/css"/></head><body>
<div id="box" class="w1200"><div id="top" class="w1200"> <h1></h1></div><div id="daohang" class="w1200"> <ul><li><a href="index.html">首頁</a></li><li><a href="lishi.html">..</a></li><li><a href="techan.html">..</a></li><li><a href="meijing.html">..</a></li><li><a href="wenhua.html">..</a></li><li><a href="mingren.html">..</a></li></ul></div><div id="main"><!-- InstanceBeginEditable name="maintext" --><div id="zuo" class="w900"><div id="zuoshang"><h2>。。簡介</h2><hr /><img src="../images/1.jpg" width="257" height="189" class="tu"/><p>家鄉簡介內容</p></div><div id="zuoxia"><div id="zuoxiazuo"><h2>人口數據</h2><hr /><img src="../images/2.jpg" width="277" height="220" class="tu"/><p>人口數據關于人口的描述....</p></div><div id="zuoxiayou"><h2>語言構成</h2><hr /><img src="../images/3.jpg" width="250" height="220" class="tu"/><p>語言構成關于語言的簡單描述....</p></div></div></div><div id="you" class="w400"><h3>經濟概況</h3><p> 概況
概況內容......</p></div><div id="banquan"><a href="http://......./">家鄉相關網站網鏈接</a> </div>
</div>
</body>
</html>
其他幾個html文件可以根據想要放置的內容進行布局上的修整，放上自己想要放的多媒體素材即可。此處就不一一列舉了。具體樣子已經上傳至倉庫文件夾中：https://github.com/xingyushu/lvxingyu.github.io/blob/master/家鄉網站.zip
首頁顯示如圖所示：
其它選一頁如圖：
家鄉美景：
是不是很粗糙呢，這是一年前剛接觸前端的作品，哈哈，請大家多多指教，繼續學習！！
總結
以上是生活随笔為你收集整理的设计一个简单的家乡网站的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
