HTML静态网页成品作业(HTML+CSS)——手机电子商城网页(4个页面)

news2024/11/28 3:17:18

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

文章目录

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


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有4个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="nav">
			<div class="base">
				<div class="logo fl"><a href="index.html"><img src="./img/logo.png" height="55" alt=""></a></div>
				<ul class="fr">
					<li><a href="index.html" class="this">首页</a></li>
					<li><a href="detail.html">商品详情</a></li>
					<li><a href="login.html">我要登录</a></li>
					<li><a href="reg.html">我要注册</a></li>
				</ul>
				<div class="cl"></div>
			</div>
		</div>

		<div class="banner">
			<div class="base">
				<img src="./img/1.png">
			</div>
		</div>


		<div class="prolist">
			<div class="protit">热卖专区</div>
			<div class="probox">
				<div class="proi fl">
					<a href="">
						<img src="./img/p1.png">
						<div class="pro_name">Redmi Note 12T Pro</div>
						<div class="pro_jiage">1999</div>
					</a>
				</div>
				<div class="proi fl">
					<a href="">
						<img src="./img/p2.png">
						<div class="pro_name">Xiaomi 13 Ultra</div>
						<div class="pro_jiage">5999</div>
					</a>
				</div>
				<div class="proi fl">
					<a href="">
						<img src="./img/p3.png">
						<div class="pro_name">HUAWEI P60 Pro 8GB+256GB</div>
						<div class="pro_jiage">6188</div>
					</a>
				</div>
				<div class="proi fl">
					<a href="">
						<img src="./img/p4.png">
						<div class="pro_name">HUAWEI Pocket S 256GB</div>
						<div class="pro_jiage">5488</div>
					</a>
				</div>
				<div class="proi fl">
					<a href="">
						<img src="./img/p5.png">
						<div class="pro_name">vivo X Note 12GB+256GB</div>
						<div class="pro_jiage">4999</div>
					</a>
				</div>
				<div class="proi fl">
					<a href="">
						<img src="./img/p6.png">
						<div class="pro_name">vivo S17 Pro 12GB+512GB</div>
						<div class="pro_jiage">3499</div>
					</a>
				</div>
			</div>

五、源码获取

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

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

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

相关文章

前端vue实战项目结构、常用编辑器vs code 配置

5.Complete JSDoc Tags 6.Custom CSS and JS Loader 7.Debugger for Chrome 8.EditorConfig for VS Code 9.ESLint ☆☆☆ 10.gitignore 11.GitLens — Git supercharged 12.npm 13.PostCSS syntax !important 14.Vetur ☆ 15.vscode-icons 16.vue-i18n 17.Markdow…

【C语言】排序算法 -------- 计数排序

个人主页 创作不易&#xff0c;感谢大家的关注&#xff01; 文章目录 1. 计数排序的概念2. 计数排序使用场景3. 计数排序思想4. 计数排序实现过程5. 计数排序的效率6. 总结&#xff08;附源代码&#xff09; 1. 计数排序的概念 计数排序是一种非比较的排序算法&#xff0c;其…

雷达标定与解析

融合雷达与解析雷达数据的相关代码。感谢开源社区的贡献。以下代码继承了很多人的工作。 如果是单雷达&#xff1a; 直接进行标定&#xff0c;所以就是接收相关的话题然后发布。 lidar_calibration_params.yaml&#xff1a; calibration:在这个接口里面x_offset: 0.0y_offset:…

前端 CSS 经典:clip-path 裁剪

前言&#xff1a;clip-path 可以把一个元素裁剪成任意你想要的形状。clip-path 裁剪路径生成器&#xff0c;通过改变数值&#xff0c;还可以做出有趣的动画。 效果&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"><head><…

创新实训2024.06.17日志:大模型微调总结

前段时间其实我们已经部署了大模型&#xff0c;并开放了对外的web接口。不过由于之前某几轮微调实验的大模型在对话时会有异常表现&#xff08;例如响应难以被理解&#xff09;&#xff0c;因此我在项目上线后&#xff0c;监控了数据库里存储的对话记录。确定了最近一段时间部署…

『 Linux 』 进程间通信概述

文章目录 什么是进程间通信为什么要有进程间通信如何进行进程间通信 什么是进程间通信 进程间通信(IPC)指的是在操作系统重,允许两个或者多个进程之间传递信息或者数据的机制; 进程是操作系统重独立运行的实体,即进程间具有独立性,存在自己的地址空间; 因此进程间默认无法直接访…

多模块开发

简介 Git 通过子模块来解决复用模块的问题。 submodule允许你将一个 Git 仓库作为另一个 Git 仓库的子目录。 它能让你将另一个仓库克隆到自己的项目中&#xff0c;同时还保持提交的独立。而subtree可以将子模块合并到主模块由主模块完全管理。 git subModule Git地址&#…

MySQL----利用Mycat配置读写分离

首先确保主从复制是正常的&#xff0c;具体步骤在MySQL----配置主从复制。MySQL----配置主从复制 环境 master(CtenOS7)&#xff1a;192.168.200.131 ----ifconfig查看->ens33->inetslave(win10)&#xff1a;192.168.207.52 ----ipconfig查看->无线局域网适配器 WLA…

RabbitMQ 开发指南

连接RabbitMQ 连接方式一&#xff1a; 也可以选择使用URI的方式来实现 连接方式二&#xff1a; Connection接口被用来创建一个Channel&#xff0c;在创建之后&#xff0c;Channel可以用来发送或者接收消息。 Channel channel conn.createChannel();使用交换器和队列 声明…

React 中的服务器渲染组件

在前后分离架构以前&#xff0c;所有的 Html 业务都是后端渲染&#xff0c;返回前前端显示&#xff0c;后端渲染把前后端逻辑耦合在一起&#xff0c;增大系统的复杂度&#xff0c;不易于扩展。React 中的 Server组件&#xff0c;准确的说是服务器进行渲染&#xff0c;无论是什么…

物联网边缘网关在物联网应用中有哪些优势?天拓四方

随着物联网技术的快速发展&#xff0c;越来越多的设备接入网络&#xff0c;数据交互日益频繁&#xff0c;对数据处理和传输的要求也越来越高。在这样的背景下&#xff0c;物联网边缘网关应运而生&#xff0c;以其低延迟、减少带宽消耗、提高数据质量和安全性等优势&#xff0c;…

小林图解系统-三、操作系统结构

Linux 内核 vs Windows 内核 内核 作为应用连接硬件设备的桥梁&#xff0c;保证应用程序只需要关心与内核交互&#xff0c;不需要关心硬件的细节 内核具备四个基本能力&#xff1a; 管理进程、线程&#xff0c;决定哪个进程、线程使用CPU&#xff0c;也就是进程调度的能力&a…

ArcGIS查找相同图斑、删除重复图斑

​ 点击下方全系列课程学习 点击学习—>ArcGIS全系列实战视频教程——9个单一课程组合系列直播回放 点击学习——>遥感影像综合处理4大遥感软件ArcGISENVIErdaseCognition 这次是上次 今天分享一下&#xff0c;很重要却被大家忽略的两个工具 这两个工具不仅可以找出属性…

【总线】AXI4第二课时:深入AXI4总线的基础事务

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…

PHP转Go系列 | 条件循环的使用姿势

大家好&#xff0c;我是码农先森。 条件 在 PHP 语言中条件控制语句&#xff0c;主要有 if、elseif、else 和 switch 语句 // if、elseif、else 语句 $word "a"; if ($word "a") {echo "a"; } elseif ($word "b") {echo "b&…

【论文笔记】LoRA LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS

题目&#xff1a;LoRA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS 来源: ICLR 2022 模型名称: LoRA 论文链接: https://arxiv.org/abs/2106.09685 项目链接: https://github.com/microsoft/LoRA 文章目录 摘要引言问题定义现有方法的问题方法将 LORA 应用于 Transformer 实…

无源编缆测尺助力料场实现自动化堆取料作业

随着工业4.0时代的到来&#xff0c;智能化、无人化成为现代工业发展的重要趋势。在港口码头、钢铁冶金、焦化等高耗能行业中&#xff0c;如何实现物料的精准测量与无人化操作&#xff0c;成为企业提高生产效率、降低人工成本的关键。武汉市微深节能科技有限公司凭借其先进的分段…

【面试干货】抽象类与接口的区别

【面试干货】抽象类与接口的区别 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java编程中&#xff0c;抽象类和接口是两个非常重要的概念&#xff0c;它们都为代码的可扩展性和复用性提供了基础。但是&#xff0c;它们之间也有一些明显…

class的流光效果

效果图&#xff1a; 代码示例 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title&g…

React路由笔记(函数组件,自用)

配置 npm i react-router-dom基本使用 目录结构 在src中创建page文件夹放置各页面组件&#xff0c;router中放置路由 1、router中配置路由 在/router/index.js中&#xff0c;使用createBrowserRouter配置路由。 import { createBrowserRouter } from "react-router…