大二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.图片演示








大二Web课程设计 HTML+CSS制作苹果商城网站 Apple商城 8个页面_第1张图片


四、 网站代码

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模板 、等!

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

你可能感兴趣的:(web前端期末大作业,前端,css,html,javascript,html5)