HTML静态网页成品作业(HTML+CSS)—— 家乡成都介绍网页(4个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有4个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>成都</title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="mid"><div class="nav"><a href="index.html">网站首页</a><a href="lishi.html">成都历史</a><a href="jingdian.html">成都景点</a><a href="zaxianliuyan.html">在线留言</a></div><div class="banner"><img src="./images/banner.jpg" alt=""></div><div class="m"><div class="t">成都简介</div><div class="jianjie"><div class="jianjie_wenzi">成都市是中国首批国家历史文化名城之一,是古蜀文明的重要发源地,“天府之国”的中心,有着世界罕见的3000年城址不迁、2500年城名不改的历史特征。前316年,秦灭蜀,始设蜀郡并成都县。前311年,仿秦制重建城垣,为有文献记载的城市规划与建设之始,已有2300多年历史。汉因织锦业发达专设锦官管理,故有“锦官城”“锦城”之称,五代后蜀时遍种芙蓉,故别称“芙蓉城”“蓉城”。1921年,始设市政筹备处,1928年,正式设市。成都是重要的电子信息产业基地,成渝地区双城经济圈核心城市、区域经济中心、科技中心、世界文化名城和国际门户枢纽,西南地区的科技中心、商贸中心、金融中心和交通、通信枢纽,中国人民解放军西部战区机关驻地,是第31届世界大学生夏季运动会的举办地。20245月,入选承担数据标注基地建设任务城市名单。</div><div class="jianjie_pic"><img src="./images/jianjie.jpeg" alt=""></div></div><div class="t">成都特色美食</div><div class="meishi"><div class="meishi_1"><img src="./images/meishi_1.jpg" alt=""><div class="meishi_name">双流老妈兔头</div></div><div class="meishi_1"><img src="./images/meishi_2.png" alt=""><div class="meishi_name">夫妻肺片</div></div><div class="meishi_1"><img src="./images/meishi_3.jpeg" alt=""><div class="meishi_name">四川担担面</div></div><div class="meishi_1"><img src="./images/meishi_4.png" alt=""><div class="meishi_name">麻婆豆腐</div></div><div class="meishi_1"><img src="./images/meishi_5.jpeg" alt=""><div class="meishi_name">口水鸡</div></div><div class="meishi_1"><img src="./images/meishi_6.jpeg" alt=""><div class="meishi_name">冒菜</div></div></div></div><div class="footer">成都 版权所有</div></div>
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/29222.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言 | Leetcode C语言题解之第164题最大间距

题目&#xff1a; 题解&#xff1a; int maximumGap(int* nums, int numsSize) {if (numsSize < 2) {return 0;}int maxVal INT_MIN, minVal INT_MAX;for (int i 0; i < numsSize; i) {maxVal fmax(maxVal, nums[i]);minVal fmin(minVal, nums[i]);}int d fmax(1,…

计算机网络:3数据链路层

数据链路层 概述封装成帧和透明传输帧透明传输&#xff08;填充字节或比特&#xff09;差错检测奇偶校验循环冗余校验CRC Cyclic Redundancy Check 可靠传输停止-等待协议回退n帧协议&#xff08;滑动窗口协议&#xff09;选择重传协议 点对点协议PPP共享式以太网网络适配器&am…

React+TS前台项目实战(十一)-- 全局常用组件提示语可复制Link组件封装

文章目录 前言HighLightLink组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇讲的这个组件&#xff0c;是一个用于高亮显示文本并添加可选的跳转链接&#xff0c;提示文本&#xff0c;复制文本的 React 组件 HighLightLink组件 1. 功能分析 &#x…

【交易策略】#22-24 残差资金流强度因子

【交易策略】#22-24 残差资金流强度因子

路由控制和策略路由

文章目录 一、路由控制&#xff08;1&#xff09;、前言1.1.1-路由策略 &#xff08;2&#xff09;、正反掩码和通配符1.2.1-通配符 &#xff08;3&#xff09;、ACL1.3.1-ACL步长1.3.2-步长的作用1.3.3-TCP/UDP端口号 实验1:实验2: 二、前缀列表实验1:2.1.1-前缀列表的表达式2…

【图像分割】DSNet: A Novel Way to Use Atrous Convolutions in Semantic Segmentation

DSNet: A Novel Way to Use Atrous Convolutions in Semantic Segmentation 论文链接&#xff1a;http://arxiv.org/abs/2406.03702 代码链接&#xff1a;https://github.com/takaniwa/DSNet 一、摘要 重新审视了现代卷积神经网络&#xff08;CNNs&#xff09;中的atrous卷积…

找工作小项目:day16-重构核心库、使用智能指针(1)

day16-重构核心库、使用智能指针 今天是该项目开源在gthub的最后一天&#xff0c;我这里只是将我自己对于这个项目的理解进行总结&#xff0c;如有错误敬请包含指正&#xff0c;今天会整体理一遍代码&#xff0c;并使用智能指针管理整个项目。 1、common 头文件 定义宏用于…

/usr/bin/ld: 当搜索用于 /lib/i386-linux-gnu/libcuda.so 时跳过不兼容的 -lcuda

/usr/bin/ld: 当搜索用于 /lib/i386-linux-gnu/libcuda.so 时跳过不兼容的 -lcuda ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/023dbdeb215b4b4580f7f54706e32af9.pn当使用unsloth做微调时&#xff0c;发现找不到libcuda&#xff0c;很自然想到需要软链接到最新…

IDEA2023中使用run Dashboard面板?实现批量运行微服务

1、直接点击Add service--->Run Configuration Type---->Spring Boot 2、这样就出现了run Dashboard面板&#xff0c;可同时运行多个工程模块&#xff0c;shift选中所有启动类组命名&#xff08;Group Configurations&#xff09; 3、启动所有的项目

自行车在线租赁管理系统

摘 要 新时代是一个快速发展的时代&#xff0c;信息革命正在各个行业蔓延。互联网拉近了 人们的距离&#xff0c;物质生活水平的提高平静地改变了人类消费的观念。人们对自行车 租赁行业的要求越来越高&#xff0c;这对传统的自行车租赁行业来说既是挑战也是机遇。 有必要提高…

安卓多媒体(音频录播、传统摄制、增强摄制)

本章介绍App开发常用的一些多媒体处理技术&#xff0c;主要包括&#xff1a;如何录制和播放音频&#xff0c;如何使用传统相机拍照和录像&#xff0c;如何截取视频画面&#xff0c;如何使用增强相机拍照和录像。 音频录播 本节介绍Android对音频的录播操作&#xff0c;内容包…

【Linux】线程(二:线程控制)

本篇文章主要围绕线程控制来进行展开。 主题思路是以create与join两个接口展开。 目录 pthread_create 与 pthread_join:pthread_create:pthread_join: 代码&#xff1a;问题一&#xff1a;主线程与新线程谁先退出&#xff1f;问题二&#xff1a;哪个线程应该最后退出&#xf…

OpenCV读取和显示和保存图像

# 导入 OpenCV import cv2 as cv # 读取图像 image cv.imread(F:\\mytupian\\xihuduanqiao.jpg) # 创建窗口 #显示图像后&#xff0c;允许用户随意调整窗口大小 cv.namedWindow(image, cv.WINDOW_NORMAL) # 显示图像 cv.imshow(image, image)# 将图像保存到文件 success cv…

Centos部署openGauss6.0创新版本,丝滑的体验

作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复&#xff0c; 安装迁移&#xff0c;性能优化、故障…

同三维T80004EHL-W-4K30 4K HDMI编码器,支持WEBRTC协议

输入&#xff1a;1路HDMI1路3.5音频&#xff0c;1路HDMI环出1路3.5音频解嵌输出 4K30超高清,支持U盘/移动硬盘/TF卡录制&#xff0c;支持WEBRTC协议&#xff0c;超低延时&#xff0c;支持3个点外网访问 1个主流1个副流输出&#xff0c;可定制选配POE供电模块&#xff0c;WEBR…

理解CA-IS3050G高速CAN收发器的CANH和CANL的电压

CA-IS3050G高速CAN收发器符合ISO 11898-2物理层标准。 1、CANH和CANL的电压之和为5V&#xff0c;下图是CA-IS3050G的高速CAN收发器参数&#xff0c;分析如下&#xff1a; 1&#xff09;、总线输出显性电压 2.75V < VCANH <4.5V&#xff0c;负载为60Ω&#xff0c;CANH…

Proxy和definedProperty

1. Proxy 代理 定义: 用于定义基本操作的自定义行为 Proxy修改的是程序默认形为&#xff0c;就形同于在编程语言层面上做修改&#xff0c;属于元编程 元编程 是指某类计算机程序的编写&#xff0c;这类计算机程序编写或者操纵其它程序&#xff08;或者自身&#xff09;作为它…

leetcode 1355 活动参与者(postgresql)

需求 表: Friends ---------------------- | Column Name | Type | ---------------------- | id | int | | name | varchar | | activity | varchar | ---------------------- id 是朋友的 id 和该表的主键 name 是朋友的名字 activity 是朋友参加的活动的名字 表: Activit…

QT实现多摄像头监控

工具使用方法&#xff1a; 1、在add camera后面输入对应摄像头的IP后&#xff0c;点击add会自动布局显示。 2、在del camera后选择一个对应IP后&#xff0c;点击del会自动删除对应摄像头的显示&#xff0c;且整体布局会自动调整。 工具使用场景&#xff1a; 测试摄像头的好坏。…

探索CSS clip-path: polygon():塑造元素的无限可能

在CSS的世界里&#xff0c;clip-path 属性赋予了开发者前所未有的能力&#xff0c;让他们能够以非传统的方式裁剪页面元素&#xff0c;创造出独特的视觉效果。其中&#xff0c;polygon() 函数尤其强大&#xff0c;它允许你使用多边形来定义裁剪区域的形状&#xff0c;从而实现各…