当前位置: 首页 > news >正文

HTML静态网页成品作业(HTML+CSS)——新年春节介绍网页设计制作(3个页面)

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

文章目录

  • 一、作品介绍
  • 二、作品演示
    • 1、首页
    • 2、子页1
    • 3、子页2
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
    • CSS部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有3个页面
💙想要获取本文源码,点击前往吧

二、作品演示

1、首页

在这里插入图片描述

2、子页1

在这里插入图片描述

3、子页2

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<div class="header"><div class="logo"><img src="./images/logo.png"></div></div><ul class="nav"><li class="active"><a href="">首页</a></li><li><a href="xisu.html">传统习俗</a></li><li><a href="wenjuan.html">在线问卷</a></li></ul><div class="main_img"><img src="./images/main.png"></div>

CSS部分代码

* {padding: 0;margin: 0;
}ul {list-style: none;
}
body {background: #900;
}
.main {width: 1180px;margin: 0 auto;background: #fff;
}.header {text-align: center;
}
.logo {width: 100%;text-align: center;
}
.nav {display: flex;align-items: center;background: #f00;
}
.nav li {width: 33.33%;text-align: center;
}
.nav a {color: #fff;display: inline-block;height: 48px;line-height: 48px;text-decoration: none;width: 100%;font-weight: bold;
}.main_img  {width: 100%;
}
.main_img img {width: 100%;vertical-align: top;
}

五、源码获取

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

相关文章:

HTML静态网页成品作业(HTML+CSS)——新年春节介绍网页设计制作(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示1、首页2、子页13、子页2 三、代码目录四、网站代码HTML部分代码CSS部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0…...

vue实现base64格式转换为图片

找了很多&#xff0c;但是都不太好用&#xff0c;打算自己总结一个保姆级教学&#xff0c;无需动脑&#xff0c;电脑有电就能实现 在HTML部分&#xff0c;我们需要一个标签来放置图片 <template><div><img :src"imageSrc" alt"未获取到图片&qu…...

【杂言】迟到的 2024 展望

研一下开学已有半月&#xff0c;本来想在家写的新年展望拖到了现在。翻看 2021 年的展望&#xff0c;我发现 flag 基本达成了&#xff08;除了 12 点睡觉&#xff09;&#xff0c;所以给新的一年立下大方向也是很有必要的。也许等到 60 岁我再回看&#xff0c;也是一件趣事吧。…...

结构体(C语言进阶)(一)

目录 前言 1、结构体声明 1.1 结构体基本概念 1.2 结构体声明 1.3 特殊的结构体声明 1.3.1 匿名结构体声明 1.4 结构体自引用 1.5 结构体变量的定义和初始化 1.6 结构体内存对齐 1.7 修改默认对齐数 1.8 结构体传参 总结 前言 C语言除了有其内置类型&#xff0c;还有…...

【react】对React Router的理解?常用的Router 组件有哪些

1 react-router 是什么 react-router等前端路由的原理大致相同&#xff0c;可以实现无刷新的条件下切换显示不同的页面 路由的本质就是页面的URL发生改变时&#xff0c;页面的显示结果可以根据URL的变化而变化&#xff0c;但是页面不会刷新 因此&#xff0c;可以通过前端路由可…...

生成式 AI

生成式 AI 进入应用爆发期&#xff0c;将极大地推动数字化内容生产与创造。 摘要 生成式 AI &#xff08; Generative AI 或 AIGC &#xff09; 是利用现有文本、音频文件或图像创建 新内容的技术。过去一年&#xff0c;其技术上的 进展主要来自于三大领域&#xff1a;…...

云计算 3月6号 (crontab-计划任务 日志轮转 免密登录)

一、计划任务 计划任务概念解析 在Linux操作系统中&#xff0c;除了用户即时执行的命令操作以外&#xff0c;还可以配置在指定的时间、指定的日期执行预先计划好的系统管理任务&#xff08;如定期备份、定期采集监测数据&#xff09;。RHEL6系统中默认已安装了at、crontab软件…...

Windows Shell命令详解:入门指南

Windows操作系统的Shell命令是执行各种任务和管理系统的关键工具。本文将深入探讨Windows Shell命令的基础知识&#xff0c;介绍常用的命令以及它们的功能和用法&#xff0c;并探讨一些高级技巧&#xff0c;帮助用户更好地利用Shell命令提高工作效率。 1. 什么是Windows Shell命…...

MogDB/openGauss关于PL/SQL匿名块调用测试

MogDB/openGauss 关于 PL/SQL 匿名块调用测试 一、原理介绍 PL/SQL(Procedure Language/Structure Query Language)是标准 SQL 语言添加了过程化功能的一门程序设计语言。 单一的 SQL 语句只能进行数据操作&#xff0c;没有流程控制&#xff0c;无法开发复杂的应用。PL/SQL …...

STP---生成树协议

STP的作用 a)Stp通过阻塞端口来消除环路&#xff0c;并能够实现链路备份目的 b)消除了广播风暴 c)物理链路冗余&#xff0c;网络变成了层次化结构的网络 STP操作 选举一个根桥每个非根交换机选举一个根端口每个网段选举一个指定端口阻塞非根&#xff0c;非指定端口 STP--生成树…...

算法D38| 动态规划1 | 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

理论基础 无论大家之前对动态规划学到什么程度&#xff0c;一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目&#xff0c;看我讲的理论基础&#xff0c;会有感觉 是不是简单题想复杂了&#xff1f; 其实并没有&#xff0c;我讲的理论基础内容&#xff0c;在动…...

Vue教学13:组件的生命周期:掌握组件的每一个关键时刻

大家好&#xff0c;欢迎回到我们的Vue教学系列博客&#xff01;在前十二篇博客中&#xff0c;我们学习了Vue.js的基础知识、安装Node.js与npm、使用Vue Devtools进行调试、Vue实例与生命周期钩子、数据绑定&#xff08;单向与双向&#xff09;、计算属性与侦听器、条件渲染和列…...

mitmproxy代理

文章目录 mitmproxy1. 网络代理2. 安装3. Https请求3.1 启动mitmproxy3.2 获取证书3.3 配置代理3.4 运行测试 4. 请求4.1 读取请求4.2 修改请求4.3 拦截请求 5. 响应5.1 读取响应5.2 修改响应 6. 案例&#xff1a;共享账号6.1 登录bilibili获取cookies6.2 在代理请求中设置cook…...

【GPU驱动开发】- mesa编译与链接过程详细分析

前言 不必害怕未知&#xff0c;无需恐惧犯错&#xff0c;做一个Creator&#xff01; 一、总体框架图 暂时无法在飞书文档外展示此内容 二、Mesa API 处理 OpenGL 函数调用 Mesa API 负责实现 OpenGL 和其他图形 API 的函数接口。Mesa API 表是一个重要的数据结构&#xf…...

如何恢复已删除的华为手机图片?5 种方式分享

不幸的现实是&#xff0c;华为的珍贵时刻有时会因为意外删除、软件故障或其他不可预见的情况而在眨眼之间消失。在这种情况下&#xff0c;寻求恢复已删除的图片成为个人迫切关心的问题。 本文旨在为用户提供如何从华为恢复已删除图片的实用解决方案。我们将探索五种可行的方法…...

通过 python 和 wget 批量下载文件(在Linux/Ubuntu/Debian中测试)

首先创建一个文本文件d.txt, 一行一个链接。 你可以使用简单的 Python 脚本逐行读取文件 (d.txt) 中的链接&#xff0c;并使用 wget 下载文件&#xff1a; import subprocess# File containing download links (replace with your file path) file_path d.txt# Function to …...

个人博客系列-后端项目-RBAC角色管理(6)

设计用户表 ## 用户表 class User(models.Model):username models.CharField(max_length255, uniqueTrue, verbose_name"手机号")password models.CharField(max_length255, uniqueFalse, verbose_name"密码")is_vip models.BooleanField(defaultFalse…...

机器学习-启航

文章目录 原理分析机器学习的两种典型任务机器学习分类总结数据机器学习分类解读简单复杂 原理分析 马克思主义哲学-规律篇 规律客观存在&#xff0c;万事万物皆有规律。 机器学习则是多维角度拆解分析复杂事实数据&#xff0c;发现复杂事实背后的规律&#xff0c;然后将规律用…...

驱动调试第014期-变频调速的原理及相关计算公式应用

一、引言 变频调速是一种通过改变电源频率来实现电动机调速的技术。它具有高效、精确、可靠等优点&#xff0c;广泛应用于工业、商业和家用领域。本文将介绍变频调速的基本原理、优点以及应用领域&#xff0c;并通过详细的公式计算过程和图片说明来帮助读者更好地理解。 二、变…...

JavaWeb环境配置 IDE2022版

一、新建一个javaweb文件 文件名可以自己随意改 二、给建立的项目添加框架支持 勾选Web Application,点击确定 建立成功界面&#xff0c;会生成一个新的web文件夹 三、配置tomcat 1、两种打开配置文件方式&#xff1a; 第一种 第二种 2、打开后&#xff0c;点击号&#xf…...

开发小记-开发中的小随笔

1. josn字符串转换 JSON.stringify(data) 直接这样转&#xff0c;会是一整行的字符串。 JSON.stringify(data, null, 2); 这样转就会转成格式化的换行的标准json字符串&#xff0c;方便展示diff 2. 毫秒时间戳转换 需要将字符串‘2025-04-01’转换为整型时间戳&#xff0c;…...

NGSIM数据集:如何成为自动驾驶算法开发的‘黄金标准’测试集?

NGSIM数据集&#xff1a;自动驾驶算法开发的黄金标准与实战指南 在自动驾驶技术快速迭代的今天&#xff0c;算法验证的可靠性直接决定了系统落地的安全性。而NGSIM数据集凭借其0.1秒级高精度采样和真实人类驾驶行为记录&#xff0c;已成为行业公认的算法测试基准。不同于合成数…...

32位寄存器全解析:逆向分析与系统底层开发的基石

1. 从零开始&#xff1a;为什么32位寄存器是逆向分析的基石如果你刚开始接触逆向工程或者系统底层开发&#xff0c;面对一堆以E开头的寄存器缩写&#xff0c;是不是感觉有点头大&#xff1f;EAX、EBP、ESP……这些看起来神秘的代号&#xff0c;其实是理解程序如何“思考”和“行…...

【人工智能】某公司AI落地实践总结

某公司AI落地实践总结 一、AI落地的整体路径框架 某公司的AI落地遵循"认知 → 工具使用 → 流程自动化 → 高阶能力构建 → 场景化落地 → 持续迭代 → 激励驱动"的闭环路径,具体分为四个阶段: 初阶入门(认知筑基):AI基础概念与常用工具,零基础扫盲,掌握提示…...

保姆级教程:用Mermaid手绘CPU流水线时空图,理解数据冒险与阻塞

可视化解析CPU流水线&#xff1a;用代码绘制时空图理解数据冒险 在计算机体系结构的学习中&#xff0c;CPU流水线技术是提升处理器性能的核心机制之一。但对于初学者而言&#xff0c;理解流水线中的数据冒险&#xff08;Data Hazard&#xff09;及其导致的阻塞现象往往充满挑战…...

手把手教你改造10块钱的USBASP烧录器,让它兼容Arduino IDE和AVRDUDESS

10元USBASP烧录器改造实战&#xff1a;解锁Arduino与AVRDUDESS全兼容方案 从闲置到全能&#xff1a;低成本硬件改造的价值探索 在电子制作和嵌入式开发领域&#xff0c;专业烧录工具往往价格不菲。但你可能不知道&#xff0c;手头那台吃灰的"智峰"版USBASP烧录器&…...

Perplexity远程岗申请失败率高达73%?揭秘HR系统自动过滤的4个隐形关键词及规避话术库

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Perplexity招聘信息搜索 Perplexity AI 作为一家快速发展的生成式人工智能公司&#xff0c;其招聘动态常通过官方渠道及技术社区实时更新。掌握高效、精准的招聘信息检索方法&#xff0c;是开发者与研究人员了…...

如何快速掌握大众点评爬虫:解决动态字体加密的终极实战指南

如何快速掌握大众点评爬虫&#xff1a;解决动态字体加密的终极实战指南 【免费下载链接】dianping_spider 大众点评爬虫&#xff08;全站可爬&#xff0c;解决动态字体加密&#xff0c;非OCR&#xff09;。持续更新 项目地址: https://gitcode.com/gh_mirrors/di/dianping_sp…...

告别ICMP被墙!用TCP Traceroute精准探测服务器网络路径(附Win/Mac/Linux三平台保姆级教程)

告别传统路径探测&#xff1a;TCP Traceroute的跨平台实战指南 当服务器访问异常时&#xff0c;传统ICMP traceroute往往在第一个防火墙处就戛然而止。想象一下&#xff0c;你正面临生产环境突发性网络延迟&#xff0c;而常规工具返回的只有一串令人沮丧的"***"——此…...

RPG Maker Decrypter:如何5步解密RPG Maker加密资源并生成可编辑项目

RPG Maker Decrypter&#xff1a;如何5步解密RPG Maker加密资源并生成可编辑项目 【免费下载链接】RPGMakerDecrypter Tool for decrypting and extracting RPG Maker XP, VX and VX Ace encrypted archives and MV and MZ encrypted files. 项目地址: https://gitcode.com/g…...