Web实现:仿苹果官网首页HTML、CSS

您所在的位置:网站首页 apple官方报告网址 Web实现:仿苹果官网首页HTML、CSS

Web实现:仿苹果官网首页HTML、CSS

2023-07-19 17:33| 来源: 网络整理| 查看: 265

HTML部分:

Apple 商店 Mac iPad iPhone Watch AirPods 家居 Apple独家 配件 技术支持 还有机会,快选购节日好礼。可亲临Apple Store零售店取货,或享受免费送货。 立即选购 > 及时好礼,人见人爱 选购好礼 > iPhone 13 Pro 强得很 进一步了解 > 购买 > iPhone 13 解锁超能力 进一步了解 > 购买 > WATCH SERIES 7 系统升个级,就能记录单通道心电图。 进一步了解 > 产品名称:移动心电图房颤提示软件。请仔细阅读产品说明书或者在医务人员的指导下购买和使用。禁忌内容或者注意事项详见说明书。沪械广审(文)第260620-21895号 AirPods 全新AirPods支持空间音频,让这份礼唱响节日欢歌。 进一步了解 > 购买 > HomePod mini 进一步了解 > 购买 > MacBook Pro 强者的强 进一步了解 > 购买 > iPad mini 小写的大 进一步了解 > 购买 > AirTag 丢三落四这门绝技,要失传了。 进一步了解 > 购买 > 选购及了解 商店 Mac iPad iPhone Watch AirPods 家居 iPod touch AirTag 配件 App Store充值卡 服务 Apple Music iCloud Apple Pay Apple 播客 App Store 账户 管理你的Apple ID Apple Store账户 iCloud.com Apple Store商店 查找零售店 Genius Bar天才吧 Today at Apple Apple夏令营 Apple Store App 翻新和优惠 分期付款 Apple Trade In换购计划 订单状态 选购帮助 商务应用 Apple与商务 商务选购 教育应用 Apple与教育 高校师生选购 Apple价值观 辅助功能 环境责任 隐私 供应商责任 关于Apple Newsroom Apple管理层 工作机会 创造就业 商业道德与合规性 活动 联系Apple 查找你附近的Apple Store零售店 更多门店 Copyright © 2021 Apple Inc. 保留所有权利。 隐私政策 使用条款 销售政策 法律信息 网站地图 京ICP备10214630 营业执照 无线电发射设备销售备案编号11201910351200 复制代码

CSS部分:

*{ margin: 0; padding: 0; } ul,li{ list-style: none; } h1{ font-size: 40px; color: #1d1d1f; } h2{ font-size: 56px; font-weight: 600; color: #1d1d1f; display: block; width: 100%; } h3{ color: #1d1d1f; font-size: 28px; font-weight: 400; margin-top: 6px; text-align: center; width: 100%; } h4{ color: #1d1d1f; font-size: 21px; font-weight: 400; width: 100%; margin-top: 6px; margin-bottom: 6px; } h5{ color: #6e6e73; font-size: 10px; text-align: center; line-height: 20px; } a{ text-decoration: none; color: #06c; font-weight: 400; } a:hover{ text-decoration: underline; } #all{ min-width: 1280px; } #all #nav{ width: 100%; height: 50px; background: rgba(0,0,0,0.8); font-size: 14px; } #all #nav ul{ width: 1200px; height: 50px; margin: 0 auto; overflow: hidden; } #all #nav ul li{ float: left; line-height: 50px; width: 92px; text-align: center; } #all #nav ul li svg{ margin-top: 5px; } #all #nav ul li a{ color: white; } #all p#advertise{ width: 100%; height: 50px; font-size: 14px; line-height: 50px; text-align: center; background-color: #e34140; color: white; } #all p#advertise a{ color: white; } #all #contents #content1{ width: 100%; height: 630px; background: #eaf3fc; } #all #contents #content1 #content1_1{ width: 100%; height: 235px; padding-top: 47px; text-align: center; } #all #contents #content1 #content1_2{ width: 100%; height: 345px; } #all #contents #content1 #content1_1 img{ width: 70px; height: 88px; display: block; margin: 0 auto; } #all #contents #content1 #content1_1 h2{ margin-top: 20px; } #all #contents #content1 #content1_1 a{ font-size: 21px; } #all #contents #content1 #content1_2 img{ height: 345px; display: block; margin: 0 auto; } #all #contents #content2{ width: 100%; background: #fbfbfd; margin-top: 15px; } #all #contents #content2 #content2_1{ width: 100%; padding-top: 47px; text-align: center; } #all #contents #content2 #content2_1 h3{ margin-bottom: 20px; } #all #contents #content2 #content2_1 a{ font-size: 21px; } #all #contents #content2 #content2_2 img{ width: 100%; display: block; margin: 0 auto; } #all #contents #content3{ width: 100%; background: #35283c; margin-top: 15px; } #all #contents #content3 #content3_1{ width: 100%; padding-top: 47px; text-align: center; } #all #contents #content3 #content3_1 h2{ color: white; } #all #contents #content3 #content3_1 h3{ margin-bottom: 20px; color: #fec2eb; } #all #contents #content3 #content3_1 a{ font-size: 21px; color: #2997ff; } #all #contents #content3 #content3_2 img{ width: 100%; display: block; margin: 0 auto; } #all #contents #content4,#content5,#content6{ width: 100%; height: 580px; margin-top: 15px; text-align: center; } #all #contents #content4 #content4_1{ width: 49.5%; height: 580px; background: url("../images/watch.jpg") no-repeat; background-position: center; float: left; } #all #contents #content4 #content4_1 h3:first-child{ font-weight: 600; } #all #contents #content4 #content4_1 h6{ color: #d0343a; font-size: 13px; } #all #contents #content4 #content4_1 h5{ margin-top: 415px; } #all #contents #content4 #content4_2{ width: 49.5%; height: 580px; float: right; background: url("../images/airpods.jpg") no-repeat; background-position: center; padding-top: 390px; box-sizing: border-box; } #all #contents #content4 #content4_2 h3{ color: white; font-size: 40px; } #all #contents #content4 #content4_2 h4{ color: white; } #all #contents #content4 #content4_2 a{ color: white; } #all #contents #content5 #content5_1{ width: 49.5%; height: 580px; background: url("../images/homepodmini.jpg") no-repeat; background-position: center; float: left; } #all #contents #content5 #content5_2{ width: 49.5%; height: 580px; background: url("../images/macbookpro.jpg") no-repeat; background-position: center; float: left; } #all #contents #content6 #content6_1{ width: 49.5%; height: 580px; background: url("../images/ipadmini.jpg") no-repeat; background-position: center; float: left; } #all #contents #content6 #content6_2{ width: 49.5%; height: 580px; background: url("../images/airtag.jpg") no-repeat; background-position: center; float: left; } #all #footer{ width: 100%; /*height: 200px;*/ background: #f5f5f7; margin-top: 15px; padding-top: 20px; } #all #footer div#lists{ width: 900px; height: 350px; margin: 0px auto; } #all #footer div#lists div.list{ width: 180px; height: 100%; float: left; font-size: 12px; line-height: 26px; color: #424245; } #all #footer div#lists div.list ul li:first-child{ font-weight: bold; } #all #footer div#lists div.list ul li a{ color: #424245; } #all #footer p{ width: 900px; height: 30px; font-size: 14px; margin: 0 auto; } #all #footer p#pa a{ color: #424245; border-right: 1px solid #424245; padding-right: 5px; } #all #footer p#pa a:last-child{ border: none; } 复制代码


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3