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

最新推荐文章于 2023-12-29 09:57:28 发布

@码住夏天-web网页设计

最新推荐文章于 2023-12-29 09:57:28 发布

阅读量784

点赞数 2

文章标签： css 前端 html css3 javascript

本文链接： https://blog.csdn.net/qq_365392777/article/details/127229085

版权

📂文章目录

二、📚网站介绍
三、🔗网站效果

▶️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代码)。

<!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.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

@码住夏天-web网页设计

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
大二Web课程设计 HTML+CSS制作苹果商城网站 Apple商城 8个页面

????文章目录二、????网站介绍三、????网站效果▶️1.视频演示???? 2.图片演示四、???? 网站代码????HTML结构代码????CSS样式代码五、????更多源码二、????网站介绍????网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。????网站程序方面：计划采...
复制链接

扫一扫