HTML作业学生-Apple苹果官网-2个页面HTML+CSS+JavsScript

一、全部页面截图

 

二、首页代码

	
	
	
	
	
	
	
	



	

		

			
				<广告>
			
		
		

			

				

				
Mac
				
iPad
				
iPhone
				
Watch
				
Music
				
技术支持
				

				

			
		
	
	

		

		

			

			

				
					技术支持
					，享受免费送货、Specialist专家支持、免息分期等服务。
				
			
		
		

			

				

					
					
返厂好戏来了。
					

						Apple 特别活动在线直播，我们凌晨2点见。
					
					

						进一步了解
					
				
			
			

				

					
iPhone 12 Pro Max
					
大有来头。
					

						
立即预购
						
iPhone 12 Pro Max。
					
					

						进一步了解
						预购
					
				
			
			

				

					
iPhone 12 mini
					
来头不小。
					

						
立即预购
						
iPhone 12 mini。
					
					

						进一步了解
						预购
					
				
			
		
		


			

				

					

						
WATCH
						
SERIES 6
						
健康的未来，现在戴上。
						

							进一步了解
							购买
						
					
				

				

					

						
iPad Air
						
凭实力出彩。
						

							进一步了解
							购买
						
					
				
			

			

				

					

						
新款
						
iPad
						
特有本事，特超值。
						

							进一步了解
							购买
						
					
				
				

					

						
WATCH
						
SE
						
事事拿手，轻松入手。
						

							进一步了解
							购买
						
					
				
			

			

				

					

						
AirPods Pro
						
妙得不同凡响。
						

							进一步了解
							购买
						
					
				
				

					

						
App Store
						
无数可心 App，一个可靠来源。
						

							进一步了解
						
					
				
			

		
	
	

		

			

				

					
选购及了解
					
Mac
					
iPad
					
iPhone
					
Watch
					
Music
					
AirPods
					
HomePod
					
iPod touch
					
配件
					
App Store 充值卡
				
			
			

				

					
服务
					
Apple Music
					
iCloud
					
Apple Pay
				
				

					
账户
					
管理你的 Apple ID
					
Apple Store 账户
					
iCloud.com
				
			
			

				

					
Apple Store 商店
					
查找零售店
					
i在线选购
					
iGenius Bar 天才吧
					
Today at Apple
					
Apple 夏令营
					
Apple Store App
					
翻新和优惠
					
分期付款
					
Apple Trade In 换购计划
					
订单状态
					
选购帮助
				
			
			

				

					
商务应用
					
Apple 与商务
					
i商务选购
				
				

					
教育应用
					
Apple 与教育
					
高校师生选购
				
			
			

				

					
Apple 价值观
					
辅助功能
					
环境责任
					
隐私
					
供应商责任
				
				

					
关于 Apple
					
Newsroom
					
Apple 管理层
					
工作机会
					
创造就业
					
活动
					
联系 Apple
				
			
		
		


		

			
更多选购方式：
				查找你附近的 Apple Store 零售店
				及
				更多门店
				，或者致电 400-666-8800。
			
			

			

				Copyright © 2020 Apple Inc. 保留所有权利。
			

				
隐私政策
				
使用条款
				
销售政策
				
法律信息
				
网站地图
			
			

			
京ICP备10214630 营业执照 无线电发射设备销售备案编号11201910351200
		
	

	
	

		

		

		

			

				
				
				

					
				
			
			

				快速链接
				

					
Apple Store 商店
					
Apple Store 商店
					
Apple Store 商店
					
Apple Store 商店
					
Apple Store 商店
				
			
		
	

 

 

 三、部分CSS代码

/**
 *index界面主要css
 */
 
.support {
	width: 100%;
}
.blackbar {
	height: 44px;
	background-color: #0a0a0a;
}
.support div:nth-child(2) {
	height: 46px;
	font-size: 12px;
	font-family: "PingFang-SC";
	font-weight: bold;
	text-align: center;
	line-height: 46px;
}


.ad-banner {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}
.ad-banner > div {
	position: relative;
	height: 692px;
	width: 1920px;
	margin-bottom: 10px;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
}
.banner-1 {
	background-image: url(../assets/images/main/ad-banner1.png);
}
.banner-2 {
	background-image: url(../assets/images/main/ad-banner2.png);
}
.banner-3 {
	background-image: url(../assets/images/main/ad-banner3.png);
}


.ad-text-box {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
}

/* .for-*-bg: 用于文字box在不同背景色中的字体颜色适应 */
.for-dark-bg {
	color: #fff;
}
.for-light-bg .en {
	color: #1d1d1f;
}
.for-light-bg{
	color: #242220;
}

/* .pos-*: 用于文字box在广告图中的定位 */
.pos-top {
	position: absolute;
	left: 50%;
	top: 8%;
	transform: translate(-50%);
}
.pos-bottom {
	position: absolute;
	left: 50%;
	bottom: 5%;
	transform: translate(-50%);
}
.pos-left {
	position: absolute;
	left: 28%;
	top: 50%;
	transform: translate(0, -50%);
}
.pos-right {
	position: absolute;
	right: 28%;
	top: 50%;
	transform: translate(0, -50%);
}

.right-arrow a {
	margin-right: 30px;
	font-family: "PingFang-SC", STHeiti, SimHei;
}

.ad-small {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.ad-small > div {
	height: 558px;
	width: 1880px;
}
.ad-small > div:nth-child(3) {
	height: 588px;
}
.ad-small-box {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding: 0 10px;
}
.ad-small-box > div {
	position: relative;
	width: 49.7%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
}
.ad-sbox1 {
	background-image: url(../assets/images/main/ad-s1.png);
}
.ad-sbox2 {
	background-image: url(../assets/images/main/ad-s2.png);
}
.ad-sbox3 {
	background-image: url(../assets/images/main/ad-s3.png);
}
.ad-sbox4 {
	background-image: url(../assets/images/main/ad-s4.png);
}
.ad-sbox5 {
	background-image: url(../assets/images/main/ad-s5.png);
}
.ad-sbox6 {
	background-image: url(../assets/images/main/ad-s6.png);
}













/* 不同文字有不同样式,各种调,调完再套 ... */
.h-1 {
	font-size: 50px;
	font-weight: bold;
	line-height: 1.5;
	padding-left: 1em;
}
.h-1-mini {
	font-size: 40px;
	font-weight: bold;
	line-height: 1;
}
.h-2 {
	font-size: 26px;
	line-height: 1.5;
}
.h-2p {
	font-size: 28px;
	line-height: 1.5;
	font-weight: bold;
}
.h-3 {
	font-size: 24px;
	line-height: 1;
}
.h-4 {
	font-size: 18px;
	font-weight: normal;
	line-height: 2.5;
}
.h-4-mini {
	font-size: 15px;
	font-weight: bold;
	line-height: 3;
}
.h5-red {
	font-size: 12px;
	color: #c71f26;
	line-height: 1;
	font-family: Helvetica;
}
.h-art {
	/* font-size: 96px; */
	font-size: 70px;
	font-family: "经典行楷繁", "STXingkai";
	line-height: 0.7;
}
/* 等有图标库再做 */
.apple-logo-a::before {
	content: "";
	font-family: "apple-icon";
}
.apple-logo-b::before {
	content: "";
	font-family: "apple-icon";
}

 

 

 

 四、部分JavaScript代码

(() => {
	//给搜索按钮绑定事件和效果
	var search_btn = document.getElementById("search");
	var cancel_btn = document.getElementById("cancel-btn");
	var search_page = document.getElementById("search-page");
	var nav_bar = document.getElementsByClassName("nav-bar")[0];

	var search_bar = search_page.getElementsByClassName("search-bar")[0];
	var search_list = search_page.getElementsByTagName("li");
	search_list = Array.from(search_list);
	var nav_elem = document.getElementsByClassName("nav-list")[0];
	nav_elem=nav_elem.getElementsByTagName("li");
	nav_elem = Array.from(nav_elem);
	// console.log(nav_elem)

	if (search_btn && search_page) {
		search_btn.addEventListener("click", showSearch);
	} else {
		console.log(search_page);
		console.log("Element get Error!");
		return false;
	}
	if (cancel_btn && search_page) {
		cancel_btn.addEventListener("click", cancelSearch);
	} else {
		console.log("Element get Error!");
		return false;
	}

	//打开搜索(特效
	function showSearch() {
		appearThatPage("search-page");
		// search_page.style.display = "block";
		window.scrollBy({
			top: -40,
			behavior: "smooth",
		});
		nav_bar.style.backgroundColor="#0a0a0a";
		search_list.forEach((element) => {
			element.style.marginLeft = "0px";
			element.style.opacity = 1;
		});
		let lxl=0.3;
		nav_elem.forEach((element) => {
			element.style.transform="scale(" + lxl + ")";
			element.style.opacity = 0;
		})
		search_bar.style.marginLeft = "0px";
		search_bar.style.opacity = 1;
	}
	//关闭搜索(特效
	function cancelSearch() {
		// search_page.style.display = "none";
		closeThisPage(search_page);
		nav_bar.style.backgroundColor="transparent";
		search_list.forEach((element) => {
			element.style.marginLeft = "80px";
			element.style.opacity = 0;
		});
		let lxl=1;
		nav_elem.forEach((element) => {
			element.style.transform="scale(" + lxl + ")";
			element.style.opacity = 1;
		})
	
		search_bar.style.marginLeft = "40px";
		search_bar.style.opacity = 0;
	}
})();

//带淡入效果的界面显现
function appearThatPage(idname) {//参数为待打开窗口的id
	var target = document.getElementById(idname);
	if (!target) {
		console.log("error: ID名不正确");
		return false;
	}
	target.style.transition = "opacity .8s";
	target.style.opacity = 0;
	target.style.display = "block";
	setTimeout(() => {
		target.style.opacity = 1;
	}, 1);
}

function hideMyself(myself) {
	myself.style.display = "none";
}
// 带有淡出效果的关闭
function closeThisPage(myself, disToParent) {//参数为元素自身或自身指针,以及到窗口最大父节点的距离
	var thispage = myself;
	if (disToParent == null) {
		var disToParent = 0;
	}
	for (let i = 0; i < disToParent; i++) {
		thispage = thispage.parentNode;
	}
	thispage.style.transition = "opacity .8s";
	thispage.style.opacity = 0;
	setTimeout(() => {
		thispage.style.display = "none";
	}, 800);
}