JavaScript大作业(华为手机购物网站设计与实现)

最新推荐文章于 2024-06-01 11:51:44 发布
最新推荐文章于 2024-06-01 11:51:44 发布
阅读量746 收藏 18
点赞数 2
分类专栏： 网页设计与制作 文章标签： dreamweaver html静态网页 web前端 html期末大作业 web课程与设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38512571/article/details/127202119
版权

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

C138JP 华为商城 5页 无js

🧩 2.图片演示

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

四、💒 网站代码

🧱HTML结构代码


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title>无标题文档</title>
</head>

<body>
<div class="da">
  <div class="logo"><img src="images/logo.gif" width="195" height="30"></div>
  <div class="dao">
    <ul>
      <li><a href="index.html">网站首页</a></li>
      <li><a href="huawei.html">华为专区</a></li>
      <li><a href="rongyao.html">荣耀专区</a></li>
      <li><a href="mate.html">Mate 20系列</a></li>
      <li><a href="shi.html">荣耀10</a></li>
    </ul>
  </div>
  <div class="sou">
    <input name="" type="text">
    <p><a href="#">搜索</a></p>
  </div>
</div>
<div class="clearit"></div>
<div class="ban"><img src="images/ban.jpg" width="1920" height="454"></div>
<div class="nav">
  <div class="tu"><img src="images/t1.jpg" width="270" height="186"><img src="images/t2.jpg" width="270" height="186" > <img src="images/t3.jpg" width="270" height="186"  ><img src="images/t4.jpg" width="270" height="186"></div>
  <div class="shou">
    <h1>热销单品</h1>
    <div class="ye">
      <div class="zuo"><img src="images/t5.jpg" width="200" height="515"></div>
      <div class="you">
        <div class="yi"><img src="images/a1.gif" width="110" height="139">
          <p>荣耀10青春版</p>
          <p><samp>4+64GB减100 </samp></p>
          <p style=" color:#d0021b">¥1299</p>
        </div>
        <div class="yi" style=" margin-top:15px;"><img src="images/a2.gif" width="110" height="139">
          <p>HUAWEI Mate 20 RS</p>
          <p><samp>保时捷设计 </samp></p>
          <p style=" color:#d0021b">¥12999</p>
        </div>
      </div>
      <div class="you">
        <div class="yi"><img src="images/a3.gif" width="110" height="139">
          <p>荣耀Note10</p>
          <p><samp>最高减300元 </samp></p>
          <p style=" color:#d0021b">¥2699</p>
        </div>
        <div class="yi" style=" margin-top:15px;"><img src="images/a4.gif" width="110" height="139">
          <p>HUAWEI Mate 20 Pro </p>
          <p><samp>6期免息 </samp></p>
          <p style=" color:#d0021b">¥5999</p>
        </div>
      </div>
      <div class="you">
        <div class="yi"><img src="images/a5.gif" width="110" height="139">
          <p>荣耀10</p>
          <p><samp>最高优惠100 </samp></p>
          <p style=" color:#d0021b">¥2199</p>
        </div>
        <div class="yi" style=" margin-top:15px;"><img src="images/a6.gif" width="110" height="139">
          <p>HUAWEI Mate 20 X </p>
          <p><samp>6期免息|老用户享好礼 </samp></p>
          <p style=" color:#d0021b">¥4999</p>
        </div>
      </div>
      <div class="you">
        <div class="yi"><img src="images/a7.gif" width="110" height="139">
          <p>荣耀畅玩8C</p>
          <p><samp>4+32GB金色版到手价899 </samp></p>
          <p style=" color:#d0021b">¥999</p>
        </div>
        <div class="yi" style=" margin-top:15px;"><img src="images/a8.gif" width="110" height="139">
          <p>HUAWEI P20</p>
          <p><samp>下单减100+赠好礼 </samp></p>
          <p style=" color:#d0021b">¥3388</p>
        </div>
      </div>
    </div>
    <div class="clearit"></div>
    <br>
    <br>
    <h1>精品推荐</h1>
    <div class="jin">
      <div class="er">
        <p class="tt"><img src="images/a9.gif" width="120" height="88"></p>
        <p class="ee">订金100元最高抵900 赠耳机 </p>
        <p>荣耀MagicBook 锐龙版</p>
        <p><samp>¥3999 </samp></p>
      </div>
      <div class="rr">
        <p class="tt"><img src="images/a10.gif" width="120" height="110"></p>
        <p class="ee">新品首发 最高优惠100 </p>
        <p>荣耀平板5 8英寸</p>
        <p><samp>¥999 </samp></p>
      </div>
      <div class="rr">
        <p class="tt"><img src="images/a11.gif" width="120" height="104"></p>
        <p class="ee">新品上市 享3期免息 </p>
        <p>华为子母路由 Q2 Pro</p>
        <p><samp>¥799 </samp></p>
      </div>
      <div class="rr">
        <p class="tt"><img src="images/a12.gif" width="60" height="110"></p>
        <p class="ee">赠价值268元红酒券等礼包 </p>
        <p>荣耀小哨兵智能摄像机 云台版</p>
        <p><samp>¥299 </samp></p>
      </div>
      <div class="rr">
        <p class="tt"><img src="images/a13.gif" width="80" height="111"></p>
        <p class="ee">七重定位  精准守护 </p>
        <p>荣耀小K2儿童手表</p>
        <p><samp>¥299 </samp></p>
      </div>
    </div>
    <div class="clearit"></div>
  </div>
</div>
<div class="foot">华为商城</div>
</body>
</html>

🏠CSS样式代码


body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body {	font-family: "宋体";font-size: 12px;color:#000000;line-height: 20px;text-align:left;}
td,th {font-family: "宋体";font-size: 12px;color: #000000;}
a {color: #000000;} 
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}

ul,li{list-style-type:none;}
.clearit{clear:both;}

.da {width:1200px; height:100px; margin:0 auto;}
.logo {width:200px; float:left; text-align:center; margin-top:40px;}
.dao {width:600px; float:left; margin-left:50px;}
.dao li {width:110px; height:40px; float:left; text-align:center; line-height:40px; margin-top:40px; }
.dao a { font-size:16px; font-weight:600; width:110px; height:40px; display:block;border-radius:15px;}
.dao A:hover{ background:#ff8486; color:#FFF}
.sou  {width:330px; float:left; margin-left:20px;}
.sou input{width:270px; height:30px; border:1px solid#cf0a2c; margin-top:40px; float:left}
.sou p { width:50px; height:32px; background:#cf0a2c; margin-top:40px; float:left; text-align:center; line-height:32px;}
.sou a { color:#FFF;}
.ban {width:100%; height:454px;}
.nav {width:1200px; margin:0 auto;}
.tu { margin-top:30px;}
.tu img {border-radius:15px; margin-left:24px;}
.shou {  margin-top:40px;}
.shou  h1 { margin-left:24px;}
.ye { margin-top:20px;}
.zuo {width:200px; float:left; margin-left:24px;}
.zuo img {border-radius:15px;}
.you { width:200px; float:left; margin-left:38px;}
.yi {width:200px; height:250px; background:#f9f9f9;border-radius:15px; text-align:center; line-height:25px;}
.yi img { margin-top:20px;}
.yi samp {color: #666;}
.jin { margin-top:20px;}
.er {width:198px; border:1px solid #999; float:left; text-align:center; margin-left:24px;border-radius:10px; line-height:25px; }
.ee {width:198px; height:30px; background:#f3f3f3; color:#777777; line-height:30px;}
.er samp { color:#d0021b;}
.rr {width:198px; border:1px solid #999; float:left; text-align:center;  margin-left:38px;border-radius:10px; line-height:25px; }
.rr samp { color:#d0021b;}
.tt { height:130px; text-align:center}
.tt img { margin-top:10px;}
.foot {width:100%; height:90px; background:#f5f5f5; margin-top:20px; text-align:center; line-height:90px; font-size:16px; font-weight:600;}

.hua { margin-top:50px;}
.hua h1 { text-align:center;}
.wei { margin-top:30px;}
.hw { width:300px; border:1px  solid #999; float:left}
.wh {width:298.3px; float:left; border-bottom:1px solid#999; border-top:1px solid#999;  border-right:1px solid#999;}
.jz {width:290px; float:left;}
.jy {width:910px; float:left; }
.jy li { float:left; margin-left:15px;}
.ji { margin-top:30px;}
.ji li{ width:283px; float:left; border:1px solid #999; margin-left:20px; text-align:center; line-height:30px; font-size:14px}
.ji li img { margin-top:20px;}
.ji li samp { color:#e01d20;}


.rong { margin-top:30px;}
.rz {width:550px; float:left;}
.zy {text-align:center;}
.ze img { margin-left:30px; margin-top:20px;}
.ry {width:600px; float:left; margin-left:50px; line-height:40px;}
.ry p { font-size:14px; }
.ry samp { color:#ca141d; font-size:16px; font-weight:600}
.jia { margin-top:150px;}
.jia p {width:150px; height:40px; background:#fc600c; float:left; text-align:center; line-height:40px; margin-left:60px;}
.jia a { font-size:16px; font-weight:600; color:#FFF; width:150px; height:40px; display:block}
.jia A:hover{background: rgba(255,255,255, 0.3 )}
.ww { margin-top:15px;}
.ww p  {float:left;}
.wy {width:100px; height:35px; border:1px solid #999;  line-height:35px; margin-left:15px;}
.wy img{ margin-top:2px; float:left; margin-left:8px;}
.wy a  {width:100px; height:35px; display:block;}
.wy A:hover{ border:1px solid#ca141d;}
.we {width:200px; height:35px; border:1px solid #999;  line-height:35px; margin-left:15px; text-align:center}
.we a  {width:200px; height:35px; display:block;}
.we  A:hover{ border:1px solid#ca141d;}
.ws { background:#f5f5f5; padding-left:15px; padding-right:15px; margin-left:15px;}
.ws A:hover{ color:#ca141d;}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web网站建设
关注
  • 2
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html在线商城购物网站制作——基于HTML+CSS+JavaScript(oppo手机商城 6页)
而风不止
11-24 3253
在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
基于JavaScript+css的购物网站项目
WHT869706733的博客
05-06 7768
目录 一、基本功能 二、具体任务 三、页面设计 四、源码 一、基本功能 网站显示商品分类和商品信息，提供搜索商品、浏览商品的功能； 用户能够注册后购物，查看订单、购物车和个人信息； 管理员有管理商品和用户的功能。 实现效果： 图片放大特效，浮动广告，文字滚动，商品秒杀活动，用户注册验证等。 二、具体任务 项目需求分析和系统分析。 用户注册登录功能，登录时需输入验证码、检验输入合法性等。 编辑用户信息，用户可以添加个人信息。 根据系统的功能完成前期准备。 实现项目要求的效果
javascript网页设计期末作业 购物网站
weixin_47040861的博客
05-26 7094
本次主要介绍下之前上传的作业的主要功能，作业下载地址： 网页设计期末作业 购物网站 如果对本文章内容还有疑问可以观看该视频，也可以在评论区留言： 网页实现的主要功能有： 1.登录及验证 2.轮播图 3.下拉菜单 4.倒计时 5.tab栏 6.固定导航栏 7.留言板 8.购物车(包括商品的添加、删除、结算等) 9.退出登录 (其实大部分功能其实都集中在了主页_(:3」∠)_ 首先是登录功能，在未登录状态下从任何网页启动都会跳转到登录页面，默认的登录账号和密码均为123456，有需要的话可以在“
web前端 基于html实现花店购物网站源码(HTML+CSS+JavaScript) 企业网站制作
最新发布
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-01 994
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS
基于HTML5+JavaScript+CSS3+PHP的网上商城电子商务购物网站设计
毕业作品网站
06-12 6075
相对于传统的实体经济而言，电子商务的出现打破了传统的实体经济交易模式，将整个交易流程电子化、数字化，一方面以电子商务实现了电子流代替了实物流，因此可以大量减少人力、物力，极大地降低了运输成本;用户系统：用于用户浏览商品信息，搜索商品，选择购买的商品放入购物车，查看商品详情，查看服务商家联系方式和地址，购买商品数量的编辑、删除，用户结算。管理员系统：用于管理商城与账号权限管理，包括商品添加，商品管理，用户添加，账户管理，商品分类管理，订单管理，权限管理等等。3.3 C/S与B/S结构不同点分析及比较 18。
基于html+css+js+jquery的购物页面设计
qq_50280292的博客
10-12 3056
基于html+css+js+jquery的购物页面设计
web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末...
微信小程序-购物商城-期末大作业
07-17
在这个“微信小程序-购物商城-期末大作业”中，开发者构建了一个完整的在线购物平台，旨在帮助学习者掌握微信小程序的基本开发技能和实战经验。 购物商城小程序包含以下几个核心组成部分： 1. **搜索栏**：这是...
基于Vue3.0+Springboot华为商城购物网站设计源码.zip
04-19
该压缩包文件“基于Vue3.0+Springboot华为商城购物网站设计源码.zip”包含了一个完整的电商网站项目，利用了现代Web开发的两大核心技术——Vue.js 3.0 和 Spring Boot。Vue.js 是一个轻量级的前端JavaScript框架，而...
基于Vue3.0+Springboot华为商城购物网站设计毕业源码案例设计.zip
02-15
该毕业设计项目是一个完整的网上购物平台，采用现代前端框架Vue3.0与后端开发框架Spring Boot相结合，构建了一个高效、稳定且用户友好的华为商城购物网站。下面将详细阐述项目中的关键知识点。 1. **Vue3.0**: Vue....
华为OD真题含JavaScript实现代码.docx
05-10
华为OD真题含JavaScript实现代码.docx 主要三道题：查找众数及中位数、判断字符串子序列、广播服务器
很好的购物网站
11-01
较好的一个小型购物网站，适合学习jsp 的初学者来进行学习
html5+javascript+css商城（模拟联想）购物系统
06-26
可以实现商城中信息的动态浏览与检索，实现用户的注册登录与增删改，商品信息增删改。下载后先打开命名为“软化工程”的word文档，阅读中间部分的运行配置说明
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7页)
weixin__BJ050106的博客
01-12 2216
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
尝试用js和jQuery实现一个简单的商品购买系统
hyzzhmbb的博客
05-26 589
先建立一个空数组，因为商品的编号是唯一的，所以点购买商品就判断一下数组里有没有商品的编号，有就value+1，否则就生成新的一行。这一步我们先获取当前点击的节点信息，然后通过js生成节点，再拼接到购物车表头下面。小计通过获取当前这一行的value和单价相乘，总价则获取所有的小计相加。删除按钮通过绑定事件来找到当前行在删除就行，再调用一下总价函数。这里通过正则和if判断一下就行，给输入框绑定事件。因为是渲染生产的，所有我直接给按钮里绑定了。这样一个简单的商品购买系统就完成了。通过拼接和循环就得到表格了。
计算机毕业设计HTML+CSS+JavaScript仿大型购物商城(1页)
qq_38514094的博客
03-19 89
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
JavaScript学习之购物网站放大镜
ZeroEQ的博客
08-24 208
本篇文章主要介绍了在各种电商网站中经常见到的放大镜功能，即当鼠标移到图片上时，会在旁边显示出大图，并会随着鼠标移动进行位置移动。
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
qq_38514921的博客
04-01 187
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
基于JavaScript网上商城开发设计 毕业设计-附源码261620
weixin_BYSJ1987的博客
11-01 304
本系统主要是提供给用户一个购买各类商品的平台，通过价格优势吸引众多消费者来购买，实现正常运营。该系统采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作系统采取Mysql作为后台数据的主要存储单元，运用软件工程原理和开发方法，采用node.js的koa技术构建的一个管理系统，实现了本系统的全部功能。目标是实现一个以销售为中心的计算机系统，构建用户信息与账号，账号与订单信息有机结合的业务系统。
使用HTML css JavaScript设计华为官网的设计分析
06-09
在设计华为官网时，需要进行竞品分析，了解同行业其他公司的网站设计，从而找到自身的优势和劣势，为优化设计提供参考。例如，可以分析苹果、三星等公司的官网设计，了解它们的设计风格、交互特点等，然后在华为官网...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web网站建设

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值