大二Web课程设计 HTML+CSS制作苹果商城网站 Apple商城 8个页面

最新推荐文章于 2022-10-11 09:16:02 发布
最新推荐文章于 2022-10-11 09:16:02 发布
阅读量1k 收藏 8
点赞数 2
分类专栏： web前端期末大作业 文章标签： 前端 css html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38514354/article/details/127147637
版权

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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.视频演示

C117JP 苹果商城Apple商城 8页三级带视频

🧩 2.图片演示

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

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css"/>
<title>苹果官网</title>
  
</head>

<body>

<div class="header">
    <div class="main">
        <div class="logo"><a href="home.html"><img src="images/logo.png" height="60"></a></div>
        <div class="nav">
            <a href="index.html">首页</a>
            <a href="about.html">简介</a>
            <a href="new.html">新闻</a>
            <a href="product.html">产品中心</a>
        </div>
    </div>
</div>

<div class="dt">
   <img src="images/banner.jpg">
</div>

<div class="about">
   <div class="main">
       <div class="about_jian">
           <h3>苹果公司简介<br><span></span></h3>
           <p>苹果公司（Apple Inc. ）是美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立，并命名为美国苹果电脑公司（Apple Computer Inc.），2007年1月9日更名为苹果公司，总部位于加利福尼亚州的库比蒂诺。</p>
           <a href="about.html">查看更多</a>
       </div>
   </div>
</div>

<div class="main">
    <div class="title">
        <h1>哪款 iPhone 适合你？</h1>
    </div>
    
    <div class="sj">
        <ul>
            <li>
              <em><img src="images/4.jpg"></em>
              <h3>iPhone 13</h3>
              <h6>RMB 5199 起</h6>
              <img src="images/15.jpg">
              <h5>实打实的实力</h5>
              <h4>6.1 或 5.4 英寸</h4>
              <p>OLED 全面屏2</p>
              <img src="images/icon.png" style="padding:25px 0 0 0;">
              <p>超快的 5G3</p>
              <img src="images/16.jpg" style="padding:25px 0 0 0;">
              <p>A15 仿生芯片
              <br><br></p>
              <img src="images/17.jpg" style="padding:25px 0 0 0;">
              <p>先进的双摄系统
              <br>(超广角、广角)</p>
           </li>
           <li>
              <em><img src="images/1.jpg"></em>
              <h3>iPhone 12 Pro</h3>
              <h6>RMB 8499 起</h6>
              <img src="images/icon_03.jpg">
              <h5>iPhone 巅峰之作。</h5>
              <h4>6.1 英寸或 6.7 英寸</h4>
              <p>OLED 全面屏2</p>
              <img src="images/icon.png" style="padding:25px 0 0 0;">
              <p>5G 蜂窝网络3</p>
              <img src="images/icon1.png" style="padding:25px 0 0 0;">
              <p>A14 仿生芯片
              <br>iPhone 迄今最快的芯片</p>
              <img src="images/icon2.png" style="padding:25px 0 0 0;">
              <p>Pro 级三摄系统
              <br>(超广角、广角、长焦)</p>
           </li>
           
           <li>
              <em><img src="images/2.jpg"></em>
              <h3>iPhone 12</h3>
              <h6>RMB 5499 起</h6>
              <img src="images/icon_05.jpg">
              <h5>实打实的实力。</h5>
              <h4>5.4 英寸或 6.1 英寸</h4>
              <p>OLED 全面屏2</p>
              <img src="images/icon.png" style="padding:25px 0 0 0;">
              <p>5G 蜂窝网络3</p>
              <img src="images/icon1.png" style="padding:25px 0 0 0;">
              <p>A14 仿生芯片
              <br>iPhone 迄今最快的芯片</p>
              <img src="images/icon3.png" style="padding:25px 0 0 0;">
              <p>先进的双摄系统
              <br>(超广角、广角)</p>
           </li>
           
           <li>
              <em><img src="images/3.jpg"></em>
              <h3>iPhone SE</h3>
              <h6>RMB 3299 起</h6>
              <img src="images/icon_07.jpg">
              <h5>称心称手，超值入手。</h5>
              <h4>4.7 英寸</h4>
              <p>LCD 显示屏</p>
              <img src="images/icon6.png" style="padding:25px 0 0 0;">
              <p>4G LTE 蜂窝网络3</p>
              <img src="images/icon4.png" style="padding:25px 0 0 0;">
              <p>A13 仿生芯片
              <br><br></p>
              <img src="images/icon5.png" style="padding:25px 0 0 0;">
              <p>单摄系统
              <br>(广角)</p>
           </li>
        </ul>
    </div>
    
</div>


<div class="hc">
   <h1>在 Apple 购买，<br>好处多多。</h1>
   <p>你可以选择适合自己的付款方式，通过 Apple Trade In 换购计划享受折抵优惠，<br>快速搞定各项设置，还可以和 Specialist 专家沟通交流。</p>
   <h3>iOS 14
这种新感觉，
一点不陌生。</h3>
</div>


<div class="new">
    <div class="main">
        <div class="title">
           <h1>最新消息</h1>
        </div>
        
        <ul>
           <li>
              <a href="new.html">
              <img src="images/x.jpg">
              <h3>Apple 零售店取货服务现已在中国大陆推出</h3>
              <p>2021 年 6 月 30 日</p>
              </a>
           </li>
           <li>
              <a href="new.html">
              <img src="images/x1.jpg">
              <h3>Apple Tower Theatre 现已在洛杉矶市中心开幕</h3>
              <p>2021 年 6 月 24 日</p>
              </a>
           </li>
           <li>
              <a href="new.html">
              <img src="images/x2.jpg">
              <h3>Apple 推出 Today at Apple 创想营，为年轻创...</h3>
              <p>2021 年 6 月 22 日</p>
              </a>
           </li>
        </ul>
        
    </div>
</div>

<div class="footer">
    <div class="main">
       <p>更多选购方式：查找你附近的 Apple Store 零售店及更多门店，或者致电 400-666-8800。</p>
       <p style="border:none;">Copyright © 2021 苹果官网. 保留所有权利。隐私政策 | 使用条款 | 销售政策 | 法律信息 | 网站地图</p>
    </div>
</div>
</body>
</html>

🏠CSS样式代码

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
body, p, h1, h2, h3, h4, h5, table, ul, li, form, input {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: "微软雅黑";
}
a {
	font-size: 12px;
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #cccccc;
}
img {
	border: 0;
	margin: 0;
	padding: 0;
}
ul, li {
	list-style: none;
	border: 0;
	margin: 0;
	padding: 0;
}
.clear {
	clear: both;
}
.main{ width:1200px; margin:0 auto; overflow:hidden;}
.bg{ background:#000;}

.header{ width:100%; overflow:hidden; z-index:999; background:rgba(0,0,0,0.9); padding:10px 0; position:fixed;}
.header .logo{ float:left;}
.header .nav{ float:right;} 
.header .nav a{ font-size:16px; color:#fff; margin-left:140px; line-height:60px;}
.header .nav a:hover{ font-weight:bold;}

.banner{ width:100%; overflow:hidden; height:600px; text-align:center;}

.list{ width:800px; margin:0 auto; overflow:hidden; text-align:center; padding-top:90px;}
.list span{ width:200px; display:block; float:left;overflow:hidden;transition:all 1s;}
.list span h4{ color:#fff; padding:20px 0;}
.list span img{ transition:all 1s;}
.list span:hover img{ margin-top:10px;}

.dt{width:100%; overflow:hidden; text-align:center; padding-top:70px;}

.about{ width:100%; overflow:hidden; margin-top:-4px; background:url(../images/bg.jpg) top no-repeat #000; padding-bottom:90px; padding-top:40px;}
.about_jian{ width:550px; float:right;}
.about_jian h3{ color:#fff; padding:60px 0 30px 0; letter-spacing:2px;}
.about_jian p{ font-size:15px; line-height:30px; color:#fff;}
.about_jian h3 span{ width:60px; height:3px; background:#fff; display:block; margin-top:20px;}
.about_jian a{ display:inline-block; padding:10px 40px; transition:all 1s; float:right;border:1px solid #fff; font-size:15px; margin-top:40px; color:#fff;}
.about_jian a:hover{ background:#fff; color:#000;}

.title{ width:100%; overflow:hidden; padding:50px 0; text-align:center;}

.sj{width:100%; overflow:hidden; padding:20px 0 80px 0;}
.sj li{ width:300px; float:left; text-align:center;}
.sj li em{ display:block;overflow:hidden; margin-bottom:14px;}
.sj li h6{ padding:6px 0;}
.sj li h5{ padding:6px 0 20px 0; font-size:16px; border-bottom:1px solid #ccc; width:200px; margin:10px 50px 20px 50px;}
.sj li p{ font-size:12px; padding:4px 0; color:#555;}
.sj li em img{ transition:all 1s;}
.sj li:hover em img{ margin-left:10px;}

.hc{width:100%; overflow:hidden; text-align:center; background:url(../images/bg1.jpg) no-repeat; height:560px;}
.hc h1{ padding:90px 0 60px 0; font-size:50px; line-height:80px;}
.hc p{ font-size:16px; line-height:32px;}
.hc h3{ padding:50px 0; font-size:30px;}

.new{width:100%; overflow:hidden; padding:20px 0 80px 0;}
.new li{ width:380px; float:left; margin-left:30px;}
.new li:first-child{ margin-left:0;}
.new li img{ width:100%;}
.new li h3{ font-size:16px; padding:10px 0;}
.new li p{ font-size:14px; color:#666;}
.new li:hover img{ opacity:0.8;}

.footer{width:100%; overflow:hidden;background:#000; padding:30px 0;}
.footer p{ color:#ccc; font-size:12px; padding:10px 0; border-bottom:1px solid #252525; line-height:30px;}

.jian{width:100%; overflow:hidden; padding-bottom:80px;}
.jian p{ font-size:14px; color:#333; line-height:28px; padding:10px 0; text-indent:2em;}

.tp{ width:100%; overflow:hidden; }
.tp img{box-shadow:1px 1px 4px #ccc; margin:10px; padding:4px;}

.xw{width:100%; overflow:hidden; padding-bottom:80px;}
.xw span{ display:inline-block; overflow:hidden; padding:8px; border:1px solid #ccc; width:530px; margin:20px;}
.xw span img{ width:100%;}
.xw span h2{ padding:12px 0; font-size:16px; color:#333;}
.xw span p{ font-size:14px; color:#777; line-height:24px; padding-bottom:10px;}
.xw span:hover img{ opacity:0.8;}
.xw span:hover{ border:1px solid #000;}


.product{width:100%; overflow:hidden; padding-bottom:80px;}
.product_title{width:100%; overflow:hidden; height:48px; background:#000; margin-bottom:30px;}
.product_title li{ width:200px; float:left; text-align:center; margin-right:1px;}
.product_title li a{ display:block; line-height:48px; color:#fff; font-size:16px;}
.product_title li a:hover ,.product_title li a.on{ background:#333;}

.wz{ width:200px; margin:0 auto; text-align:left !important;}
.wz p{ font-size:14px !important; line-height:30px;}

五、🎁更多源码

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

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

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

html5网页设计
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
网页设计期末作业
06-26
H5+Css3构造个人主页，觉得好就用，免费共享给大家，反正个人觉得不错。
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
网页设计期末作业（一个静态网站）
04-07
网页设计期末作业，一个关于个人主页的个人网站。
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
大二Web课程设计期末考试——基于HTML+CSS+JavaScript+jQuery电商类化妆品购物商城
08-10
- 虽然没有给出具体的CSS代码示例，但可以推测，该网页设计中包含了各种CSS样式规则，用于定义页面布局、颜色、字体大小等视觉效果。 3. **JavaScript功能**： - JavaScript代码负责实现网页的动态效果，如鼠标...
大二Web课程设计——基于HTML+CSS+JavaScript+jquery手表商城购物网站(17页d
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
【大二Web课程设计】基于HTML+CSS技术制作抗疫感动专题网页设计
08-10
此项目不仅强调技术应用，还注重内容的情感表达和技术的实用性，非常适合大二学生的Web课程设计作业。接下来将详细解析该项目中的关键技术知识点。 ### 二、HTML结构设计 HTML (HyperText Markup Language) 是用于...
我的大二web课程设计 使用HTML做一个简单漂亮的页面（纯html代码）
08-10
- 提供了几个页面的截图，展示了首页、二级页面等不同页面的布局和设计效果。 ### 五、深入理解关键概念和技术要点 #### 1. HTML5 - **新特性**：引入了新的语义标签如、、等，增强了网页的结构性和可读性。 - **...
大二Web课程设计——美食网站设计与实现（HTML+CSS+JavaScript）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
网页课程设计(期末作业)
03-17
一个小型的html的班级网站,美化的相当不错.包括综合案例源代码,可以作为网页设计的期末考评作业
网页设计期末作业-导航小站
07-25
网页设计期末作业-导航小站，包含各种资源的导航，点击即可进去，包含设计文档，详细情况请看我的文章介绍。
html网页的代码大全
12-03
html网页的代码大全 内容全面 涵盖了各种html源代码
网页设计html代码大全
02-07
文档对学习网页设计的人很有帮助，里面的HTML代码比较全面，学习时可供查阅，希望能对你学习网页设计有所帮助
HTML网页制作代码大全——中华传统文化设计题材网站(html+css)
最新发布
网页设计与制作
10-11 7161
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
html网页制作代码大全——大学生影视主题网页制作——图图影视影院5页HTML+CSS+JavaScript
Q_Q___1875547220的博客
08-13 2354
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
html网页制作代码大全：庆余年——电影网站7页，不包含js 有登陆注册，表格 table布局 ，有的登录注册页面，内嵌 css
Q_Q___1875547220的博客
08-13 8905
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
网页制作html新手代码,网页制作HTML基础标签代码大全
weixin_32160507的博客
06-09 3785
A标签标签说明实例a超链接标签aabbr表示文本的缩写SQL(!IE6)acronym与abbr类似，表示首字母缩写词DOMaddress表示文档的作者、签名、地址等联系信息，通常以斜体方式显示文本ymk18@163.comapplet用于在网页中插入可执行的applet程序暂无area在图象中定一个区域，对该区域进行分块链接暂无B标签标签说明实例b以粗体的方式显示文本bbase设置文档中的超链接...
网页制作的代码--HTML
sdfefafasfd的专栏
03-20 2813
html是标注语言，表面理解就是解释，是在客户端浏览器解释的。 同时在客户端浏览器解释执行的还有JavaScript。 c#和PHP、ASP这类的都是编程语言，不同的是后两者只用于Web编程，而C#还用于WinForm编程。 在网页设计的时候，HTML是用来控制你想表现在客户端的样子，JavaScript用来表现客户端操作的功能，编程语言用来表现服务端的功能。 客户
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

html5网页设计

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

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

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

打赏作者

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

抵扣说明：

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

余额充值