当前位置: 首页 > 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…...

Agisoft Metashape相机标定实战:从原理到精准操作

1. 相机标定为什么重要&#xff1f;从拍照误差说起 每次用手机拍文档时&#xff0c;边缘文字总会出现弯曲变形&#xff1b;航拍测绘时&#xff0c;明明飞行路线笔直&#xff0c;生成的模型却出现波浪形扭曲——这些问题的根源往往在于镜头畸变。就像近视眼看到的世界会有变形&a…...

AI人脸生成新范式:IP-Adapter-FaceID PlusV2双重嵌入技术解析

AI人脸生成新范式&#xff1a;IP-Adapter-FaceID PlusV2双重嵌入技术解析 【免费下载链接】IP-Adapter-FaceID 项目地址: https://ai.gitcode.com/hf_mirrors/h94/IP-Adapter-FaceID 在AI人脸生成领域&#xff0c;如何在保持身份一致性的同时实现风格的灵活控制&#x…...

AI人脸隐私卫士企业应用:内部会议纪要人脸自动打码方案

AI人脸隐私卫士企业应用&#xff1a;内部会议纪要人脸自动打码方案 1. 企业会议场景的隐私保护挑战 在现代企业运营中&#xff0c;内部会议纪要的数字化管理已成为常态。然而&#xff0c;当这些包含参会人员影像的资料需要共享或存档时&#xff0c;如何平衡信息传递与隐私保护…...

从‘知识冲突’到‘对齐’:图解ProGrad如何让CLIP微调既专又通

ProGrad&#xff1a;用向量几何重新思考多模态模型的微调艺术 想象一下&#xff0c;你正在训练一位精通多国语言的老教授学习一门新方言。如果完全放任他自由发挥&#xff0c;可能会丢失原有的语言体系&#xff1b;如果限制太多&#xff0c;又无法适应新语境。这正是CLIP等预训…...

AI 培训报名:主流机构专业度对比分析

引言 随着人工智能技术的快速发展&#xff0c;AI 培训市场也日益火爆。无论是企业还是个人&#xff0c;都希望通过专业的培训来提升对 AI 技术的应用能力。然而&#xff0c;当前 AI 培训市场鱼龙混杂&#xff0c;机构众多&#xff0c;质量参差不齐。企业和个人在选择 AI 培训机…...

别再死记硬背命令了!用eNSP模拟器搞懂三层交换的‘一次路由,多次交换’

从数据包视角拆解三层交换&#xff1a;用eNSP透视"一次路由多次交换"的本质 很多网络工程师能熟练配置三层交换&#xff0c;却说不清为什么第一个包慢、后续包快。这种现象背后&#xff0c;是硬件转发表&#xff08;FIB&#xff09;和邻接关系表的协同工作机制在发挥…...

AIGlasses_for_navigation网络通信基础:TCP/IP协议栈与实时数据传输优化

AIGlasses_for_navigation网络通信基础&#xff1a;TCP/IP协议栈与实时数据传输优化 最近和几个做智能眼镜导航项目的朋友聊天&#xff0c;他们都在为一个问题头疼&#xff1a;眼镜端看到的导航画面&#xff0c;有时候会卡顿一下&#xff0c;或者指令响应慢半拍。这听起来是小…...

CAPL实战指南:如何构建并发送带计数器的自定义周期报文

1. 为什么需要带计数器的周期报文 在汽车电子测试中&#xff0c;模拟ECU通信是最基础也最频繁的需求之一。想象一下&#xff0c;你正在测试一个车载娱乐系统&#xff0c;需要验证它能否正确处理来自其他ECU的周期性状态更新。这时候&#xff0c;如果只是发送固定内容的报文&…...

实战指南:如何用PyMC实现贝叶斯分位数回归解决业务预测难题

实战指南&#xff1a;如何用PyMC实现贝叶斯分位数回归解决业务预测难题 【免费下载链接】pymc Python 中的贝叶斯建模和概率编程。 项目地址: https://gitcode.com/GitHub_Trending/py/pymc 你是否曾面临这样的困境&#xff1a;使用传统线性回归预测客户流失率&#xff…...

Qwen3-VL-8B场景应用:电商商品图自动描述生成,节省运营时间

Qwen3-VL-8B场景应用&#xff1a;电商商品图自动描述生成&#xff0c;节省运营时间 1. 电商运营的痛点与解决方案 在电商行业&#xff0c;商品详情页的描述文案直接影响转化率。传统模式下&#xff0c;运营人员需要手动为每张商品图撰写描述&#xff0c;这个过程耗时耗力且难…...