設計一個簡單的家鄉網站
阿新 • • 發佈:2019-02-10
利用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>
是不是很粗糙呢,這是一年前剛接觸前端的作品,哈哈,請大家多多指教,繼續學習!!