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

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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、看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙3、源码获取公众号,点点下方公众号进行获取吧! 网页搜索编号:E0030
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于Transformer的路径规划 - 第五篇 GPT生成策略_解码方法优化

上一篇&#xff1a;基于Transformer的路径规划 - 第四篇 GPT模型优化 在上一篇中&#xff0c;我尝试优化GPT路径生成模型&#xff0c;但没有成功。在随机生成的测试集上&#xff0c;路径规划成功率只有99%左右。而使用传统的路径规划算法&#xff0c;例如A*&#xff0c;路径规划…

【HarmonyOS】鸿蒙系统

文章目录 前言一、鸿蒙OS概述1. 定义与特性2. 核心技术理念3. 技术架构设计1. 应用层2. 框架层3. 系统服务层4. 内核层 二、分布式架构分布式架构的核心理念分布式能力的实现关键技术 三、 总结 前言 鸿蒙OS是由华为推出的一款开源操作系统&#xff0c;旨在满足智能终端设备的…

[MySQL]介绍与基础指令

介绍 现在常见的数据库如:Oracle、DB 2、SQL Server、MySQL等都是关系型数据库&#xff0c;使用二维表格来存储数据。 关系结构型数据库系统 管理员 仓库 MySQL的数据存储目录为data&#xff0c;在data下的每个目录都代表一个数据库。 MySQL的安装目录下&#xff1a; bin目录…

智慧农业云平台:大数据赋能现代农业的未来

近年来&#xff0c;随着科技的迅速发展&#xff0c;农业作为传统行业正面临着前所未有的变革。智慧农业&#xff0c;作为现代农业发展的重要方向&#xff0c;借助云计算、大数据、物联网等技术&#xff0c;正在为农业生产、管理和服务提供全新的解决方案。在这个背景下&#xf…

Windows基础(1)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 声明&#xff1a;本文主要用作技术分享&#xff0c;所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险&#xff0c;并遵循相关法律法规。 感谢泷…

Pandas CSV学习

1.CSV文件简介 CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff0c;有时也称为字符分隔值&#xff0c;因为分隔字符也可以不是逗号&#xff09;&#xff0c;其文件以纯文本形式存储表格数据&#xff08;数字和文本&#xff09;。CSV 是一种通用的、相对简…

Visual Studio | 配置管理

文章目录 一、配置管理1、项目属性1.1、常规1.2、VC 目录1.3、C/C -> 常规1.4、C/C -> 预处理器1.5、C/C -> 预编译头1.6、连接器 -> 常规1.7、连接器 -> 输入 2、编辑2.1、显示空格或tab符 一、配置管理 1、项目属性 1.1、常规 字段功能目标平台版本用于生成…

数据采集-Kepware 安装证书异常处理

这里写目录标题 一、 问题描述二、原因分析三、处理方案3.1 1.执行根证书的更新3.2 安装KepServerEx 资源 一、 问题描述 在进行KepServerEx进行安装的情况下&#xff0c;出现了如下的报错&#xff1a; The installer was unable to find required root certificates ,please …

递归到分治

一、递归与分治&#xff1a; 1、递归&#xff1a;如果一个问题分可以简化为某些更小的、更简单的子问题来解决&#xff0c;那么可以用递归 2、分治&#xff1a;如果想并行处理&#xff0c;可以用到分治 二、假设我们有一段文本&#xff0c;需要统计每个单词出现的频率。我们将…

什么是护网(HVV)需要什么技术?(内附护网超全资料包)

文章目录 一、什么是护网行动&#xff1f;二、护网分类三、护网的时间四、护网的影响五、护网的规则六、什么是红队&#xff1f; 6.1、红队测试的意义 七、什么是蓝队 一、什么是护网行动&#xff1f; 护网行动是以公安部牵头的&#xff0c;用以评估企事业单位的网络安全的…

Chromium127编译指南 Linux篇 - 同步第三方库以及Hooks(六)

引言 在成功克隆 Chromium 源代码仓库并建立新分支之后&#xff0c;配置开发环境成为至关重要的下一步。这一过程涉及获取必要的第三方依赖库以及设置钩子&#xff08;hooks&#xff09;&#xff0c;这些步骤对于确保后续的编译和开发工作能够顺利进行起着决定性作用。本指南旨…

部署Prometheus、Grafana、Zipkin、Kiali监控度量Istio

1. 模块简介 Prometheus 是一个开源的监控系统和时间序列数据库。Istio 使用 Prometheus 来记录指标&#xff0c;跟踪 Istio 和网格中的应用程序的健康状况。Grafana 是一个用于分析和监控的开放平台。Grafana 可以连接到各种数据源&#xff0c;并使用图形、表格、热图等将数据…

Python+Appium+Pytest+Allure自动化测试框架-安装篇

文章目录 安装安装ADT安装NodeJs安装python安装appium安装Appium Server&#xff08;可选&#xff09;安装Appium-Inspector&#xff08;可选&#xff09;安装allure安装pytest PythonAppiumPytestAllure框架的安装 Appium是一个开源工具&#xff0c;是跨平台的&#xff0c;用于…

深入解析缓存模式下的数据一致性问题

今天&#xff0c;我们来聊聊常见的缓存模式和数据一致性问题。 常见的缓存模式有&#xff1a;Cache Aside、Read Through、Write Through、Write Back、Refresh Ahead、Singleflight。 缓存模式 Cache Aside 在 Cache Aside 模式中&#xff0c;是把缓存当做一个独立的数据源…

tensorflow案例4--人脸识别(损失函数选取,调用VGG16模型以及改进写法)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 这个模型结构算上之前的pytorch版本的&#xff0c;算是花了不少时间&#xff0c;但是效果一直没有达到理想情况&#xff0c;主要是验证集和训练集准确率…

系统架构图设计(行业领域架构)

物联网 感知层&#xff1a;主要功能是感知和收集信息。感知层通过各种传感器、RFID标签等设备来识别物体、采集信息&#xff0c;并对这些信息进行初步处理。这一层的作用是实现对物理世界的感知和初步处理&#xff0c;为上层提供数据基础网络层&#xff1a;网络层负责处理和传输…

PySpark 本地开发环境搭建与实践

目录 一、PySpark 本地开发环境搭建 &#xff08;一&#xff09;Windows 本地 JDK 和 Hadoop 的安装 &#xff08;二&#xff09;Windows 安装 Anaconda &#xff08;三&#xff09;Anaconda 中安装 PySpark &#xff08;四&#xff09;Pycharm 中创建工程 二、编写代码 …

基于Python的自然语言处理系列(51):Weight Quantization

浮点数表示简介 浮点数的设计允许表示范围广泛的数值,同时保持一定的精度。浮点数表示的基本公式为: 在深度学习中,常见的浮点数格式有:float32(FP32)、float16(FP16)和bfloat16(BF16)。每种格式的具体特性如下: 格式总位数符号位指数位数尾数位数精度计算成…

c++:vector模拟实现

一、vector成员变量 库里实现用的就是这三个成员变量&#xff0c;咱们实现跟库里一样&#xff0c; namespace myvector {template<class T>class vector{public://vecttor的迭代器是原生指针typedef T* iterator;typedef const T* const_iterator; private:iterator _sta…

【Linux系列】Linux 和 Unix 系统中的`set`命令与错误处理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…