【web开发网页制作】Html+Css网页制作关于我的家乡（6页面）【附源码下载】
创始人
2025-05-31 10:59:30
0次

【写在前面】之前学生时代自己也做了不少页面，现在毕业后也希望能慢慢的分享出来给大家，希望能给刚接触web开发的你带来一些启发。其实关于网页制作，没有大家想象中的那么难，接下来给大家详细介绍一下如何实现网页的制作，主要把思路整清楚了实现起来也很快。我们废话不多说直接整活。
涉及知识：HTML制作页面，CSS制作页面， ul li实现菜单跳转

注：博文片尾附完整源码分享包

目录

  • 1、实现效果
  • 2、实现过程
    • 前期准备
    • html制作页面
    • CSS样式设计：
  • 3、源码包分享
  • 4、彩蛋皇榜

1、实现效果

首页：
在这里插入图片描述
旅游：
在这里插入图片描述

美食：
在这里插入图片描述
历史：
在这里插入图片描述
风土人情：
在这里插入图片描述
留言：
在这里插入图片描述

2、实现过程

前期准备

有关图片和文字的网上搜集，整理好自己的架构。
首先实现过程我们主要从布局开始，html主要是搭建页面，css主要是设置样式，在页面上

html制作页面

我们主要从以下三个方面入手：
头部：logo和菜单的设计与实现
中间：banner和布局的实现，采用左右上下布局的方式
底部：声明设计，主要涉及文字和背景色的设计
其实关于我的家乡网页设计的话总体框架是不变的，主要是中间内容的设计是变化的。

CSS样式设计：

我们主要从以下几个方面来设计头部菜单的背景图，采用float：left布局的方式，菜单使用ul li的方式，使用A标签实现跳转。

3、源码包分享

百度云分享地址
链接：https://pan.baidu.com/s/1jAL2ItetNj4LdqkRhqXRYg
提取码：hdd6
123云盘分享地址
链接：https://www.123pan.com/s/ZxkUVv-0PJ4.html
提取码:hdd6

不想下载的有需要的可以留个邮箱哈！

4、彩蛋皇榜

倾心打造佳作，愿解君之惑，如若有幸，盼君上榜助阵，特此敬谢！
皇榜入口点击此处

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：酷开系统，带你玩转大屏时代

下一篇：2023年3月广州/东莞/惠州/深圳软考中/高级报名走起

相关内容

热门资讯

走进小城看消费丨江西资溪：低碳...   夏日时节下午4点，江西省抚州市资溪县大觉山景区漂流终点依然热闹。来自南昌的游客余鑫漂流结束后没有...
【中原晨会0625】市场分析专... 来源：市场资讯 （来源：中原证券研究所） 本期重点研报目录 【中原策略】市场分析：电子半导体领涨 ...
南向资金连买4日！低费率+可月... 6月25日早盘，港股红利资产震荡整理。截至11时14分，港股红利低波ETF招商(520550)下跌0...
618成交破百万！紫荆花用一套... 一年一度的618年中大促，是消费市场的晴雨表，也是品牌间最激烈的角力场。当各大品牌在直播间里铆足了劲...
原创 黄... 2026年6月25日的国际金价已经从前期的5500美元高点跌到4200美元下方，累计跌幅超过22%，...
英伟达CEO：Vera Rub... 截至9:38，中证半导体材料设备主题指数（931743）涨2.36%创新高；权重股中，中微公司涨3....
再被催债16亿！“钢铁大王”戴... 澎湃新闻记者 贺梨萍 因“铁本事件”入狱五年的戴国芳重返钢铁行业，但他并没有完成从阶下囚再到“钢铁大...
周三原油价格下跌 随着美国和伊朗在和平谈判中取得进展，越来越多的油轮公开穿越霍尔木兹海峡，原油在战时的价格上涨已经蒸发...
这种蛋白是大脑衰老的开关 这种蛋白是大脑衰老的开关 清晨，假设一位五十岁左右的王女士发现自己常常把手机放在熟悉的抽屉里又找不到...
信通院牵头算力Token出海生... 盘面上，截至11：04，中证科创创业50指数（931643）涨1.68%，创历史新高；权重股中，芯原...
海外 774 亿营收背后：日本... 文 | 游戏价值论 6月23日，彭博社报道了腾讯正在围绕出售多家日本游戏工作室少数股权开展谈判，包...
餐饮“抢人”大战：把店开到公交... 作者 |餐饮老板内参 内参君 医院、公交站、演唱会…餐饮品牌，正在无孔不入 在北京儿童医院，肯德基...
快讯 | 外资扫货！陈翊庭：港... 港交所行政总裁陈翊庭在接受《中国证券报》专访时指出，国际资本对中国资产的看法已彻底扭转，布局中国市场...
2777.77元！A股“股王”... 25日早盘，昨天创下历史新高的A股“股王”联讯仪器，今天上午继续走强，盘中股价再度刷新历史新高。 截...
原创 今... 欧洲自己的媒体直接下结论，欧盟衰退躲不掉，内部分裂拦不住，现在就连欧洲顶尖工业巨头，都偷偷在用中国的...
黄仁勋股东大会放言：本轮AI基... 在当地时间6月24日的英伟达（NVDA.O）2026年度股东大会上，股东批准了该公司全部10名董事会...
国际油价大跌 新华社消息， 纽约原油期货主力合约价格24日盘中跌破每桶70美元，为伊朗战事爆发以来首次。 市场分析...
马云带队插秧，什么信号？ 一场别开生面的“务农”，让外界看到了一个不一样的阿里巴巴。 近日，阿里巴巴合伙人、高德董事长刘振飞在...
全球最大产能，最高丰度达99.... 本文转自【科技日报】； 6月23日，高丰度硼-10同位素技术暨产业化成果发布会在山东省东营市举办，全...
黄金大跳水！金饰克价年内暴跌近... 25日，现货黄金盘中震荡，截至发稿，报3985.070美元/盎司，跌0.17%。 当地时间24日，...