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

于 2024-06-24 00:22:06 发布
阅读量970 收藏 25
点赞数 27
分类专栏： web前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73081085/article/details/127148192
版权

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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学生网页设计
关注
专栏目录
html网页制作代码大全——大学生影视主题网页制作——图图影视影院5页HTML+CSS+JavaScript
Q_Q___1875547220的博客
08-13 2672
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
学生网页作业——仿华为手机电子商城 (1页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业
qq_524614081的博客
06-17 1326
HTML5期末大作业：仿华为手机商城网站设计——仿华为手机电子商城 (1页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML网页制作代码大全——中华传统文化设计题材网站(html+css)
网页设计与制作
10-11 7642
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页设计期末作业
09-21
该资源是大学选修课的期末作业，选修课的期末作业比较简单，如果需要的朋友可以前往下载，这是本人自己制作的。
制作一个企业网站——html华为官网购物商城项目的设计与实现
08-10
- **项目背景**: 本项目旨在帮助学生完成HTML5期末考核大作业，并提供一个企业级的网站设计模板，特别是针对华为官网购物商城的设计与实现。 - **项目目标**: 通过实践操作，让学生掌握基本的网页设计技能，包括...
微信小程序-购物商城-期末大作业
07-17
在这个“微信小程序-购物商城-期末大作业”中，开发者构建了一个完整的在线购物平台，旨在帮助学习者掌握微信小程序的基本开发技能和实战经验。 购物商城小程序包含以下几个核心组成部分： 1. **搜索栏**：这是...
HTML5期末大作业：仿华为手机商城网站设计——仿华为手机电子商城 (1页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业
12-01 1881
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTML期末大作业文章专栏 作品介绍 1.网页作品简介 ：HT
网页设计期末作业（一个静态网站）
04-07
网页设计期末作业，一个关于个人主页的个人网站。
网页课程设计(期末作业)
03-17
一个小型的html的班级网站,美化的相当不错.包括综合案例源代码,可以作为网页设计的期末考评作业
网页设计期末作业-导航小站
07-25
网页设计期末作业-导航小站，包含各种资源的导航，点击即可进去，包含设计文档，详细情况请看我的文章介绍。
html网页的代码大全
12-03
html网页的代码大全 内容全面 涵盖了各种html源代码
网页设计html代码大全
02-07
文档对学习网页设计的人很有帮助，里面的HTML代码比较全面，学习时可供查阅，希望能对你学习网页设计有所帮助
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 32万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
html网页制作代码大全：庆余年——电影网站7页，不包含js 有登陆注册，表格 table布局 ，有的登录注册页面，内嵌 css
Q_Q___1875547220的博客
08-13 8950
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
网页制作html新手代码,网页制作HTML基础标签代码大全
weixin_32160507的博客
06-09 3862
A标签标签说明实例a超链接标签aabbr表示文本的缩写SQL(!IE6)acronym与abbr类似，表示首字母缩写词DOMaddress表示文档的作者、签名、地址等联系信息，通常以斜体方式显示文本ymk18@163.comapplet用于在网页中插入可执行的applet程序暂无area在图象中定一个区域，对该区域进行分块链接暂无B标签标签说明实例b以粗体的方式显示文本bbase设置文档中的超链接...
网页制作的代码--HTML
sdfefafasfd的专栏
03-20 2851
html是标注语言，表面理解就是解释，是在客户端浏览器解释的。 同时在客户端浏览器解释执行的还有JavaScript。 c#和PHP、ASP这类的都是编程语言，不同的是后两者只用于Web编程，而C#还用于WinForm编程。 在网页设计的时候，HTML是用来控制你想表现在客户端的样子，JavaScript用来表现客户端操作的功能，编程语言用来表现服务端的功能。 客户
网页制作HTML基础标签代码大全
mail_cm的专栏
10-29 3883
from:http://blog.sina.com.cn/s/blog_615bd10b0100khfs.html   A标签 标签说明                                实例 a 超链接标签                                  a abbr 表示文本
仿华为手机商城设计与实现源码分享
本次提供的源码是一个以华为手机为主题的电子商城网站，使用了目前前端开发中最基础的三大技术：HTML（HyperText Markup Language）、CSS（Cascading Style Sheets）、JavaScript。HTML用于构建网页的结构，CSS用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

web学生网页设计

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

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

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

打赏作者

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

抵扣说明：

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

余额充值