首页 » 技术分享 » 设计一个简单的家乡网站

设计一个简单的家乡网站

　
评论关闭　1,076次浏览

利用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
首页显示如图所示：
这里写图片描述
其它选一页如图：
家乡美景：
这里写图片描述

是不是很粗糙呢，这是一年前刚接触前端的作品，哈哈，请大家多多指教，继续学习！！

转载自原文链接, 如需删除请联系管理员。

原文链接：设计一个简单的家乡网站，转载请注明来源！

赞 0