设计一个简单的家乡网站

最新推荐文章于 2024-03-18 15:15:56 发布
最新推荐文章于 2024-03-18 15:15:56 发布
阅读量5.2w 收藏 325
点赞数 55
分类专栏： 前端 文章标签： html css 设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boke14122621/article/details/70991695
版权

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

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

幸福诗歌
关注
  • 55
    点赞
  • 踩
  • 325
    收藏
    觉得还不错? 一键收藏
  • 32
    评论
专栏目录
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现面.md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
HTML5期末大作业：我的家乡网站设计——我的家乡-杭州(7页) HTML+CSS+JavaScript 大学生家乡网页作品 老家网页设计作业模板 学生网页制作源代码下载
11-25 6731
HTML5期末大作业：我的家乡网站设计——我的家乡-杭州(7页) HTML+CSS+JavaScript 大学生家乡网页作品 老家网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网
web期末作业网页设计html——我的家乡（网页源码）
最新发布
网页设计与制作
03-18 678
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
html实现我的故乡，城市介绍网站(附源码)
xcLeigh
11-25 5364
html实现我的故乡，城市介绍网站(附源码)，html实现我的故乡介绍网站，最美故乡，最美城市，登录、注册、故乡的风景、故乡的人文等相关界面，可以改成自己的故乡替换对应的图片和文字，这篇示例以北京为代表，通过景点，美食，旅游等方面介绍，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
dreamweaver网页大作业 我的家乡——南京玄武湖旅游攻略(4页) 学生网页设计作业源码
QQ_____365392777的博客
08-10 2405
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
纯css+html 简单的 我的家乡——荆门网站前端设计
qq_54044331的博客
06-29 494
【代码】纯css+html 简单的 我的家乡——荆门网站前端设计。
HTML5期末大作业：我的家乡网站设计4
coding加油站
06-30 7150
HTML期末作业，我的家乡 HTML5作业
HTML5期末大作业：我的家乡网站设计——我的家乡
coding加油站
12-13 3万+
以“我的家乡”为主题的前端网页设计，有轮播图 纯css，仅供交流，可以联系获取代码 部分代码： <div id="top"> <img src="../image/chizhouLogo.png" class="img1"> <div id="top-right"> <input type="text" name="search" placeholder="请输入关键..
关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现
qq_365392777
10-04 2万+
????文章目录​​二、????网站介绍​​​​三、????网站效果​​​​▶️1.视频演示​​​​???? 2.图片演示​​​​四、???? 网站代码​​​​????HTML结构代码​​​​????CSS样式代码​​​​五、????更多源码​​二、????网站介绍????网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。????网站程序方面：计划采...
关于我的家乡网页设计主题题材——梧州14页HTML+CSS网页
STU网页设计
12-29 1222
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
家乡介绍静态网站源代码.rar
03-19
本人独立制作的一个介绍家乡的静态网站，为web课程的期末作品，运用了HTML5，CSS，JavaScript，jQuery，Bootstrap。
个人网页介绍家乡纯html
10-26
设计工具用Dreamweaver8.0、Flash8.0、Photoshop CS 网站基本栏目（至少就包含以下5个栏目） 1）个人网站首页（） 2）自我介绍 注：运用表格布局 3）我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注：综合运用框架、DIV+CSS布局 4）我的相册 快乐的童年、校园生活 等 5）雁过留声(表单) 用表单制作一个留言表的框架
网页设计制作作业-我的家乡
01-22
主题：我的家乡 刘亚群@德州学院 本作品欢迎在保留此说明的前提下分发和修改 在线预览此作品：http://my.micsite.net/Memory/dzu/netcenter/20121215/index.html 作者网站：http://www.micsite.net/ 作者博客：...
学生家乡网页设计作品静态HTML网页模板源码 广西旅游景点网页设计 大学生家乡主题网站制作 简单家乡介绍网页设计成品
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码 学生个人html静态网页制作成品代码
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
苏州园林景区网页设计 学生家乡网页设计作品静态HTML网页模板源码 DW大学生家乡主题网站制作 简单家乡介绍网页设计成品
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
Html表单和表格例子
幸福诗歌的博客
04-28 1万+
Html表格和表单制作： 1.关于表格： 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。 跨行：colspan 跨列：rowspan 2.关于表单： 输入 多数情况下被用到的表单标签是输入标签（input）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下： 文本域（Text Fields） 当用户要
请设计一个简单的赏析古诗网页代码
05-29
好的，以下是一个简单的赏析古诗的网页代码，您可以根据需要自行进行修改和完善。 HTML代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>古诗赏析</title> </head> <body> <h1>古诗赏析</h1> <form> <label for="poem">请选择一首古诗：</label> <select name="poem" id="poem"> <option value="1">静夜思</option> <option value="2">登鹳雀楼</option> <option value="3">春晓</option> </select> <button type="submit">查看赏析</button> </form> <div id="analysis"></div> </body> </html> ``` CSS代码： ``` body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; } h1 { text-align: center; margin-top: 50px; } form { width: 50%; margin: 50px auto; text-align: center; } label { display: block; margin-bottom: 10px; } select { font-size: 16px; padding: 5px; border-radius: 5px; } button { font-size: 16px; padding: 5px 10px; border-radius: 5px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; } #analysis { width: 50%; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; text-align: center; } ``` JavaScript代码： ``` const analysis = { 1: '床前明月光，疑是地上霜。举头望明月，低头思故乡。', 2: '白日依山尽，黄河入海流。欲窮千里目，更上一層樓。', 3: '春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。' } const form = document.querySelector('form'); const analysisDiv = document.querySelector('#analysis'); form.addEventListener('submit', event => { event.preventDefault(); const poemSelect = document.querySelector('#poem'); const poemValue = poemSelect.value; const poemText = poemSelect.options[poemSelect.selectedIndex].text; const poemAnalysis = analysis[poemValue]; analysisDiv.innerHTML = `<h2>${poemText}</h2><p>${poemAnalysis}</p>`; }); ``` 这段代码中，我们使用了HTML、CSS和JavaScript来实现一个简单的赏析古诗的网页。其中，HTML部分包括一个标题、一个表单和一个用于显示赏析的div；CSS部分主要用于样式的设置；JavaScript部分则负责表单的处理和赏析的显示。代码中使用了一个JavaScript对象来存储古诗和它们的赏析，当用户选择一首古诗并提交表单后，JavaScript会根据用户的选择在对象中查找对应的赏析，并将其显示在网页上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 32
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值