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

IT--精英联盟

于 2022-12-10 12:45:33 发布

阅读量3.6k

点赞数 6

分类专栏：大学HTML+CSS+JavaScript期末作业文章标签： css html javascript HTML作业 HTML学生作业

本文链接：https://blog.csdn.net/qq_41101110/article/details/128263919

版权

大学HTML+CSS+JavaScript期末作业专栏收录该内容

42 篇文章 288 订阅

订阅专栏

一、全部页面截图

二、首页代码


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>txf'Apple</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<link rel="stylesheet" type="text/css" href="css/mainbase.css" />
	<link rel="stylesheet" type="text/css" href="css/nav-footer.css" />
	<style>
		.nav-search {
			display: none;
		}
	</style>
</head>

<body>
	<nav class="nav">
		<div class="ad" onclick="removeAd(this)">
			<span>
				<广告>
			</span>
		</div>
		<div class="nav-list">
			<ul>
				<li><a class="img-link apple" href="./"></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 id="search" class="img-link search"></a></li>
				<li><a class="img-link shopbag" href=""></a></li>
			</ul>
		</div>
	</nav>
	<div class="main">
		<div id="ad-span" class="ad"></div>
		<div class="support">
			<div class="blackbar"></div>
			<div>
				<span class="blue-link-s">
					<a href="">技术支持</a>
					，享受免费送货、Specialist专家支持、免息分期等服务。
				</span>
			</div>
		</div>
		<div class="ad-banner">
			<div class="banner-1">
				<div class="ad-text-box pos-bottom for-dark-bg">
					<a href=""></a>
					<p class="h-1">返厂好戏来了。</p>
					<p class="h-2">
						Apple 特别活动在线直播，我们凌晨2点见。
					</p>
					<div class="blue-link-l right-arrow arrow-style-a">
						<a href="">进一步了解</a>
					</div>
				</div>
			</div>
			<div class="banner-2">
				<div class="ad-text-box pos-left for-light-bg">
					<p class="en h-3">iPhone 12 Pro Max</p>
					<p class="h-1">大有来头。</p>
					<div class="a-word">
						<p class="h-2 ">立即预购</p>
						<p class="en h-2">iPhone 12 Pro Max。</pc>
					</div>
					<div class="blue-link-l right-arrow arrow-style-a a-word">
						<a href="./buy-iphone.html">进一步了解</a>
						<a href="./buy-iphone.html">预购</a>
					</div>
				</div>
			</div>
			<div class="banner-3">
				<div class="ad-text-box pos-right for-light-bg">
					<p class="en h-3">iPhone 12 mini</p>
					<p class="h-1">来头不小。</p>
					<div class="a-word">
						<p class="h-2 ">立即预购</p>
						<p class="en h-2">iPhone 12 mini。</pc>
					</div>
					<div class="blue-link-l right-arrow arrow-style-a a-word">
						<a href="">进一步了解</a>
						<a href="">预购</a>
					</div>
				</div>
			</div>
		</div>
		<div class="ad-small">

			<div class="ad-small-box">
				<div class="ad-sbox1">
					<div class="ad-text-box pos-top for-dark-bg">
						<p class="en h-2p apple-logo-b">WATCH</p>
						<p class="en h5-red">SERIES 6</p>
						<p class="h-4">健康的未来，现在戴上。</p>
						<div class="blue-link-m right-arrow arrow-style-a a-word">
							<a href="">进一步了解</a>
							<a href="">购买</a>
						</div>
					</div>
				</div>

				<div class="ad-sbox2">
					<div class="ad-text-box pos-top for-light-bg">
						<p class="en h-1-mini">iPad Air</p>
						<p class="h-4">凭实力出彩。</p>
						<div class="blue-link-m right-arrow arrow-style-a a-word">
							<a href="">进一步了解</a>
							<a href="">购买</a>
						</div>
					</div>
				</div>
			</div>

			<div class="ad-small-box">
				<div class="ad-sbox3">
					<div class="ad-text-box pos-bottom for-light-bg">
						<p class="h-4-mini">新款</p>
						<p class="en h-art">iPad</p>
						<p class="h-4">特有本事，特超值。</p>
						<div class="blue-link-m right-arrow arrow-style-a a-word">
							<a href="">进一步了解</a>
							<a href="">购买</a>
						</div>
					</div>
				</div>
				<div class="ad-sbox4">
					<div class="ad-text-box pos-top for-light-bg">
						<p class="en h-2p apple-logo-b">WATCH</p>
						<p class="h5-red">SE</p>
						<p class="h-4">事事拿手，轻松入手。</p>
						<div class="blue-link-m right-arrow arrow-style-a a-word">
							<a href="">进一步了解</a>
							<a href="">购买</a>
						</div>
					</div>
				</div>
			</div>

			<div class="ad-small-box">
				<div class="ad-sbox5">
					<div class="ad-text-box pos-top for-dark-bg">
						<p class="en h-1-mini">AirPods Pro</p>
						<p class="h-4">妙得不同凡响。</p>
						<div class="blue-link-m right-arrow arrow-style-a a-word">
							<a href="">进一步了解</a>
							<a href="">购买</a>
						</div>
					</div>
				</div>
				<div class="ad-sbox6">
					<div class="ad-text-box pos-top for-light-bg">
						<p class="en h-1-mini">App Store</p>
						<p class="h-4">无数可心 App，一个可靠来源。</p>
						<div class="blue-link-m right-arrow arrow-style-a a-word">
							<a href="">进一步了解</a>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
	<footer class="footer">
		<div class="friend-links">
			<div>
				<ul class="grey-link-s">
					<li>选购及了解</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="">AirPods</a></li>
					<li><a href="">HomePod</a></li>
					<li><a href="">iPod touch</a></li>
					<li><a href="">配件</a></li>
					<li><a href="">App Store 充值卡</a></li>
				</ul>
			</div>
			<div>
				<ul class="grey-link-s">
					<li>服务</li>
					<li><a href="">Apple Music</a></li>
					<li><a href="">iCloud</a></li>
					<li><a href="">Apple Pay</a></li>
				</ul>
				<ul class="grey-link-s">
					<li>账户</li>
					<li><a href="">管理你的 Apple ID</a></li>
					<li><a href="">Apple Store 账户</a></li>
					<li><a href="">iCloud.com</a></li>
				</ul>
			</div>
			<div>
				<ul class="grey-link-s">
					<li>Apple Store 商店</li>
					<li><a href="">查找零售店</a></li>
					<li><a href="">i在线选购</a></li>
					<li><a href="">iGenius Bar 天才吧</a></li>
					<li><a href="">Today at Apple</a></li>
					<li><a href="">Apple 夏令营</a></li>
					<li><a href="">Apple Store App</a></li>
					<li><a href="">翻新和优惠</a></li>
					<li><a href="">分期付款</a></li>
					<li><a href="">Apple Trade In 换购计划</a></li>
					<li><a href="">订单状态</a></li>
					<li><a href="">选购帮助</a></li>
				</ul>
			</div>
			<div>
				<ul class="grey-link-s">
					<li>商务应用</li>
					<li><a href="">Apple 与商务</a></li>
					<li><a href="">i商务选购</a></li>
				</ul>
				<ul class="grey-link-s">
					<li>教育应用</li>
					<li><a href="">Apple 与教育</a></li>
					<li><a href="">高校师生选购</a></li>
				</ul>
			</div>
			<div>
				<ul class="grey-link-s">
					<li>Apple 价值观</li>
					<li><a href="">辅助功能</a></li>
					<li><a href="">环境责任</a></li>
					<li><a href="">隐私</a></li>
					<li><a href="">供应商责任</a></li>
				</ul>
				<ul class="grey-link-s">
					<li>关于 Apple</li>
					<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>
		<br><br>
		<div class="others">
			<p class="blue-link-s">更多选购方式：
				<a href="">查找你附近的 Apple Store 零售店</a>
				及
				<a href="">更多门店</a>
				，或者致电 400-666-8800。
			</p>
			<hr style="background: #999999; opacity: 0.6;">
			<p class="copyright">
				Copyright &copy; 2020 Apple Inc. 保留所有权利。
			<ul class="policy">
				<li>隐私政策</li>
				<li>使用条款</li>
				<li>销售政策</li>
				<li>法律信息</li>
				<li>网站地图</li>
			</ul>
			</p>
			<p>京ICP备10214630 营业执照 无线电发射设备销售备案编号11201910351200</p>
		</div>
	</footer>

	<!-- nav的搜索sub界面 -->
	<div id="search-page" class="nav-search">
		<div class="curtain"></div>
		<div class="nav-bar"></div>
		<div class="search-box">
			<div class="search-bar">
				<input type="submit" name="go" value="" />
				<input type="text" name="search" autofocus placeholder="搜索..." />
				<div id="cancel-btn">
					<span class="close-btn"></span>
				</div>
			</div>
			<div class="quick-links-box">
				<span>快速链接</span>
				<ul>
					<li><a href="">Apple Store 商店</a></li>
					<li><a href="">Apple Store 商店</a></li>
					<li><a href="">Apple Store 商店</a></li>
					<li><a href="">Apple Store 商店</a></li>
					<li><a href="">Apple Store 商店</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script>
	// alert("Tips:\n因为类名包含广告关键词ad,若浏览器装了去广告插件比如Adblock,请为此网页添加白名单~");
	try {	//同步广告显示状态,确定占位块是否显示
		var ad = document.getElementsByClassName("ad")[0];
		var ad_span = document.getElementById("ad-span");
		if (ad.style.display == "none") {
			ad_span.style.display == "none";
		}
		document.getElementById("search").addEventListener("click", () => { ad.click()});
	} catch (error) {
		console.log("元素获取失败!");
	}

	function removeAd(ad) {
		hideMyself(ad);
		var ad_span = document.getElementById("ad-span");
		ad_span && (ad_span.style.display = "none");
	}
</script>
<script src="./js/common.js"></script>

</html>

三、部分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);
}