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.想要获取本文源码,点击前往吧

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

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

相关文章

【InternLM 笔记】使用InternStudio 体验书生·浦语2-chat-1.8b随记

书生浦语2-chat-1.8b 介绍 书生浦语-1.8B (InternLM2-1.8B) 是第二代浦语模型系列的18亿参数版本。为了方便用户使用和研究&#xff0c;书生浦语-1.8B (InternLM2-1.8B) 共有三个版本的开源模型&#xff0c;他们分别是&#xff1a; InternLM2-1.8B: 具有高质量和高适应灵活性…

双指针算法(2)

611.有效三角形的个数 一、题目描述 OJ题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09; 二、思路讲解 首先我们能想到的一定是暴力枚举&#xff0c;它的时间复杂度是(O^3)。 我们可以固定一个最长边&#xff0c;然后在比这条边小的有序数组中找出一个二元组&…

八、西瓜书——特征选择与稀疏学习

1.子集搜索与评价 对于1个学习任务来说,给定属性集,其中有些属性可能很关键、很有用&#xff0c;另一些属性则可能没什么用&#xff0c;我们将属性称为“特征”(feature),对当前学习任务有用的属性称为“相关特征”(relevant feature)、没什么用的属性称为“无关特征”(irrelev…

Vue:双token无感刷新

文章目录 初次授权与发放Token&#xff1a;Access Token的作用&#xff1a;Refresh Token的作用&#xff1a;无感刷新&#xff1a;安全机制&#xff1a;后端创建nest项目AppController 添加login、refresh、getinfo接口创建user.dto.tsAppController添加模拟数据 前端Hbuilder创…

Pytest中实现自动生成测试用例脚本代码!

前言 在Python的测试框架中&#xff0c;我们通常会针对某个系统进行测试用例的维护&#xff0c;在对庞大系统进行用例维护时&#xff0c;往往会发现很多测试用例是差不多的&#xff0c;甚至大多数代码是一样的。 故为了提高我们测试用例维护的效率&#xff0c;在本文中&#…

Redis缓存知识总结

图解缓存 what&how problems&strategy 缓存更新 缓存穿透 缓存雪崩 缓存击穿 &#xff08;图源自黑马教育&#xff09;

3.5日常学习

matlab处理数据 自己写了关于detect_data的函数&#xff0c;让它帮我改了&#xff0c;哈哈哈 %改正前function data_chuli(path1,savepath)[num]xlsread(path1,1,B18:F23);a num;ba;cb(:);xlswrite(savepath,c) end%改正后function data_chuli(path1, savepath)num xlsread…

100 spring-security 中 /oauth/token 发送请求不携带参数 报错 “401 Unauthorized“

前言 最近存在这样的一个问题, 大致的复现方式是 访问 /oauth/token 接口, 然后不携带任何参数, 结果 服务器抛出了一个 "401 Unauthorized" 针对这个 401, 这里 梳理一下这个流程, 也会衍生出一些其他的问题 测试用例 客户端这边大致的情况是 构造参数, 然后发…

HashMap 源码解读

文章目录 一、什么是HashMap HashMap 是一种快速的查找并且插入、删除性能都良好的一种 K/V键值对的数据结构&#xff0c;key唯一&#xff0c;value允许重复它基于哈希表的 Map 接口实现&#xff0c;是常用的 Java 集合之一&#xff0c;是非线程安全的。 二、HashMap的数据结…

rtt的io设备框架面向对象学习-触摸设备

目录 1.触摸设备基类2.触摸设备基类的子类3.初始化/构造流程3.1设备驱动层3.2 设备驱动框架层3.3 io设备管理层 4.总结5.使用5.1实例 1.触摸设备基类 此层处于设备驱动框架层。此层的类是抽象类。 在/ components / drivers / include / drivers /touch.h定义了如下touch设备…

C语言----冒泡排序进阶

冒泡排序大家应该到写过吧。但大家可能知道到的冒泡排序有两种方法。而我呢&#xff0c;最近学习到了另外一种方法&#xff0c;现在知道三种方法了。所以想与大家分享一下。但是缺点是第三种是第二种的自实现版。第一种就是我们平常写的普通冒泡排序。第二种就是qsort。第三种就…

Matlab梁单元有限元编程 | 铁木辛柯梁 | 欧拉梁 | Matlab源码 | 理论文本

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现&#xff0c;并提供所有案例完整源码&#xff1b;2.单元…

如何恢复edge的自动翻译功能

介绍&#xff1a;对于英文不好的小伙伴&#xff0c;把英语翻译成中文是有帮助的&#xff0c;而edge可以直接对英文页面翻译这一功能更是受人喜爱&#xff0c;但是&#xff0c;最近发现这一项功能消失了。 原始界面&#xff1a; 下面展示如何恢复该功能。 1.打开edge&#xff…

day06-网路编程

#include <myhead.h>int do_add(sqlite3 *ppDb) {int numb;char name[20];int age;int salary;printf("请输入要插入的信息:");scanf("%d %s %d %d", &numb, name, &age, &salary);char sql[128] "";sprintf(sql, "INSE…

Flutter(四):SingleChildScrollView、GridView

SingleChildScrollView、GridView 遇到的问题 以下代码会报错: class GridViewPage extends StatefulWidget {const GridViewPage({super.key});overrideState<GridViewPage> createState() > _GridViewPage(); }class _GridViewPage extends State<GridViewPage&g…

vscode 通义灵码 插件自动写代码

安装插件 通义灵码安装教程-阿里云 点击立即安装 我是已经安装成功了&#xff0c;所以如下图&#xff0c;没安装的会显示安装&#xff0c;点击安装即可 安装成功之后 侧边栏会出现图标 登录 使用 在编辑框中输入 问题 &#xff0c;会自动生成代码和对应的说明

Cloud+Consul

Cloud整合Zookeeper代替Eureka-CSDN博客 Consul简介 Consul是一套开源的分布式服务发现和配置管理系统 What is Consul? | Consul | HashiCorp DeveloperConsul is a service networking solution that delivers service discovery, service mesh, and network security ca…

Redis中的RDB和AOF持久化机制(一)

Redis持久化 RDB快照(snapshot). 在默认情况下&#xff0c;Redis将内存数据库快照保存在名字为dump.rdb的二进制文件中.Redis可以进行设置,让它在"N秒内数据集至少有M个改动"这一条件被满足时&#xff0c;自动保存一次数据集。比如说&#xff0c;以下设置会让Redis…

机器视觉 /从bottle.hdev示例程序开启HalconHDevelop征程

文章目录 概述示例程序bottle.hdev源码Step 0: PreparationsStep 1: Segmentation - 读取并显示图片Step 1: Segmentation - 创建并设置OCR模型Step 1: Segmentation - 文本分割与识别计算结果显示内存释放 导出为C代码导出为C代码配置 VS Halcon 环境VS程序执行结果HTuple hv…

LeetCode刷题---填充每个节点的下一个右侧节点指针

官方题解:LeetCode官方题解 解题思想: 因为是一棵满二叉树&#xff0c;所以除了叶子节点外的其他节点都有两个子节点。 可以根据每一层来依次遍历 从根节点开始&#xff0c;根节点的左子节点的next节点就指向根节点的右子节点 因为根节点的next节点为NULL&#xff0c;开始从根…