您的位置：首页 > 运维架构 > 网站架构

设计一个简单的家乡网站

2017-04-30 00:19 218 查看

利用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/%E5%AE%B6%E4%B9%A1%E7%BD%91%E7%AB%99.zip

首页显示如图所示：

其它选一页如图：

家乡美景：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css 设计

相关文章推荐

新的分享

章节导航