HTML靜態網頁成品作業(HTML+CSS)——家鄉沅陵介紹網頁(1個頁面)

🎉不定期分享源碼,關注不丟失哦

文章目錄

  • 一、作品介紹
  • 二、作品演示
  • 三、代碼目錄
  • 四、網站代碼
    • HTML部分代碼
  • 五、源碼獲取


一、作品介紹

🏷?本套采用HTML+CSS,未使用Javacsript代碼,共有1個頁面

二、作品演示

在這里插入圖片描述

三、代碼目錄

在這里插入圖片描述

四、網站代碼

HTML部分代碼

<div class="header"><img src="./images/logo.png" alt=""></div><div class="nav"><ul><li><a href="#main">沅陵首頁</a></li><li><a href="#weizhi">沅陵地理</a></li><li><a href="#meishi">沅陵美食</a></li><li><a href="#meijing">沅陵美景</a></li></ul></div><div class="banner"><img src="./images/banner.jpg" alt=""></div><div class="content"><div id="weizhi" class="weizhi"><div class="tit"><div class="tit_text">沅陵地理</div><div class="tit_line"></div></div><div class="weizhi_content"><div class="weizhi_text"><p>沅(yuán)陵縣,隸屬于湖南省懷化市。地處湖南省西北部,懷化市北端,沅水中游,處武陵山南麓與雪峰山東北尾端交匯處。東與桃源、安化相連,南與溆浦、辰溪接壤,西與瀘溪、古丈、永順毗鄰,北與張家界市永定區交界。介于東經110°0531″—111°0627″,北緯28°0448″—29°0226″之間,總面積5852平方千米。</p><p>沅陵以始置故城北枕沅水,南傍高大土阜,古稱高大土阜為陵而得名。隨同縣名始于漢初。因史上歷為辰州府治地,所以又稱辰州。境內有國保單位唐代龍興講寺、省保單位黔中郡遺址等歷史文化遺存百余處,館藏國家一級文物41件,“辰州儺戲”、“沅陵傳統龍舟”被列入國家非物質文化遺產名錄。</p></div><img src="./images/weizhi.jpg" alt=""></div></div><div id="meishi" class="meishi"><div class="tit"><div class="tit_text">沅陵美食</div><div class="tit_line"></div></div><div class="meishi_content"><div class="meishi1"><img src="./images/meishi1.jpg" alt=""><div>沅陵豬腳粉</div></div><div class="meishi1"><img src="./images/meishi2.jpg" alt=""><div>沅陵曬蘭</div></div><div class="meishi1"><img src="./images/meishi3.jpg" alt=""><div>沅陵臘肉</div></div><div class="meishi1"><img src="./images/meishi4.jpg" alt=""><div>沅陵樅菌</div></div></div></div>

五、源碼獲取

🥇 ~ 關注我,點贊博文~ 每天帶你漲知識!
🎁1.看到這里了就[點贊+好評+收藏]三連 支持下吧,你的「點贊,好評,收藏」是我創作的動力。
💙2.想要獲取本文源碼,點擊前往吧

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/17575.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/17575.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/17575.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

條款9:利用destructors避免泄露資源

對指針說拜拜。承認吧&#xff0c;你從未真正喜歡過它&#xff0c;對不&#xff1f; 好&#xff0c;你不需要對所有指針說拜拜&#xff0c;但是你真的得對那些用來操控局部性資源(local resources&#xff09;的指針說莎唷娜拉了。 舉個例子&#xff0c;你正在為“小動物收養…

Flutter 中的 CircularProgressIndicator 小部件:全面指南

Flutter 中的 CircularProgressIndicator 小部件&#xff1a;全面指南 在 Flutter 應用開發中&#xff0c;加載指示器是提供用戶反饋的重要組成部分&#xff0c;特別是在需要等待數據加載的場景中。CircularProgressIndicator 是 Flutter 提供的一個表現圓形加載動畫的小部件。…

Python進階:探索Python標準庫和第三方庫

在前兩篇文章中,我們介紹了Python的基本語法和面向對象編程。在這篇文章中,我們將深入探索Python的標準庫以及一些常用的第三方庫。Python的強大之處不僅在于其簡潔的語法,還在于豐富的庫生態系統。通過使用這些庫,你可以更高效地完成各種任務,從文件操作到數據分析、網絡…

godot4.2 + GDextension c++在 vs code 中斷點調試配置

游戲開發中如果做不到自己編寫的代碼做斷點調試&#xff0c;無不是瞎子摸象&#xff0c;特別是C這么底層的語言。這2天開始在VS studio中折騰&#xff0c;一直折騰不出結果&#xff0c;幾次想要放棄GODOT。最終今天在VS code中搞定了這斷點調試C代碼。 在上一篇文章我已經做好了…

React hooks - useContext

useContext 用法使用以非侵入的方式使用 Context使用 useContext 重構 useReducer 案例 用法 實現多層組件的數據傳遞 在全局創建 Context 對象在父組件中使用 Context.Provider 提供數據在子組件中使用 useContext 使用數據 import React, { useContext } from react // 全局…

全網爆火Remini 粘土濾鏡風格,我用ComfyUI一鍵生成了(保姆級教程)!

一、火爆全網的Remini&#xff01; Remini真的火爆了&#xff01;最近大家的朋友應該都被粘土濾鏡刷屏了。 小紅書上粘土濾鏡、粘土特效的帖子動不動就是幾百萬瀏覽量&#xff0c;幾千贊。 在有些電商平臺上還有人接單&#xff0c;幫忙定制remini粘土風格的照片&#xff01; …

解釋瀏覽器緩存和本地存儲的區別,以及如何實現事件的防抖和節流

1:瀏覽器緩存和本地存儲的區別: 瀏覽器緩存:瀏覽器緩存是一種臨時性的數據存儲,用于提高網頁加載速度。緩存的數據存儲在內存或磁盤中,當用戶再次訪問相同的資源時,瀏覽器會優先從緩存中讀取數據,而不是從服務器重新請求。緩存的數據可以在瀏覽器關閉后自動清除,或者根據 HTT…

vue+three.js實現3d系統的搭建

1.首先node.js是12.22版本的&#xff0c;安裝three.js可以參考這篇文章 直接用Threejs入門-安裝教程_安裝three.js-CSDN博客 直接在終端安裝three.js即可 npm install --save three 在相同目錄下安裝vite構建工具 npm install --save-dev vite 在項目里面看package.json中…

神秘顧客調查:第三方渠道監測如何操作?

第三方渠道監測是指通過專業的第三方機構或服務商&#xff0c;對企業的銷售渠道進行系統化的監督和評估。這種監測幫助企業了解各渠道的表現&#xff0c;確保合規性&#xff0c;提升市場競爭力。深圳神秘顧客市場調查限公司&#xff08;SMS&#xff09;總結了第三方渠道監測的操…

【安裝筆記-20240528-Linux-在 Vultr 云服務器上安裝 OpenWRT】

安裝筆記-系列文章目錄 安裝筆記-20240528-Linux-在 Vultr 云服務器上安裝測試 OpenWRT 文章目錄 安裝筆記-系列文章目錄安裝筆記-20240528-Linux-在 Vultr 云服務器上安裝測試 OpenWRT 前言一、軟件介紹名稱&#xff1a;OpenWRT主頁官方介紹 二、安裝步驟測試版本&#xff1a…

多function-calling 調用

多function-calling 調用 接上一篇function-calling調用&#xff0c;本篇實現了一個多function-calling的調用。OpenAI會根據function的描述自己來判斷應該調用哪個function。最終調用function的動作是由我們來決定的&#xff0c;當然你也可以不調對應的函數。 兩個函數分別是…

案例研究|MeterSphere助力萬物云構建高效自動化測試平臺

萬物云空間科技服務股份有限公司&#xff08;以下簡稱為“萬物云”&#xff09;&#xff0c;前身為萬科物業發展股份有限公司&#xff0c;是國內領先的物管龍頭上市公司。作為一家科技引領的全域空間服務商&#xff0c;萬物云致力于打造產業級共享服務平臺&#xff0c;基于空間…

1. lambda初體驗

首先聲明一個函數式接口&#xff0c;就只接口內只有一個抽象方法 //函數式接口 public interface Factory {Object getObject();}接口實現類 public class SubClass implements Factory {Overridepublic Object getObject() {return new User();}}User類 public class User …

酒店提前線上訂房小程序源碼系統 PHP+MySQL組合開發 源碼開源可二開 帶完整的安裝代碼包以及搭建教程

系統概述 隨著移動互聯網的普及&#xff0c;越來越多的人習慣通過手機進行酒店預訂。傳統的線下訂房方式逐漸無法滿足用戶的需求&#xff0c;酒店提前線上訂房小程序的出現成為必然趨勢。該源碼系統的開發旨在為酒店提供一個便捷、高效的線上訂房平臺&#xff0c;提升用戶體驗…

基于微信小程序+ JAVA后端實現的【醫院掛號預約系統】 設計與實現 (內附設計LW + PPT+ 源碼+ 演示視頻 下載)

項目名稱 項目名稱&#xff1a; 《基于微信小程序的醫院掛號預約系統設計與實現》 項目技術棧 該項目采用了以下核心技術棧&#xff1a; 后端框架/庫&#xff1a; Java, SSM框架數據庫&#xff1a; MySQL前端技術&#xff1a; 微信小程序, uni-app 項目展示 全文概括 本…

設置單群聊消息擴展

根據消息 ID &#xff0c;對單聊會話或群聊會話中已經發送的消息設置擴展信息。每次最多可以設置 100 個擴展屬性信息&#xff0c;最多可設置 300 個。 通過 Server API 操作消息擴展&#xff0c;默認不會向操作者的客戶端同步&#xff0c;會導致擴展信息不一致。如有需要&…

MySQL觸發器實戰:自動執行的秘密

歡迎來到我的博客&#xff0c;代碼的世界里&#xff0c;每一行都是一個故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交給時間 &#x1f3e0; &#xff1a;小破站 MySQL觸發器實戰&#xff1a;自動執行的秘密 前言觸發器的定義和作用觸發器的定義和作用觸發器的…

大模型領域新聞跟蹤

楊值麟 月之暗面楊植麟&#xff1a;大模型開發是“承包森林”月之暗面集結最強創投&#xff0c;“清華師姐”是最強“助攻”月之暗面楊植麟&#xff1a;互聯網研發是“種樹”&#xff0c;大模型研發是“承包森林”月之暗面楊植麟復盤大模型創業這一年&#xff1a;向延綿而未知…

搜維爾科技:穿上Xsens Link動作捕捉套裝,進行精準的運動捕捉

穿上Xsens Link動作捕捉套裝&#xff0c;進行精準的運動捕捉 搜維爾科技&#xff1a;穿上Xsens Link動作捕捉套裝&#xff0c;進行精準的運動捕捉

vue 筆記01

目錄 01 vuejs中屬性的基本使用 02 v-show指令的使用 03 v-if 指令的使用 04 v-for指令的使用 05 v-model 指令 06 template模板標簽 07 v-on事件的綁定指令 08 事件中的event對象 01 vuejs中屬性的基本使用 {{ }} 叫做mustache模板語法 雙花括號 小胡子語法 雙花括號…