html+css网页制作苹果官网首页大学生HTML5期末作业Web前端网页制作html网页制作htmlcss网页制作成品大学生html网页制作作业html5+css3+js

共31个文件

jpg：10个

png：7个

css：4个

版权申诉

html

javascript

5星 · 超过95%的资源 8 浏览量 2024-08-19 14:29:13 上传评论 1 收藏 1.71MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

苹果官网首页.zip （31个子文件）

苹果官网首页

.DS_Store 6KB

css

style.css 5KB

common.css 212B

font-iconfont

demo_symbol.html 3KB

demo_fontclass.html 2KB

demo.css 6KB

iconfont.ttf 2KB

iconfont.css 2KB

iconfont.js 2KB

iconfont.svg 2KB

iconfont.eot 2KB

iconfont.woff 1KB

demo_unicode.html 4KB

index.html 6KB

images

college.jpg 113KB

2.jpg 63KB

behind.jpg 90KB

3.png 146KB

new.jpg 27KB

pic2.png 69KB

drgon.jpg 254KB

iphone8.jpg 58KB

pic.png 282KB

1.png 217KB

iphonex.png 46KB

ipad.png 46KB

iphonex1.png 89KB

macos.jpg 50KB

3.jpg 87KB

7.jpg 18KB

macbook-pro.jpg 127KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1 user-scalable=no"/> <title>Apple(中国)</title> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="./css/font-iconfont/iconfont.css"> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/common.css"> </head> <body> <div id="page">  <div class="adj-wrapper"> <div class="adj"> <span><广告></span> </div> </div>  <nav>  <div class="nav-wrapper pc"> <ul> <li><a href=""><i class="fa fa-apple fa-lg"></i></a></li> <li><a href="">Mac</a></li> <li><a href="">iPad</a></li> <li><a href="">iPhone</a></li> <li><a href="">Watch</a></li> <li><a href="">Music</a></li> <li><a href="">技术支持</a></li> <li><a href=""><i class="fa fa-search"></i></a></li> <li><a href=""><i class="iconfont icon-bag"></i></a></li> </ul> </div>  <div class="nav-wrapper phone"> <ul> <li><a href="#"><i class="fa fa-bars" onClick="openme()"></i></a> <ul id="icon-list"> <li><i class="fa fa-close" onClick="closeme()"></i></li> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">Music</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li><a href="#"><i class="fa fa-apple"></i></a></li> <li><a href="#"><i class="fa fa-shopping-bag"></i></a></li> </ul> </div> </nav>  <div class="container"> <div class="big-banner">  <div class="banner first"> <h1>iPhone X</h1> <p>hello，未来。</p> <a href="">进一步了解</a> <a href="">购买</a> <div class="big-img"></div> </div>  <div class="banner second"> <h1>iPad</h1> <p>这个电脑，拿掉了电脑的条条框框。</p> <a href="">进一步了解</a> <a href="">购买</a> <div class="big-img"></div> </div>  <div class="banner third"> <h1>MacBook Pro</h1> <p>更强劲，更专业的强劲</p> <a href="">进一步了解</a> <a href="">购买</a> <div class="big-img"></div> </div> </div>  <div class="small"> <ul> <li> <div class="one"> <h3>暑期特别呈献</h3> <p>为高校生活后买Mac或iPad Pro，Beats耳机搭<br>配其中。</p> </div> </li> <li> <div class="two"> <h3>敬 Mac 背后的你</h3> <a href="#">观看影片</a><a href="">探索Mac</a> </div> </li> <li> <div class="three"> <h3>激发你的强大</h3> <p>iPhone X 配备 A11 仿生。</p> <a href="#">观看影片</a> </div> </li> <li> <div class="four"> <h3>iPhone 8</h3> <p>新一代 iPhone。</p> <a href="#">进一步了解</a><a href="#">购买</a> </div> </li> <li> <div class="five"> <h3>iPhone 年年焕新计划</h3> <p>每年都有一部新 iPhone，<br>并享受 AppleCare+ 全方位服务计划。</p> </div> </li> <li> <div class="six"> <h3>macOS Mojave</h3> <p>因强大而简单</p> </div> </li> </ul> </div> </div>  <footer> <div class="footer-content"> <div class="footer-list"> <h3>选购及了解</h3> <ul> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">Music</a></li> <li><a href="#">iTunes</a></li> <li><a href="#">iPod touch</a></li> <li><a href="#">配件</a></li> <li><a href="#">App Store 充值卡</a></li> </ul> </div> <div class="footer-list"> <h3>Apple Store 商店</h3> <ul> <li><a href="#">查找零售店</a></li> <li><a href="#">Genius Bar 天才吧</a></li> <li><a href="#">Today at Apple</a></li> <li><a href="#">Apple 夏令营</a></li> <li><a href="#">Field Trip 课外活动</a></li> <li><a href="#">Apple Store App</a></li> <li><a href="#">翻新和优惠</a></li> <li><a href="#">分期付款</a></li> <li><a href="#">Apple GiveBack 回馈计划</a></li> <li><a href="#">订单状态</a></li> <li><a href="#">选购帮助</a></li> </ul> </div> <div class="footer-list"> <h3>教育应用</h3> <ul> <li><a href="#">Apple 与教育 </a></li> <li><a href="#">高校师生选购</a></li> </ul> <br> <br> <h3>商务应用</h3> <ul> <li><a href="#">Apple 与商务</a></li> <li><a href="#">商务选购</a></li> </ul> </div> <div class="footer-list"> <h3>账户</h3> <ul> <li><a href="#">管理你的 Apple ID</a></li> <li><a href="#">Apple Store 账户</a></li> <li><a href="#">iCloud.com</a></li> </ul> <br><br> <h3>Apple 价值观</h3> <ul> <li><a href="#">辅助功能</a></li> <li><a href="#">环境责任</a></li> <li><a href="#">隐私</a></li> <li><a href="#">供应商责任</a></li> </ul> </div> <div class="footer-list"> <h3>关于 Apple</h3> <ul> <li><a href="#">Newsroom</a></li> <li><a href="#">Apple 管理层</a></li> <li><a href="#">工作机会</a></li> <li><a href="#">创造就业</a></li> <li><a href="#">活动</a></li> <li><a href="#">联系 Apple</a></li> </ul> </div> </div>  <div class="address"> <div class="tel">更多选购方式：前往<a href="#"> Apple Store 零售店</a>，致电 400-666-8800 或查找在你附近的<a href="#">授权经销商</a>。 </div> <div class="copy"> <div>Copyright © 2018 Apple Inc. 保留所有权利。</div> <div class="dot"> <a href="#">隐私设置</a> <a href="#">使用条款</a> <a href="#">销售政策</a> <a href="#">法律信息</a> <a href="#">网站地图</a> </div> <div>京公安网安备 11010502008968 京ICP备10214630</div> </div> </div> </footer> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉