制作电商页面（Html）
任务
制作一个电商页面，要求所卖物品清晰，页面色调清晰，要有主页和详情页。
网站所买物品：书籍
色调：#FF2400 橙红色
代码
主页HTML代码：
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/1.css"/></head><body><div class="a"><div class="c1 c2"><div class="b1"><p class="c6"><img src="img/文集logo.jpg" width=160px; height=80px; ></p><div class="b10"><p class="b2"> 全部商品分类</p><p ><ul class="b3" type="circle"><li>名家作品</li><li>青春文学</li><li>外国名著</li><li>考公考编</li><li>教辅资料</li></ul></p></div></div><div class="b4"><p class="b5"><input type="text" placeholder="白夜行" class="b6"> <!--制作搜索框--><button class="b7">搜素</button></p><p class="b8"><span class="b9">图书</span><span class="b9">电子书</span><span class="b9">教辅</span><span class="b9">漫画</span><span class="b9">周边</span><img src="img/封面图.jpg" width=500px; height=280px;></p></div><div class="e1"><div class="e2"><p class="e4">购物车</p><p class="e5">登录/注册</p></div><div class="e3"><p class="e6">排行榜</p><ol class="e7"><li>《生死疲劳》</li><li>《晚熟的人》</li><li>《我与地坛》</li><li>《蛤蟆先生去看心理医生》</li></ol></div></div> </div><div class="c1 c3"><div class="d1">图书/电子书</div><div class="d2"><div class="d3"><dt class="d4"><img src="img/图书1.jpeg" width=150px; height=180px; ></dt><dd class="d6" > <a href="specifics.html">《我的职业是小说家》</a></dd><dd class="d5">¥25</dd></div><div class="d8"><p class="d7"><img src="img/图书2.jpg" width=100px; height=80; alt=""> <span class="d9">余华《活着》</span></p><p class="d7"><img src="img/图书3.jpeg" width=100px; height=80; alt=""><span class="d9">鲁迅《故事新编》</span></p><p class="d7"><img src="img/图书4.jpeg" width=100px; height=80; alt=""><span class="d9">莫言《晚熟的人》</span></p><p class="d7"><img src="img/图书5.jpg" width=100px; height=80; alt=""><span class="d9">当年明月《明朝那些事儿》</span></p><p class="d7"><img src="img/图书6.jpeg" width=100px; height=80; alt=""><span class="d9">张嘉佳《从你的全世界路过》</span></p><p class="d7"><img src="img/图书7.jpg" width=100px; height=80; alt=""><span class="d9">《读者》杂志</span></p></div><div class="d10"><div class="d11"></div><p class="d12"><a href="">更多>>></a></p></div></div></div><div class="c1 c4"><div class="d1">教辅/考证</div><div class="d2"><div class="d3"><dt class="d4"><img src="img/教辅5.jpeg" width=150px; height=180px; ></dt><dd class="d6" > <a href="specifics2.html">《二级office高级应用》</a></dd><dd class="d5">¥30</dd></div><div class="d8"><p class="d7"><img src="img/教辅1.jpeg" width=100px; height=80; alt=""> <span class="d9">事业编综合应用能力教材</span></p><p class="d7"><img src="img/教辅2.jpeg" width=100px; height=80; alt=""><span class="d9">考研《数学基础过关660题》</span></p><p class="d7"><img src="img/教辅3.jpeg" width=100px; height=80; alt=""><span class="d9">《英语六级翻译30天速成》</span></p><p class="d7"><img src="img/教辅4.jpg" width=100px; height=80; alt=""><span class="d9">《教师职业能力测验》</span></p><p class="d7"><img src="img/教辅6.jpeg" width=100px; height=80; alt=""><span class="d9">《英语四级阅读理解》</span></p><p class="d7"><img src="img/教辅7.jpg" width=100px; height=80; alt=""><span class="d9">《驾考宝典》</span></p></div><div class="d10"><div class="d11"></div><p class="d12"><a href="">更多>>></a></p></div></div></div><div class="c1 c5"><div class="d1">漫画/周边</div><div class="d2"><div class="d3"><dt class="d4"><img src="img/漫画5.jpg" width=150px; height=180px; ></dt><dd class="d6" > <a href="specifics3.html">《撒野》小说</a></dd><dd class="d5">¥35</dd></div><div class="d8"><p class="d7"><img src="img/漫画1.jpg" width=100px; height=80; alt=""> <span class="d9">《撒野》相框</span></p><p class="d7"><img src="img/漫画2.jpg" width=100px; height=80; alt=""><span class="d9">《偷偷藏不住》贴纸</span></p><p class="d7"><img src="img/漫画3.jpeg" width=100px; height=80; alt=""><span class="d9">《狐妖小红娘》联名装饰品</span></p><p class="d7"><img src="img/漫画4.jpeg" width=100px; height=80; alt=""><span class="d9">《难哄》明信册</span></p><p class="d7"><img src="img/漫画6.jpg" width=100px; height=80; alt=""><span class="d9">《知音漫客》杂志</span></p><p class="d7"><img src="img/漫画7.jpg" width=100px; height=80; alt=""><span class="d9">《魔道祖师》钥匙扣</span></p></div><div class="d10"><div class="d11"></div><p class="d12"><a href="">更多>>></a></p></div></div></div></div></body>
</html>
主页CSS代码
*{padding:0;margin:0;
}
.a{width:1000px; height:1800px; border:0px solid black;margin:0px auto;}
.c1{width:900px; border:3px solid #E47833; margin-left:20px; margin-top:8px;}
.c2{height:450px;width:950px;margin-top:30px;}
.c3{height:380px;width:950px;margin-top:30px;}
.c4{height:400px;width:950px;margin-top:30px;}
.c5{height:400px;width:950px;margin-top:30px;}
.c6{border:0px solid black;width:160px; height:80px;margin:5px;
}
.b1{width:200px;height:360px;margin-top:10px;margin-left:10px;border:0px solid black;float:left;
}
.b2{width:100px;margin-left: 5px;margin-top: 15px;padding:5px;border:0px solid gray;
}
.b3{width:150px;height: 200px;margin-left: 5px;margin-top: 5px;padding-left:10px;border:0px solid gray;
}
.b4{width:550px;height:430px;border:0px solid cadetblue;float:left;margin:5px;
}
.b5{width:500px;height:80px;border:0px solid gray;margin:10px;
}
.b6{width:350px; height:30px;margin-top:20px;margin-left:15px;border:2px solid #FF2400;font-size: 15px;
}
.b7{width:40px;height:30px;margin-left:5px;background-color: #FF2400;position:absolute;margin-top:20px;margin-bottom:auto;text-align:center;border:0px;font-size:15px;
}
.b8{width:500px;height:300px;border:0px solid black;margin-left:5px;padding:5px;
}
.b9{width:30px;height:30px;border:0px solid gray;margin-top:5px;
}
.b9:hover{background-color: grey;
}
.b10{background-color: gray;
}
.d1{width:850px;height:35px;border:0px solid black;margin:10px;font-size:25px;text-align:left;
}
.d2{width:870px;height:300px;margin:10px;border:0px solid #856363;
}
.d3{width:200px;height:280px;margin:10px;border:2px solid #6B4266;float:left;
}
.d4{margin:5px;text-align: center;
}
.d5{color:#FF0000;text-align: center;
}
.d6{text-align:center;font-size:20px;
}
.d6:hover{background-color: #FF7F00;
}
.d7{float:left;margin-top:10px;margin-left:20px;width:150px; height:120px;border:0px solid #3299CC;text-align:left;padding:5px;
}
.d8{width:550px;height:280px;margin:10px;border:2px solid #6B4266;float:left;padding:5px;text-align:center;
}
.d9{font-size:10px;padding:1px;float:left;
}
.d9:hover{background-color: #FF7F00;
}
.d10{width:60px;height:280px;border:0px solid black;font-size:10px;margin-bottom:5px;margin-top:10px;text-align:center;float:left;padding-bottom: 5px;
}
.d11{width:40px;height:250px;border:0px solid black;margin:2px;
}
.d12{color:cornflowerblue;
}
.d12:hover{background-color: #FF7F00;
}
.e1{width:150px;height:400px;border:0px solid black;float:left;margin:10px;
}
.e2{width:130px;height:50px;border:0px solid black;margin:5px;
}
.e3{width:130px;height:250px;border:0px solid black;margin-top:40px;margin-left:5px;
}
.e4{width:50px;height:30px;border:0px solid black;margin-top:5px;float:left;font-size: 10px;padding-top:2px;
}
.e5{width:70px;height:30px;border:0px solid black;margin-left:2px;margin-top:5px;float:left;font-size:10px;padding-top:2px;
}
.e6{width:70px;height:30px;border:0px solid black;font-size:15px;padding-top:10px;margin-bottom:5px;margin-left:0px;
}
.e7{width:100px;height:150px;border:0px solid black;font-size:10px;padding-top:10px;margin:5px;
}商品详情页HTML代码
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/2.css"/></head><body><div class="w"><div class="t1"><img src="img/图书1.jpeg" alt="" width=250px; height=350px;></div><div class="t2"><div class="t3"><dd class="t4">书名：《我的职业是小说家》</dd><dd class="t5">作者：村上春树</dd><dd class="t6">价格</dd><dd class="t7">¥25</dd></div><div class="t8"><button class="t10">立即购买</button><button class="t9">加入购物车</button></div></div></div></body>
</html>商品详情页CSS代码
*{padding:0;margin:0;
}
.w{width:700px;height:500px;border:2px solid #FF2400;margin-left:0px;
}
.t1{width:300px;height:400px;border:0px solid black;margin-left:5px;margin-top:5px;float:left;padding-left:10px;padding-top:10px;
}
.t2{width:250px;height:400px;margin-top:10px;margin-left:10px;border:0px solid black;float:left;
}
.t3{width:220px;height:250px;margin-top:30px;margin-left:10px;border:0px solid black;
}
.t4{width:200px;height:50px;margin-top:10px;margin-left:5px;border:0px solid black;
}
.t5{width:200px;height:50px;margin-top:10px;margin-left:5px;border:0px solid black;
}
.t6{width:60px;height:50px;margin-top:10px;margin-left:5px;border:0px solid black;float:left;
}
.t7{width:60px;height:50px;margin-top:10px;margin-left:5px;border:0px solid black;float:left;color:red;
}
.t8{width:220px;height:50px;margin-top:10px;margin-left:10px;border:0px solid black;
}
.t9{width:80px;height:40px;margin:10px;border:2px solid deepskyblue;float:right;background-color: white;
}
.t10{width:60px;height:40px;margin:10px 5px;border:2px solid deepskyblue;float:right;background-color: white;
}实现效果图
相关文章：
制作电商页面（Html）
任务 制作一个电商页面，要求所卖物品清晰，页面色调清晰，要有主页和详情页。 网站所买物品：书籍 色调：#FF2400 橙红色 代码 主页HTML代码： <html><head><meta charset"utf-8"…...
Android Sutdio依赖Snapshot版本，无法同步最新的包
起因 局域网中搭建了Nexus托管本地打包的aar，正常情况下，把修改完成的库推送到仓库后，其他项目引用Snapshot版本的依赖，同步后会马上下载最新的包，但是当第二次推送后，就没有重新下载最新的包，…...
Feign调用异常触发降级捕获异常
通过配置fallbackFactory来捕获异常信息，代码如下 FeignClient(name "user", fallbackFactory UserFallBackFactory.class) public interface UserFeign {PostMapping("/get/list")Map getList();}Component public class UserFallBackFacto…...
Springboot 音乐网站管理系统idea开发mysql数据库web结构java编程计算机网页源码maven项目
一、源码特点 springboot 音乐网站管理系统是一套完善的信息系统，结合springboot框架和bootstrap完成本系统，对理解JSP java编程开发语言有帮助系统采用springboot框架（MVC模式开发），系统 具有完整的源代码和数据库&…...
微信支付v2-02
...
企业的销售活动是什么？CRM销售管理系统给你答案
在企业业务中，销售活动是实现企业业绩目标的基本单元，起着奠基石的作用。CRM销售管理系统是销售活动管理的必备工具，帮助企业更好地开展销售活动。下面来说说企业的销售活动是什么？ 什么是销售活动 简单来说，销售人员…...
【PG】PostgreSQL参数格式 配置文件格式
目录 一 PG参数格式 二 通过配置文件修改参数 postgresql.auto.conf文件 三 通过SQL修改参数 四 通过shell修改参数 五 管理配置文件内容 一 PG参数格式 所有参数名都是大小写不敏感的。每个参数都可以接受五种类型之一的值： 布尔、字符串、整数、 浮点数或枚…...
应用层协议 HTTP
一、应用层协议 我们已经学过 TCP/IP , 已然知道数据能从客户端进程经过路径选择跨网络传送到服务器端进程。 我们还需要知道的是，我们把数据从 A 端传送到 B 端， TCP/IP 解决的是顺丰的功能，而两端还要对数据进行加工处理或者使用…...
Springboot+vue的应急救援物资管理系统，Javaee项目，springboot vue前后端分离项目。
演示视频： Springbootvue的应急救援物资管理系统，Javaee项目，springboot vue前后端分离项目。 项目介绍： 本文设计了一个基于Springbootvue的前后端分离的应急救援物资管理系统，采用M（model）V&…...
创建properties资源文件，并由spring组件类获取资源文件
1.1 创建资源文件file-upload-dev.properties #文件上传地址 file.imageUserFaceLocation=/workspaces/images/foodie/faces #图片访问地址 file.imageServerUrl=http://localhost:8088/foodie/faces1.2 创建spring组件获取资源文件类FileUpload import org.springframework.…...
你知道npm、yarn、pnpm的区别吗？
npm 嵌套的 node_modules 结构 npm 在早期采用的是嵌套的 node_modules 结构，“node_modules” 文件夹通常包含项目依赖的模块。在项目中使用多个依赖并且这些依赖本身也有它们自己的依赖时，就会出现嵌套的 “node_modules” 结构。 嵌套的 “node_mo…...
利用excel表格进行分包和组包
实际使用中，我们可能希望修改某几个数据之后，最终的数据包能够自动发动数据，类似于在给结构体变量修改数据，自动生成完整的结构体； excel语法 1：拆分数据 LEFT(A4,2) – 取A4单元格左边的两个数据 RIGHT(A4…...
Go 语言切片扩容规则是扩容2倍？1.25倍？到底几倍
本次主要来聊聊关于切片的扩容是如何扩的，还请大佬们不吝赐教 切片，相信大家用了 Go 语言那么久这这种数据类型并不陌生，但是平日里聊到关于切片是如何扩容的，很多人可能会张口就来，切片扩容的时候，如果老…...
突破封锁｜华为芯片10年进化史：从K3V1到麒麟9000S
华为海思麒麟芯片过去10年研发历程回顾如下： 2009年：华为推出第一款手机芯片K3V1，采用65nm工艺制程，基于ARM11架构，主频600MHz，支持WCDMA/GSM双模网络。这款芯片搭载在华为U8800手机上，标志着华…...
vue建项目
vue3 create-vue 建vue3项目 vscode里改点东西，首先vetur禁用，这个是vue2的，下volar pinia持久化插件：npm i pinia-plugin-persistedstate 配eslint、prettier 在.eslintrc.cjs里配 rules: {// prettier专注于代码的美观度 (格…...
天龙八部服务端Public目录功能讲解
PublicDataAIScript文件夹中 script(0~210).ai怪物AI脚本设定如是否主动攻击是否使用技能 PublicDataScript文件夹中 eventbossgroupbg_BossAI_CreateMonster.lua 是BOSS群 刷小怪通用脚本 PublicDataScript文件夹中 eventbossgroupbg_CangShan.lua 苍山 BOSS群刷新脚本 Public…...
好用的Java工具类库—— Hutool
目录 一、简介 1、介绍 2、Hutool名称的由来 3、Hutool如何改变我们的coding方式 4、包含组件（核心） 5、官方文档 二、安装与使用 1、引入 import方式 exclude方式 2、安装(POM) 三、使用 1、DateUtil 2、StrUtil 3、NumberUtil 4、MapU…...
IDEA的使用（三）Debug（断点调试）（IntelliJ IDEA 2022.1.3版本）
编程过程中如果出现错误，需要查找和定位错误时，借助程序调试可以快速查找错误。 编写好程序后，可能出现的情况： 1.没有bug。 使用Debug的情况： 2.运行后，出现错误或者异常信息，但是通过日志文件…...
285_C++_web提取AI告警信息JSON格式
struct Cache_t {AIAlarmFaceInfo Face;AIAlarmPlateInfo Plate;SAISnapedObjInfo Object;SharedCArray Common;int Type; };struct Client_t {Client_t() : AlarmCnt(HA...
处(位于 xxx.exe 中)引发的异常: 0xC0000005: 读取位置 XXXXXXXX 时发生访问冲突)
(Qt5Gui.dll)处(位于 xxx.exe 中)引发的异常: 0xC0000005: 读取位置 XXXXXXXX 时发生访问冲突
最新在处理opencv的时候遇到(Qt5Gui.dll)处(位于 xxx.exe 中)引发的异常: 0xC0000005: 读取位置 XXXXXXXX 时发生访问冲突，导致上位机崩溃严重影响开发的效率。 简要代码： void show() { QImage img QImage(data,width,height,bytePerLine,QImage::For…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...
项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
Linux离线（zip方式）安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本：CentOS 7 64位 内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时，Again增益0db变化为6DB，画面的变化只有2倍DN的增益，比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析： 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...