master

分支 (1)

管理

管理

master

trend
/
11.html

<!DOCTYPE html>
<!--
      ┏┛ ┻━━━━━┛ ┻┓
      ┃　　　　　　 ┃
      ┃　　　━　　　┃
      ┃　┳┛　  ┗┳　┃
      ┃　　　　　　 ┃
      ┃　　　┻　　　┃
      ┃　　　　　　 ┃
      ┗━┓　　　┏━━━┛
        ┃　　　┃   神兽保佑
        ┃　　　┃   代码无BUG！
        ┃　　　┗━━━━━━━━━┓
        ┃　　　　　　　    ┣┓
        ┃　　　　         ┏┛
        ┗━┓ ┓ ┏━━━┳ ┓ ┏━┛
          ┃ ┫ ┫   ┃ ┫ ┫
          ┗━┻━┛   ┗━┻━┛
-->
<html>
	<head>
		<meta charset="utf-8">
		<title>链接到同一页面的书签</title>
		<style type="text/css">
			body{
				padding: 0%;
			}
			#box{
				display:flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;
				overflow-x: hidden;
			}
			#text{
				background-color: rgb(234, 236, 238);
				width: 100%;
				height: 100%;
			}
			#text_01{
				background-image: url('img/huawei.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 100%;
				height: 700PX;
				display:flex;
				margin-left: 8%;

			}
			#title_01{
				margin-top: 30%;
				margin-left: 60%;
				text-align: center;
			}
			#img_01{
				display:flex;
				width: 20%;
				height:20%;
			}
			#text_02{
				display:flex;
				padding-left: 4%;
				margin-top: 2%;
				margin-bottom: 2%;
				flex-direction: column;
			}
			#biaoti{
				display:flex;
				margin-left: 5%;
			}
			#box_02{
				display:flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
			}
			#xiaomiimg_01{
				display: flex;
				width: 5%;
				height: 5%;
				margin-left: 7%;
				margin-right: 7%;
				margin-bottom: 0%;
			}
			#xiaomiimg_02{
				padding-left: 7%;
				width: 67%;
				height: 70%;
				display: flex;
				flex-direction: row;
				margin-top: 0%;
			}
			#xiaomiimg_01_1{
				width: 2000px;
				height: 582px;
				padding: 20px;
			}
			#text_03{
				display: flex;
				flex-direction: column;
				text-align: center;
			}
			#text_03_1{
				font-size:450%;
				color: #363839   ;
			}
			#text_03_2{
				font-size:120%;
				color: #AEB6BF ;
			}
			#text_03_21{
				color: #363839  ;
			}
			#img_02{
				display:flex;
				width: 60%;
				height:60%;
				padding-left: 20% ;
			}
			#img_03{
				display:flex;
				width: 85%;
				height: 100%;
				padding-left: 7%;
			}
			#xiaomiimg_02_1{
				display: flex;
				flex-direction: column;
				width: 86%;
				height: auto;
				margin-top: 10%;
			}
			#img_04{
				margin: 3%;
			}
			#xiaomiimg_02_2{
				display: flex;
				margin-bottom:1% ;
				margin-right: 5%;
				padding-top: 6%;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="text">
				<h3 align="center">2024年主流的手机介绍</h3>
			</div>
			<div>
				<ul>
					<li><a href="#hw">HUAWEI mate60[同页]</a></li>
					<li><a href="#xm">Xiaomi 14 Ultra[同页]</a></li>
					<li><a href="#ip">iPhone 15[同页]</a></li>
				</ul>
			</div>

			<h2 id="biaoti"><a name="hw">HUAWEI mate60</a></h2>
			<div id="text_01">
				<p id="title_01"><b><font size="4">
					一直是经典，一向有新意。<br>
					极致中轴对称，一脉相承。<br>
					同心设计，突破边界，探索美学新⁠生。</font></b>
				</p>
			</div>
			<h4 align="center"><a href="#hw">查看HUAWEI mate60详情</a></h4>
			<h2 id="biaoti"><a name="xm">Xiaomi 14 Ultra</a></h2>
			<div id="box_02">
				<div id="xiaomiimg_01">
					<img id="xiaomiimg_01_1" src="./img/xiaomi06.jpg"/img/xiaomi14.jpg"/>
				</div>
				<div id="text_02">
					<p align="center" ><b><font size="4">新一代专业影像旗舰<br>以光为始，不断向前探索时代审美<br>融合先进技术，让移动影像进入全新层次<br></font></b></p>
					<p align="center"><font size="2">更有强大科技力加持，实力全维跃升，体验更进一步<br>全等深微曲屏，小米龙铠架构，双向卫星通信<br>给你非同一般的Ultra级感受</font></p>

				</div>
				<div id="xiaomiimg_02">
					<div id="xiaomiimg_02_1">
						<img id="img_04" src="./img/xiaomi01.png"/>
						<img id="img_04" src="img/xiaomi02.png"/>
					</div>
					<div id="xiaomiimg_02_2">
						<img id="img_04" src="img/xiaomi8.png"/>
					</div>

				</div>
			</div>
			<h4 align="center"><a href="#xm">查看Xiaomi 14 Ultra详情</a></h4>

			<h2 id="biaoti"><a name="ip">iPhone 15</a></h2>
			<div id="box_03">
				<div>
					<img id="img_03" src="img/iphone4.jpg"/>
				</div>
				<div id="text_03">
					<p id="text_03_1"><b>灵动岛，<br>有事立马来冒泡。</b></p>
					<p id="text_03_2">灵动岛会<a id="text_03_21"><b>以醒目方式弹出提醒和实时活动</b></a>，让你忙起来也不会错过重要消息。<br>
					叫的车还有多久到，谁打电话来了，航班现在什么状态，都能一眼明了。</p>
					<img id="img_02" src="./img/iphone3.png"/>
				</div>
			<h4 align="center"><a href="#ip">查看iPhone 15详情</a></h4>
			</div>
		</div>
	</body>
</html>