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
在这里插入图片描述

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

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

相关文章

工厂电气及PLC【1章各种元件符号】

交流接触器的线圈通电后&#xff0c;线圈电流会产生磁场&#xff0c;衔铁在磁吸引力作用下带动触点动作&#xff1a;常开的主触点闭合&#xff0c;接通主电路&#xff1b;同时&#xff0c;常开的辅助触点闭合&#xff0c;常闭的辅助触点断开。当线圈失电或电压显著降低时&#…

使用GraphQL构建现代API

使用GraphQL构建现代API GraphQL简介 安装GraphQL 使用npm安装GraphQL 使用Yarn安装GraphQL 创建GraphQL服务器 定义Schema 编写Resolver 查询数据 变更数据 使用Apollo Client GraphQL订阅 数据验证 错误处理 分页查询 拆分和组合Schema 总结 随着API的发展&#xff0c;传统…

用Python设置、更新和获取Excel单元格的值

Excel工作簿作为一款广泛使用的数据管理工具&#xff0c;与Python相结合&#xff0c;可以使得自动化处理大量数据成为可能。通过Python来设置、更新以及读取Excel单元格的值&#xff0c;不仅可以极大地提高工作效率&#xff0c;减少重复劳动&#xff0c;还能增强数据处理流程的…

利用ChatGPT完成2024年MathorCup大数据挑战赛-赛道A初赛:台风预测与分析

利用ChatGPT完成2024年MathorCup大数据挑战赛-赛道A初赛&#xff1a;台风预测与分析 引言 在2024年MathorCup大数据挑战赛中&#xff0c;赛道A聚焦于气象数据分析&#xff0c;特别是台风的生成、路径预测、和降水风速特性等内容。本次比赛的任务主要是建立一个分类评价模型&…

Logback 常用配置详解

1. 配置文件解析 Logback 是 Spring Boot 默认使用的日志框架&#xff0c;Logback 配置主要包含 8 大元素 1.1 configuration Logback 配置文件的根元素&#xff0c;它包含所有的配置信息 1.2 appender 定义一个 Appender&#xff0c;即日志输出的目的地&#xff0c;如控制…

造纸行业湿法粉碎机、高速破碎机、粉碎磨粉机

细胞磨在造纸行业的应用主要体现在以下几个方面&#xff1a; 1.原料处理 细碎与研磨&#xff1a;造纸行业的原料&#xff0c;如木材、竹材等&#xff0c;需要经过细碎和研磨处理以获取适合造纸的纤维。细胞磨能够高效地实现这一过程&#xff0c;将原料细化至所需的粒度&#…

JAVA基础:jdbc (学习笔记)

基础操作 任何一种jdbc操作&#xff0c;都是由7步完成的 手动加载数据库驱动类{反射}获得连接对象写sql语句获得执行对象执行sql语句&#xff0c;同时获得结果处理结果关闭资源 功能一&#xff1a;添加表里的数据 public static void main4(String[] args) throws ClassNotF…

RabbitMQ最全教程-Part1(基础使用)

一、消息队列基本概念 消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用解耦&#xff0c;异步消息&#xff0c;流量削锋等问题&#xff0c;实现高性能&#xff0c;高可用&#xff0c;可伸缩和最终一致性架构 1、消息队列的特点 可靠性 消息持久化&#xff…

英伟达 GPU 架构:演进与模型推理速度的深度关联

英伟达的 GPU 架构演进之路充满了创新与突破。 ©作者|Zane 来源|神州问学 一、 英伟达GPU的架构演进之路 1999 年&#xff0c;英伟达发布 Geforce256 图形处理芯片&#xff0c;首次提出 GPU 概念。早期的架构如 G80 或 GeForce 8800 GTX&#xff0c;包含 8 个 TPC&#…

Yolo V4详解

Yolo V4&#xff08;You Only Look Once version 4&#xff09;是一种先进的目标检测系统&#xff0c;于2020年推出。作为Yolo系列算法的最新版本&#xff0c;Yolo V4继承了其前代版本的优点&#xff0c;并在此基础上进行了多项改进&#xff0c;使得其性能得到了显著提升。本文…

实体类中为什么要实现serializable接口

最近见到好多项目中写的代码&#xff0c;在实体类中实现了Serializable接口。说实话&#xff1a;这个在以前学习的时候&#xff0c;貌似学过&#xff0c;但是一直没有用过&#xff0c;所以看着一脸懵逼&#xff0c;但是别人总不可能随便写的吧.....所以就去查了一下这个接口。 …

D55【python 接口自动化学习】- python基础之模块与标准库

day55 练习&#xff1a;实现求导 学习日期&#xff1a;20241101 学习目标&#xff1a;模块与标准库 -- 70 小试牛刀&#xff1a;如何使用Python为函数求导&#xff1f; 学习笔记&#xff1a; 需求分析 使用第三方模块实现函数求导 编写程序并测试 # 求导 from sympy import…

推荐一款功能强大的AI实时变声器:FliFlik Voice Changer

FliFlik VoiCE Changer是一款专注于声音变换与音频处理的创新软件&#xff0c;旨在满足从日常娱乐、游戏直播到播客制作、专业音频编辑的多种应用场景需求。无论是想在游戏中变换声音逗乐队友&#xff0c;还是在播客中塑造个性化的音效&#xff0c;这款软件都能提供灵活而强大的…

Spring Boot技术栈:打造大学城水电管理系统

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

2024 IC行业还能不能入了?

打个有趣的比方&#xff0c;18年以前入行IC的&#xff0c;就业前就知道或者就业后才知道&#xff0c;是去吃席只不过是“农村酒席”&#xff0c;但不至于吃坏肚子。对于这种阵仗&#xff0c;不是每个人都愿意去的&#xff0c;即便是在西电这样的院校&#xff0c;当年也有一些同…

基于双向长短期记忆网络(BiLSTM)的时间序列数据预测,15个输入1个输出,可以更改数据集,MATLAB代码

1. 数据收集与预处理 数据清洗&#xff1a;处理缺失值、异常值等。特征工程&#xff1a;提取有助于预测的特征。数据标准化&#xff1a;将时间序列数据标准化&#xff0c;使其具有零均值和单位方差&#xff0c;有助于模型训练。滑动窗口划分&#xff1a;将时间序列数据划分为多…

基于Python可视化的热门微博数据分析系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于pythondjangovueMySQL的热…

推荐一款非常好用的3d设计软件:LuBan 3D

LuBan 3D是一款非常好用的3d设计软件&#xff0c;这款软件提供独特的3D的模型以及设计的理念&#xff0c;还可以自动为用户处理像三角形OBJ&#xff0c;PLY等网格模型。 基本简介 LuBan 3D是一款非常小巧但是功能十分强大的生成式设计软件。这款软件对于设计师和制作们来说非常…

Comfyui-Flux写实人像摄影风格探索

在一些小伙伴的建议下&#xff0c;我最近开始着手整理ComfyUI的相关内容。其实之前就一直在关注这个工具&#xff0c;但由于工作繁忙&#xff0c;一直没能抽出时间去总结。 与SD webui不同的是,comfyui有着极高的自由度和灵活性&#xff0c;支持高度的定制化和工作流复用&#…

qt QPicture详解

1、概述 QPicture类是Qt框架中的一个重要图形类&#xff0c;它主要用于记录和回放QPainter的绘图指令。这个类能够跨平台、无分辨率依赖地绘制图形&#xff0c;非常适合用于实现打印预览和图像操作等场景。QPicture可以将绘图操作序列化为一种独立于平台的格式&#xff0c;保存…