HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)

news2024/9/22 15:42:09

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<div class="header">
			
			<div class="logo">
				<img src="./images/logo.png" alt="">
			</div>
			<div class="nav">
				<a href="#">首页</a>
				<a href="#">自行车简介</a>
				<a href="#">自行车分类</a>
			</div>
		</div>

		<div class="banner">
			<img src="./images/banner.jpg">
		</div>

CSS部分代码

@font-face {
  font-family: 'SourceHanSerif';
  src: url('../font/SourceHanSerif_Regular.woff2');

}
* {
	margin: 0;
	padding: 0;
}

body {
	background: rgb(87, 206, 255);
}

.wrapper {
	width: 980px;
	margin: 0 auto;
	background: #fff;
}

.header {
	width: 100%;
	padding: 5px 0;
	text-align: center;
}
.logo {
	width: 225px;
	display: inline-block;
	float: left;
}

.nav {
	float: right;
	margin-top: 28px;
	padding-right: 40px;
}
.nav a {
	margin-left: 60px;
	text-decoration: none;
	color: #333;
	font-size: 18px;
	font-weight: bold;
}

.banner {
	width: 100%;
}

.banner img {
	width: 100%;
}

五、源码获取

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

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

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

相关文章

在业务增长、风险管理和网络安全之间取得平衡

疫情过后&#xff0c;商业环境和文化发生了重大变化&#xff0c;值得我们仔细考虑。我们都变得更加依赖技术&#xff0c;我们的工作方法也发生了变化&#xff0c;网络风险变得更加突出和持久。 监管领域变得更加积极和严格&#xff0c;特别是在安全和数据隐私问题方面。人工智…

OpenCV图像滤波(18)空间梯度计算函数spatialGradient()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算图像在x和y两个方向上的一阶导数&#xff0c;使用Sobel算子。 等价于调用&#xff1a; Sobel( src, dx, CV_16SC1, 1, 0, 3 ); Sobel( src,…

AI赋能软件测试:从自动化到智能化,让测试工作事半功倍

引言 在当今这个日新月异的数字时代&#xff0c;人工智能&#xff08;AI&#xff09;正以不可阻挡之势渗透并重塑着各行各业&#xff0c;其中&#xff0c;软件开发与测试领域更是迎来了前所未有的变革。随着软件系统的复杂性日益增加&#xff0c;用户对软件质量、性能及安全性的…

全息光存储技术能否取代硬盘?

随着云计算的迅猛发展及其支持的应用程序的日益丰富&#xff0c;现有数据存储技术面临着前所未有的挑战。目前&#xff0c;云存储主要依赖于固态硬盘&#xff08;SSD&#xff09;和硬盘驱动器&#xff08;HDD&#xff09;。其中&#xff0c;HDD因其成本低廉&#xff0c;在大容量…

LVGL系列2--linux + lvglv8 + vscode 移植

LVGL系列 一、LVGL移植 LVGL系列1–AT32移植LVGL_V8具体步骤 LVGL系列2–linux lvglv8 vscode 移植 二、输入设备 LVGL系列3–纯物理(外部)按键&#xff0c;数字键盘控制控件 文章目录 LVGL系列一、LVGL移植二、输入设备 一、新建文件夹并克隆源码官方仓库 7.11.0官方仓库…

BL196MQTT远程IO模块助力智能楼宇自动化升级

在智能楼宇自动化领域&#xff0c;每一个细节的优化都能带来整体效率与舒适度的显著提升。钡铼技术的BL196MQTT远程IO模块&#xff0c;以其卓越的灵活性和强大的性能&#xff0c;正在成为这一领域中推动楼宇自动化升级的关键力量。 钡铼技术IOy系列&#xff1a;创新与灵活性的…

R语言统计分析——OLS回归2

参考资料&#xff1a;R语言实战【第2版】 1、简单线性回归 本例使用R语言中基础安装中的数据集women&#xff0c;来通过身高预测体重&#xff0c;获得一个等式帮助我们分辨出那些过重或过轻的个体。 # 拟合数据 fit<-lm(weight~height,datawomen) # 查看数据拟合结果 summ…

HTTPS通讯全过程

HTTPS通讯全过程 不得不说&#xff0c;https比http通讯更加复杂惹。在第一次接触https代码的时候&#xff0c;不知道为什么要用用证书&#xff0c;公钥是什么&#xff1f;私钥是什么&#xff1f;他们作用是什么&#xff1f;非对称加密和对称加密是啥&#xff1f;天&#xff0c;…

Redis 单线程为何还能处理速度那么快?

Redis 单线程为何还能处理速度那么快&#xff1f; &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; Redis&#xff0c;作为一款单进程单线程的内存型数据库&#xff0c;其卓越的处理速度令人印象深刻。那么&#xff0c;它是如何实现这一点的呢…

用Python实现9大回归算法详解——05. 梯度提升回归(Gradient Boosting Regression)

1. 梯度提升回归的基本概念 1.1 什么是梯度提升&#xff1f; 梯度提升是一种集成学习方法&#xff0c;通过组合多个弱学习器来构建一个强大的预测模型。在梯度提升框架中&#xff0c;每个弱学习器都试图修正前一个模型的错误。与简单的加法模型不同&#xff0c;梯度提升通过逐…

基于YOLOv8的缺陷检测任务模型训练

文章目录 一、引言二、环境说明三、缺陷检测任务模型训练详解3.1 PCB数据集3.1.1 数据集简介3.1.2 数据集下载3.1.3 构建yolo格式的数据集 3.2 基于ultralytics训练YOLOv83.2.1 安装依赖包3.2.2 ultralytics的训练规范说明3.2.3 创建训练配置文件3.2.4 下载预训练模型3.2.5 训练…

Android逆向题解攻防世界-easy-apk

Jeb反编译apk 题目比较简单&#xff0c;就是一个改了码表的base64编码。 protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);this.setContentView(0x7F04001B); // layout:activity_main((Button)this.findViewById(0x7F0B0076)).set…

在已经装过Tomcat机子运行war包

1 检查防火墙&#xff0c;验证是否装有jdk,是否配置有JAVA_HOME: ls /usr/apache-tomcat-9.0.52/webapps/ROOT rm -rf /usr/apache-tomcat-9.0.52/webapps/ROOT* ls /usr/apache-tomcat-9.0.52/webapps/ROOT cd /usr/apache-tomcat-9.0.52/webapps/ROOT ls 把war包拉到ROOT…

Python | Leetcode Python题解之第342题整数拆分

题目&#xff1a; 题解&#xff1a; class Solution:def integerBreak(self, n: int) -> int:if n < 3:return n - 1quotient, remainder n // 3, n % 3if remainder 0:return 3 ** quotientelif remainder 1:return 3 ** (quotient - 1) * 4else:return 3 ** quotie…

革新测试管理:集远程、协同、自动化于一身的统一测试管理平台

一、研发背景 当下汽车电子测试领域随着不断发展&#xff0c;自动化、智能化的软硬件一体测试解决方案已经成为趋势。能够整合各种测试资源、自动化测试流程&#xff0c;并提供数据分析和可视化报告&#xff0c;从而提高测试效率、降低成本&#xff0c;并确保汽车电子系统的可…

金价多次尝试刷新最高纪录,美国零售销售数据是绊马索

金价一直在试探新高&#xff0c;该纪录为每盎司2,485美元。而且&#xff0c;强劲的美国零售销售报告正在阻止金价的上涨。 由于强大的阻力&#xff0c;金价无法继续上涨。一周的净空头头寸大增。 发布了强于预期的美国零售销售报告后&#xff0c;金价承受了压力。期望的50个基…

springboot schedule配置多任务并行,任务本身串行

场景&#xff1a; 每日凌晨要执行两个定时任务&#xff0c;分别属于两个业务。有一个业务的定时任务执行时间较长&#xff0c;该任务没执行完之前不能重复执行&#xff08;事务&#xff09;。即业务与业务之间并行&#xff0c;任务本身串行。 技术栈&#xff1a; 采用spring…

机器学习 第11章-特征选择与稀疏学习

机器学习 第11章-特征选择与稀疏学习 11.1 子集搜索与评价 我们将属性称为“特征”(feature)&#xff0c;对当前学习任务有用的属性称为“相关特征”(relevant feature)、没什么用的属性称为“无关特征”(irrelevant feature)。从给定的特征集合中选择出相关特征子集的过程&a…

STL—list—模拟实现【迭代器的实现(重要)】【基本接口的实现】

STL—list—模拟实现 1.list源代码 要想模拟实现list&#xff0c;还是要看一下STL库中的源代码。 _list_node里面装着指向上一个节点的指针prev&#xff0c;和指向下一个节点的指针next&#xff0c;还有数据data 并且它给的是void*&#xff0c;导致后面进行节点指针的返回时…

【大模型部署及其应用 】使用 Llama 3 开源和 Elastic 构建 RAG

使用 Llama 3 开源和 Elastic 构建 RAG 本博客将介绍使用两种方法实现 RAG。 Elastic、Llamaindex、Llama 3(8B)版本使用 Ollama 在本地运行。 Elastic、Langchain、ELSER v2、Llama 3(8B)版本使用 Ollama 在本地运行。 笔记本可从此GitHub位置获取。 在开始之前,让我…