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

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

文章目录

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


一、作品介绍

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

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="w">
	<div class="top">南宁</div>
	<div class="nav">
		<a href="index.html">南宁首页</a>
		<a href="./jingdian.html">著名景点</a>
	</div>
	<div class="main">
		<div class="main_tit">南宁简介</div>
		<div class="main_desc">
			南宁市,简称“邕”,古称邕州,别称绿城。广西壮族自治区辖地级市、首府、Ⅰ型大城市、二线城市 、北部湾经济区、珠江—西江经济带和北部湾城市群核心城市、中国—东盟博览会永久举办地、“一带一路”经济带有机衔接的重要门户城市、西部陆海新通道陆港型国家物流枢纽、南部战区陆军机关驻地。截至2022年,全市下辖7个区、4个县、代管1个县级市,总面积2.21万平方千米。 2022年末,南宁市常住人口889.17万人。
		</div>
		<div class="main_img">
			<img src="./images/main1.jpeg" alt="">
		</div>
		<div class="main_desc">
			南宁市位于广西中部偏南,面向东南亚,背靠大西南,东邻粤港澳,南临北部湾,处于“一带一路”的重要节点,是华南经济圈、西南经济圈、中国—东盟经济圈的交汇点。具有近海、近边,沿江、沿线“两近两沿”的特点,距中越边境约200公里,是距离东盟国家最近的省会城市。平陆运河建成后,南宁港产城海融合发展的区位优势更加凸显。 南宁素有“中国绿城”“天下民歌眷恋的地方”等美誉,先后荣获联合国人居奖和全国文明城市、国家生态园林城市、国家卫生城市、国家森林城市、中国优秀旅游城市等称号。
		</div>
		<div class="main_desc">
			南宁市积极发展向海经济,推动跨境产业融合发展,立足区位交通优势向枢纽经济转型,服务构建中国—东盟命运共同体。 围绕中国(广西)自由贸易试验区南宁片区产业发展规划,培育发展现代金融、先进制造、数字经济、智慧物流和文体医疗等五大重点产业集群,建设产业发展新高地。
		</div>
		<div class="main_img">
			<img src="./images/main2.jpeg" alt="">
		</div>
	</div>
	
	<div class="footer">
		南宁&nbsp;&nbsp;©&nbsp;&nbsp;版权所有
	</div>

五、源码获取

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

实战 | YOLOv10 自定义数据集训练实现车牌检测 (数据集+训练+预测 保姆级教程)

导读 本文主要介绍如何使用YOLOv10在自定义数据集训练实现车牌检测 (数据集训练预测 保姆级教程)。 YOLOv10简介 YOLOv10是清华大学研究人员在Ultralytics Python包的基础上&#xff0c;引入了一种新的实时目标检测方法&#xff0c;解决了YOLO以前版本在后处理和模型架构方面…

大模型时代的具身智能系列专题(十一)

UMass Amherst 淦创团队 淦创是马萨诸塞大学阿默斯特分校的一名教员&#xff0c;也是麻省理工学院- ibm沃森人工智能实验室的研究经理。在麻省理工学院博士后期间&#xff0c;和Antonio Torralba教授、Daniela Rus教授和Josh Tenenbaum教授一起工作。在此之前&#xff0c;在清…

【面试官】知道synchronized锁升级吗

一座绵延在水上的美术馆——白鹭湾巧克力美术馆。它漂浮于绿水之上&#xff0c;宛如一条丝带轻盈地伸向远方 文章目录 可重入锁synchronized实现原理 synchronized缺点保存线程状态锁升级锁升级优缺点 1. 可重入锁 面试官&#xff1a;知道可重入锁有哪些吗? 可重入意味着获取…

解决Mac无法上网/网络异常的方法,重置网络

解放方法 1、前往文件夹&#xff1a;/Library/Preferences/SystemConfiguration 2 、在弹窗中输入上边的地址 3 、把文件夹中除了下图未选中的文件全部删掉&#xff0c;删除时需要输入密码 4 、重启mac 电脑就搞定了。

免费数据库同步软件

在信息化日益发展的今天&#xff0c;数据同步成为了企业和个人用户不可或缺的一部分。数据库同步软件作为数据同步的重要工具&#xff0c;能够帮助我们实现不同数据库系统之间的数据复制和同步&#xff0c;确保数据的一致性和完整性。本文将介绍几款免费数据库同步软件&#xf…

SpringBoot+Vue教师工作量管理系统(前后端分离)

技术栈 JavaSpringBootMavenMySQLMyBatisVueShiroElement-UI 角色对应功能 教师管理员 功能截图

iBeacon赋能AR导航:室内定位技术的原理与优势

室内定位导航对于大型商场、机场、医院等复杂室内环境至关重要&#xff0c;它帮助人们快速找到目的地&#xff0c;提高空间利用率。AR技术通过将虚拟信息叠加在现实世界&#xff0c;提供直观导航指引&#xff0c;正在成为室内导航的新趋势&#xff0c;增强用户互动体验&#xf…

一文读懂 Compose 支持 Accessibility 无障碍的原理

前言 众所周知&#xff0c;Compose 作为一种 UI 工具包&#xff0c;向开发者提供了实现 UI 的基本功能。但其实它还默默提供了很多其他能力&#xff0c;其中之一便是今天需要讨论的&#xff1a;Android 特色的 Accessibility 功能。 采用 Compose 搭建的界面&#xff0c;完美…

将二叉排序树转换成双向链表--c++【做题记录】

【问题描述】 编写程序在不增加结点的情况下&#xff0c;将二叉排序树转换成有序双向链表&#xff08;如下图&#xff09;。 链表创建结束后&#xff0c;按照从前往后的顺序输出链表中结点的内容。 【输入输出】 【输入形式】 第一行输入数字n&#xff0c;第二行输入n个整数…

车载诊断架构 - 引导诊断

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

八爪鱼现金流-018,持续打磨

八爪鱼,被动收入,财务自由,现金流,现金流游戏,各银行利率,money,资产负债表,财务自由,资产管理,个人理财,管理个人资产,理财,打造被动收入,躺着赚钱,让钱为我打工

Cell-在十字花科植物中年生和多次开花多年生开花行为的互相转化-文献精读21

Reciprocal conversion between annual and polycarpic perennial flowering behavior in the Brassicaceae 在十字花科植物中年生和多次开花多年生开花行为的互相转化 亮点 喜马拉雅须弥芥 和 内华达糖芥 是两个多年生植物模型 MADS-box 基因的剂量效应决定了一年生、二年生…

使用OpenCV dnn c++加载YOLOv8生成的onnx文件进行实例分割

在网上下载了60多幅包含西瓜和冬瓜的图像组成melon数据集&#xff0c;使用 EISeg 工具进行标注&#xff0c;然后使用 eiseg2yolov8 脚本将.json文件转换成YOLOv8支持的.txt文件&#xff0c;并自动生成YOLOv8支持的目录结构&#xff0c;包括melon.yaml文件&#xff0c;其内容如下…

【Python教程】1-注释、变量、标识符与基本操作

在整理自己的笔记的时候发现了当年学习python时候整理的笔记&#xff0c;稍微整理一下&#xff0c;分享出来&#xff0c;方便记录和查看吧。个人觉得如果想简单了解一名语言或者技术&#xff0c;最简单的方式就是通过菜鸟教程去学习一下。今后会从python开始重新更新&#xff0…

人工智能--教育领域的运用

文章目录 &#x1f40b;引言 &#x1f40b;个性化学习 &#x1f988;体现&#xff1a; &#x1f988;技术解析&#xff1a; &#x1f40b;智能辅导与虚拟助手 &#x1f988;体现&#xff1a; &#x1f988;技术解析&#xff1a; &#x1f40b;自动评分与评估 &#x1f…

AI大模型在广告领域的应用

深度对谈&#xff1a;广告创意领域中AIGC的应用_生成式 AI_Tina_InfoQ精选文章

【python】OpenCV GUI——Mouse(14.1)

参考学习来自 文章目录 背景知识cv2.setMouseCallback 介绍小试牛刀 背景知识 GUI&#xff08;Graphical User Interface&#xff0c;图形用户界面&#xff09; 是一种允许用户通过图形元素&#xff08;如窗口、图标、菜单和按钮&#xff09;与电子设备进行交互的界面。与传统…

【Mtk Camera开发学习】06 MTK 和 Qcom 平台支持通过 Camera 标准API 打开 USBCamera

本专栏内容针对 “知识星球”成员免费&#xff0c;欢迎关注公众号&#xff1a;小驰行动派&#xff0c;加入知识星球。 #MTK Camera开发学习系列 #小驰私房菜 Google 官方介绍文档&#xff1a; https://source.android.google.cn/docs/core/camera/external-usb-cameras?hlzh-…

【React】classnames 优化类名控制

1. 介绍 classnames是一个简单的JS库&#xff0c;可以非常方便的通过条件动态的控制class类名的显示 ClassNames是一个用于有条件处理classname字符串连接的库 简单来说就是动态地去操作类名&#xff0c;把符合条件的类名粘在一起 现在的问题&#xff1a;字符串的拼接方式不…

VMware导入小白分享的MacOS版本之后,无法开机的解决方案

前言 这段时间陆续有小伙伴找到小白&#xff0c;说&#xff1a;导入小白分享的MacOS版本之后&#xff0c;出现无法开机的问题。 遇到这个问题&#xff0c;并不是说明分享版本有问题&#xff0c;因为大部分小伙伴导入之后都没有出现类似的问题&#xff0c;都是导入之后开机&…