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

news2024/11/25 11:02:29

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

文章目录

  • 一、作品介绍
  • 二、作品演示
    • 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.coloradmin.cn/o/1494406.html

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

相关文章

Android开发经典实战,Android面试题目

关于Android的近况 大家都知道&#xff0c;今年移动开发不那么火热了&#xff0c;完全没有了前两年Android开发那种火热的势头&#xff0c;如此同时&#xff0c;AI热火朝天&#xff0c;很多言论都说Android不行了。其实不光是Android&#xff0c;iOS也有类似的言论。 那么到底…

人工智能如何重新定义数据迁移:利用人工智能趋势实现工作空间的平稳过渡

【由于上篇文章中IAB关于数据迁移并没有讨论人工智能技术如何整整推动和影响未来的数据迁移工作&#xff0c;因此特整理了两篇前沿文章&#xff0c;供大家参考 - - 对第六篇关于数据迁移的一个补充&#xff08;1&#xff09;​​​​​​​】 拥抱变化&#xff1a;数据迁移的发…

案例介绍:信息抽取技术在汽车销售与分销策略中的应用与实践

一、引言 在当今竞争激烈的汽车制造业中&#xff0c;成功的销售策略、市场营销和分销网络的构建是确保品牌立足市场的关键。作为一名经验丰富的项目经理&#xff0c;我曾领导一个专注于汽车销售和分销的项目&#xff0c;该项目深入挖掘市场数据&#xff0c;运用先进的信息抽取…

C++学习第七天(string类)

1、学习string的原因&#xff1f; C语言中的字符串 C语言中&#xff0c;字符串是以‘\0’结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c;但是这些库函数与字符串是分离开的&#xff0c;而且底层空间需要用户自己管…

决策树实验分析(分类和回归任务,剪枝,数据对决策树影响)

目录 1. 前言 2. 实验分析 2.1 导入包 2.2 决策树模型构建及树模型的可视化展示 2.3 概率估计 2.4 绘制决策边界 2.5 决策树的正则化&#xff08;剪枝&#xff09; 2.6 对数据敏感 2.7 回归任务 2.8 对比树的深度对结果的影响 2.9 剪枝 1. 前言 本文主要分析了决策树的分类和回…

XSS漏洞--概念、类型、实战--分析与详解[结合靶场pikachu]

目录 一、XSS概念简述 1、XSS简介&#xff1a; 2、XSS基本原理&#xff1a; 3、XSS攻击流程&#xff1a; 4、XSS漏洞危害&#xff1a; 二、XSS类型&#xff1a; 1、反射型XSS&#xff1a; 2、存储型XSS&#xff1a; 3、DOM型XSS&#xff1a; 三、靶场漏洞复现(pikach…

C++(13)——string类

string类的由来 C语言中&#xff0c;字符串是以 \0‘ 结尾的一些字符的集合&#xff0c;为例操作方便&#xff0c;C标准库中提供了一些str 系列的库函数&#xff0c;但是这些库函数与字符串是分开的&#xff0c;不太符合OOP&#xff08;封装、继承和多态&#xff09;的思想&am…

云原生基础知识:容器技术的历史

容器化的定义&#xff1a; 容器化是一种轻量级的虚拟化技术&#xff0c;将应用程序及其所有依赖项&#xff08;包括运行时、系统工具、系统库等&#xff09;打包到一个称为容器的单独单元中。容器提供了一种隔离的执行环境&#xff0c;使得应用程序可以在不同的环境中运行&…

splay学习笔记重制版

以前写的学习笔记&#xff1a;传送门 但是之前写的比较杂乱&#xff0c;这里重制一下 问题背景 假设我们要维护一个数据结构&#xff0c;支持插入、删除、查询某个值的排名&#xff0c;查询第 k k k大的值等操作。 最直接的想法是用二叉搜索树&#xff0c;也就是左子树权值&l…

Java | 在消息对话框中显示文本

首先需要导入JOptionPane类&#xff0c;JOptionPane类属于Swing组件中的一种&#xff0c;其导入方式如下&#xff1a; import javax.swing.JOptionPane;可以使用JOptionPane的showMessageDialog方法显示消息文本。 参数格式&#xff1a; JOptionPane.showMessageDialog(paren…

jdk安装,配置path系统变量

直接点击安装 不要包含空格&#xff0c;中文字符 3.找到刚刚的路径&#xff0c;看一下&#xff0c;有东西就说明安装对了 配置path winr输入sysdm.cpl点击确定 全部依次点击 确定 即可。 验证jdk是否安装成功 看java、javac是否可用看java、javac版本号是否无问题 win…

解密程序员的“藏宝图”:我的祖传代码大公开

程序员是如何看待“祖传代码”的&#xff1f; 大家好&#xff0c;我是小明&#xff0c;一位充满好奇心和分享热情的程序员。今天&#xff0c;我要为大家揭开我心中的“藏宝图”——那些我认为值得传世的祖传代码。让我们一同踏上这场奇妙的代码冒险之旅吧&#xff01; 宝物一…

【广度优先搜索】【堆】【C++算法】407. 接雨水 II

作者推荐 【二分查找】【C算法】378. 有序矩阵中第 K 小的元素 本文涉及知识点 广度优先搜索 堆 LeetCoce407. 接雨水 II 给你一个 m x n 的矩阵&#xff0c;其中的值均为非负整数&#xff0c;代表二维高度图每个单元的高度&#xff0c;请计算图中形状最多能接多少体积的雨…

kerberos学习系列一:原理

1、简介 Kerberos 一词来源于古希腊神话中的 Cerberus —— 守护地狱之门的三头犬。 Kerberos 是一种基于加密 Ticket 的身份认证协议。Kerberos 主要由三个部分组成&#xff1a;Key Distribution Center (即KDC)、Client 和 Service。 优势&#xff1a; 密码无需进行网络传…

Tkinter实现聊天气泡对话框

功能展示&#xff1a; 运行环境&#xff1a; Python: 3.10.4 64-bit 操作系统&#xff1a;win10 64-bit 源码文件列表&#xff1a; 部分代码说明&#xff1a; 调用该接口将消息显示在聊天框中。role参数控制消息显示的位置&#xff1a;0位于对话框左边&#xff0c;1位于右边…

批次大小对ES写入性能影响初探

问题背景 ES使用bulk写入时每批次的大小对性能有什么影响&#xff1f;设置每批次多大为好&#xff1f; 一般来说&#xff0c;在Elasticsearch中&#xff0c;使用bulk API进行批量写入时&#xff0c;每批次的大小对性能有着显著的影响。具体来说&#xff0c;当批量请求的大小增…

LLM(十一)| Claude 3:Anthropic发布最新超越GPT-4大模型

2024年3月4日&#xff0c;Anthropic发布最新多模态大模型&#xff1a;Claude 3系列&#xff0c;共有Haiku、Sonnet和Opus三个版本。 Opus在研究生水平专家推理、基础数学、本科水平专家知识、代码等10个维度&#xff0c;超过OpenAI的GPT-4。 Haiku模型更注重效率&#xff0c;能…

Figma 最新版下载:无需激活码,轻松安装!

从事设计工作&#xff0c;怎么能没有设计工具呢&#xff1f;我相信许多设计师也必须使用Figma这样的软件&#xff0c;真的可以让我们的设计工作更有效率&#xff0c;但我相信你也发现Figma属于外国软件&#xff0c;自然语言也是英语&#xff0c;直到现在没有中文版本&#xff0…

论文解读:Hints for Thin Deep Nets

这篇论文是在Hinton的那篇开山之作《Distilling the Knowledge in a Neural Network》为背景提出来的&#xff0c;主要思想是使用一个宽而浅的教师模型来训练一个窄而深的学生模型。之前的知识蒸馏方法主要是训练教师网络到更浅更宽的网络&#xff0c;没有充分利用深度。而该文…

IntelliJ IDEA 下载安装及配置使用教程

一、IDEA下载 1、打开游览器输入IntelliJ IDEA – the Leading Java and Kotlin IDE (jetbrains.com) 2、点击Download&#xff0c;进入IDEA下载界面 3、 有两个版本&#xff0c;一个是Ultimate 版本为旗舰版&#xff0c;需要付费&#xff0c;包括完整的功能&#xff0c;下载后…