大二Web课程设计 HTML+CSS制作苹果商城网站 Apple商城 8个页面
️ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业： 【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (110套) 】
文章目录
- 二、网站介绍
- 三、网站效果
-
- ▶️1.视频演示
- 2.图片演示
- 四、 网站代码
-
- HTML结构代码
- CSS样式代码
- 五、更多源码
二、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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 13h3>
<h6>RMB 5199 起h6>
<img src="images/15.jpg">
<h5>实打实的实力h5>
<h4>6.1 或 5.4 英寸h4>
<p>OLED 全面屏2p>
<img src="images/icon.png" style="padding:25px 0 0 0;">
<p>超快的 5G3p>
<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 Proh3>
<h6>RMB 8499 起h6>
<img src="images/icon_03.jpg">
<h5>iPhone 巅峰之作。h5>
<h4>6.1 英寸或 6.7 英寸h4>
<p>OLED 全面屏2p>
<img src="images/icon.png" style="padding:25px 0 0 0;">
<p>5G 蜂窝网络3p>
<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 12h3>
<h6>RMB 5499 起h6>
<img src="images/icon_05.jpg">
<h5>实打实的实力。h5>
<h4>5.4 英寸或 6.1 英寸h4>
<p>OLED 全面屏2p>
<img src="images/icon.png" style="padding:25px 0 0 0;">
<p>5G 蜂窝网络3p>
<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 SEh3>
<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 蜂窝网络3p>
<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模板 、等!
以上内容技术相关问题欢迎一起交流学习