首页 > 其他分享 >制作一个简单HTML电影网页设计（HTML+CSS）

制作一个简单HTML电影网页设计（HTML+CSS）

时间：2024-06-23 10:29:46浏览次数：23  
标签：网页 voters color li HTML font 180k CSS con

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

文章目录

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>电影网站</title>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/icofont.css" />
		<link rel="stylesheet" href="css/mian_style.css" />
		<script src='./js/jquery.js'></script>
	</head>
	<body>
		<!--头部开始	-->
		<header class="header">
			<div class="container">
				<div class="header_area">
					<div class="logo">
						<a href="index.html">
							<img src="picture/logo.png" alt="logo"/>
						</a>
					</div>	
					<div class="meau">
						<ul>
							<li>
								<a class="active" href="index.html">首页</a>
							</li>
							<li>
								<a href="movies.html">电影</a>
							</li>
							<li>
								<a href="celebrities.html">明星</a>
							</li>
							<li>
								<a href="hot.html">热点</a>
							</li>
							<li>
								<a href="news.html">新闻</a>
							</li>
							<li style="width: 120px;">
								<a href="###" class="theme-btn">
									<i class="icofont icofont-ticket"></i>
									&nbsp;&nbsp;订票									
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--头部结束-->			
		</header>
		<!--内容部分开始-->
			<section id="content">
				<!--banner开始-->
				<div class="banner">
					<ul class="list">
						<li class="on"><a href="#"><img src="picture/b1.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b2.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b3.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b4.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b5.jpg" alt="" /></a></li>
					</ul>
					<ul class="btn">
						<li class="on">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
					</ul>
					
					<a href="javascript:;" class="arrow left">&lt</a>
					<a href="javascript:;" class="arrow right">&gt</a>
				</div>
				<!--近期热播-->
				<div class="con_area">
					<div class="container">
						<div class="recent_con">
							<div class="con_top">
								<h1>
									<i class="icofont icofont-movie" ></i>
									近期热播
								</h1>
								<a href="index.html" class="more">
									MORE>>
								</a>
							</div>
							<div class="con_main">
								<ul style="overflow:hidden;margin-bottom: 20px;">
									<li class="img_right">
										<img src="picture/portfolio1.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<div class="portfolio-content">
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</div>
									</li>
									
									<li  class="img_right">
										<img src="picture/portfolio2.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li  class="img_right">
										<img src="picture/portfolio2.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li>
										<img src="picture/portfolio4.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>																		
								</ul>
								<ul>
									<li class="img_right">
										<img src="picture/portfolio5.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li  class="img_right">
										<img src="picture/portfolio6.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li  class="img_right">
										<img src="picture/portfolio2.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li>
										<img src="picture/portfolio4.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>																		
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!--经典电影-->
				<div class="con_area">
					<div class="container">
						<div class="jd_con">
							<div class="con_top">
								<h1>
									<i class="icofont icofont-film" ></i>
									经典电影
								</h1>
								<a href="index.html" class="more">
									MORE>>
								</a>
							</div>
				<div class="row" style="overflow: hidden; width: 100%;">
                    <div class="col-md-9">
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
                    </div>
				</div>
						</div>
					</div>
				</div>
			<!--	最新电影-->
				<div class="con_area">
					<div class="container">
						<div class="jd_con">
							<div class="con_top">
								<h1>
									<i class="icofont icofont-coffee-cup" ></i>
									最新电影
								</h1>
								<a href="index.html" class="more">
									MORE>>
								</a>
							</div>
			</div>
			<div class="news-slide-area">
				<div class="news-slider">
					<div class="single-news">
						<div class="news-bg-1"></div>
						<div class="news-date">
							<h2><span>NOV</span> 25</h2>
							<h1>2017</h1>
						</div>
						<div class="news-content">
							<h2>The Witch Queen</h2>
							<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
						</div>
						<a href="#">Read More</a>
					</div>
					<div class="single-news">
						<div class="news-bg-2"></div>
						<div class="news-date">
							<h2><span>NOV</span> 25</h2>
							<h1>2017</h1>
						</div>
						<div class="news-content">
							<h2>The Witch Queen</h2>
							<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
						</div>
						<a href="#">Read More</a>
					</div>
					<div class="single-news">
						<div class="news-bg-3"></div>
						<div class="news-date">
							<h2><span>NOV</span> 25</h2>
							<h1>2017</h1>
						</div>
						<div class="news-content">
							<h2>The Witch Queen</h2>
							<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
						</div>
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
					</div>
				</div>
			
			</section>
			<!--end start-->
		<footer id="end">
			<div class="container">
				<span class="company">
					北京时代国际影业有限公司
				</span>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="js/main.js"></script>
</html>

2.CSS代码


body{
	line-height: 24px;
	font-size: 14px;
	color: #b6b7b9;
	background: #13151f;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	position: relative;
/*	height: 5000px;*/
}
.header{
	padding: 18px 0;
	width: 100%;
	border-bottom: 1px solid #252838;
	z-index: 99;
}
.header_area{
	overflow: hidden;
}
.container{
	max-width: 1140px;
	margin: 0 auto;
}
.logo{
	float: left;
}
.logo a{
	display: inline-block;
}
.meau{
	float: right;
	padding-top: 34px;
}
.meau li{
	float: left;
	width: 90px;
	text-align: center;
}
.meau li a{
	font-family: "微软雅黑";
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
}
.meau li a:hover{
	color: #eb315a;
}
.meau li .active{
	color: #eb315a;
}
.meau li .theme-btn{
	background: #eb315a;
	border: 1px solid #eb315a;
	color: #fff;
	border-radius: 35px;
	padding: 5px 25px;
	display: inline-block;
	font-size: 15px;
	cursor: pointer;
	font-weight: 500;
}
.meau li .theme-btn:hover{
	color: #eb315a;
	border: 1px solid #eb315a;
	background: rgba(235,49,90,0.2);
}
/*banner*/
.banner{
			width: 100%;
			height: 450px;
			margin: 0px auto;
			overflow: hidden;
			position: relative;
}
		
		.list li{
			position: absolute;
			width: 100%;
			text-align: center;
		}
		
		.btn{
			font:14px/2.5em "微软雅黑";
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translateX(-55%);	
			bottom:40px;	
			z-index: 2;	
		}
		.btn li{
			float: left;
			width: 30px;
			line-height: 30px;
			border-radius: 50%;
			background: salmon;
			margin: 0 5px;
			color: #fff;
			cursor: pointer;
		}
		.btn .on{
			background: slateblue;
		}
		.list .on{
			z-index: 1;
		}
		
		.arrow{
			position: absolute;
			top: 50%;
			transform: translateY(-40%);
			width: 30px;
			text-align: center;
			line-height: 60px;
			background: rgba(0,0,0,0.3);
			color: #fff;
			text-decoration: none;
			font-size: 20px;
			z-index: 2;
		}
		.right{
			right: 14%;
		}
		.left{
			left:14%;
		}
		.arrow:hover{
			background: rgba(0,0,0,0.5);
			font-weight: bold;
			text-decoration: none;
		}
/*近期热播*/
.con_area{
	padding-top: 30px;
}
.recent_con{
	overflow: hidden;
}
.con_top{
	height: 54px;
	padding:8px 0;
	border-bottom: 1px solid #ffffff;
}
.con_top h1{
	float: left;
}
.con_top h1 i{
	color: #fece50;
	font-size: 40px;
	margin-right: 5px;
}
h1{
	font-size: 36px;
	color: #ffffff;
}
.more{
	float: right;
	line-height: 74px;
	color: #eb315a;
}
.con_main{
	margin-top: 50px;
}
.con_main li{
	float: left;
	display: block;
	position: relative;
	cursor: pointer;
	width: 255px;
}
.con_main li:hover img{
	width: 102%;
	height: 102%;
}
.con_main li img{
	transition: 0.9s
}
.con_main .img_right{
	margin-right: 2.2%;
}
.con_main li a{
	display: block;
	position: absolute;	
	top: 42%;
	margin-top: -30px;
	margin: auto;
	left: 50%;
	margin-left: -30px;
}
.con_main li i{
	width: 60px;

	height: 60px;
	
	line-height: 60px;
	
	color: #fff;
	
	border: 2px solid #fff;
	
	border-radius: 50%;
	
	text-align: center;
	
	font-size: 18px;
	
	display: inline-block;	
	transition: all 0.4s;	
	
}
.con_main li i:hover{
	color: orange;
	border-color: orange;
}
/*底部*/
#end{
	margin-top: 30px;
	background:#202334;
}
.company{
	width: 100%;
	display: inline-block;
	padding: 20px 0px;
	text-align: center;
}
/*详情页标题*/
.breadcrumb-area-content h2{
	margin-top: 30px;
}

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、心得体会

许多开发人员认为揽长设计是一种天生的能力，而创造力是与生俱来的。但是设计是一项可以像其他任何东西一样学习的技能。你不必天生就可以创建一个漂亮的网站的艺术家，这需要实践，熟不知局限太大，自己想要的内容板式也要跟着思路走，越往后看着自己的站点越不顺眼，没有一点成就感。

①在人群中脱颖而出。许多开发都喜欢搬运其它站点页面，很容易看出它不是自己设计的。如果个人网站的目的是展示你的能力，那么使用模板可能会降低别人对你的肯定，自己设计的独特风格，让你站点在众多的站点中脱颍而出。

②练习技巧。设计它会帮助你练习设计原则，工具，HTML和CSS。你将更容易开发用户界面并将其引入网络。设计出独特且符合现代潮流的个人站点。

以前接私活的时侯，不会设计页面，搬运其它站点页面，导致自己修改图片和部分页面的时候，不会使用工具，设计出来的页面死板不灵活，客户不满意，自己看了也觉得很普通，没有给你心意的感觉。

③更好的应用程序性能。你的网站将是轻量级的，并且使用自定义CSS会具有更好的性能。如果要包括U库或模板，则它可能包含大量代码，以涵盖您未使用的各种可能的自定义。如果未使用的代码发送给用户，则会对你网站的性能产生负面影响。加载慢，打开网页慢，被很多人不接受。

④发展职业技能。在Wb开发角色中，你可能不必从头开始实现完整的网站设计，但是你应该能够制作与现代设计一致的外观精美的界面。成为“全栈开发人员”通常意味着精通后端语言或前端JavaScript框架，同时能够熟悉设计，产品方面的知识。全栈开发人员应具有些基本的设计知识，并能够为用户提供一致的体验。当然从中学习到很多的技能知识，这是毋雨置疑的。

⑤可能会很有趣。创造出令自己感到骄做的东西是一种有趣的经历。如果您花一些时间练习它，琢磨它，打迄础厢自君胸乘学矫录更好，生活中发现美是一件很美好的事，但我觉得创造美更让人觉得骄傲。

五、精彩推荐

看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。

标签：网页,voters,color,li,HTML,font,180k,CSS,con
From： https://blog.csdn.net/qq_365392777/article/details/127442726

相关文章

  • 纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网
    这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表......
  • 简单了解html常用的标签
    HTML一、基础认知1、注释1.1、注释的作用和写法1.1.1、作用为代码添加解释性，描述性的信息，主要用来帮助开发人员理解代码，浏览器执行代码时回忽略所有注释。1.1.2、注释的快捷键在VSCode中：Ctrl+/2、HTML标签的结构2.1、结构说明标签由<、>、/、英文单词或者字母......
  • Web网页端IM产品RainbowChat-Web的v7.0版已发布
    一、关于RainbowChat-WebRainbowChat-Web是一套Web网页端IM系统，是RainbowChat的姊妹系统（RainbowChat是一套基于开源IM聊天框架 MobileIMSDK (Github地址) 的产品级移动端IM系统）。► 详细介绍：http://www.52im.net/thread-2483-1-1.html► 版本记录：http://www.52im.net/th......
  • 313.带购物车功能的服装商城网页 大学生期末大作业 Web前端网页制作 html5+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这......
  • 【JavaScript脚本宇宙】革新前端样式：CSS-in-JS库大比拼与最佳实践
    解锁响应式设计的潜力：使用CSS-in-JS库构建动态样式前言随着前端技术的发展，CSS-in-JS（CSSinJavaScript）逐渐得到开发者的青睐。它通过将CSS样式定义在JavaScript中，利用JavaScript的强大特性，实现了更灵活、动态的样式管理方式。本文将介绍几个流行的CSS-in-JS库，包括styled-c......
  • pytest测试框架pytest-html插件生成HTML格式测试报告
    Pytest提供了丰富的插件来扩展其功能，pytest-html插件帮助我们生成HTML格式的测试报告，为我们提供直观、有效的测试结果展示。为了使用pytest-html，需要满足以下条件：·Python3.6或更高版本pytest-html安装使用pip命令安装:pipinstallpytest-html(安装在pytest工程所......
  • Vite-Wechat网页聊天室|vite5.x+vue3+pinia+element-plus仿微信客户端
    基于Vue3+Pinia+ElementPlus仿微信网页聊天模板Vite5-Vue3-Wechat。vite-wechat使用最新前端技术vite5+vue3+vue-router@4+pinia+element-plus搭建网页端仿微信界面聊天系统。包含了聊天、通讯录、朋友圈、短视频、我的等功能模块。支持收缩侧边栏、背景壁纸换肤、锁屏、最大化等......
  • HTML
    一、标签认识标记<!DOCTYPEhtml>:文档声明,声明的是HTML5<html></html>:html标签<head></head>:头部标签<title></title>:标题标签<body></body>:内容标签<p></p>:段落<span></span>:文本标签（行级标签）<i>&......
  • 纯html如何识别.vue文件并搭建vue项目
    前言使用原生html写vue项目。注意：是项目，而不是页面，此方式是不推荐的，毕竟有脚手架，但在一些及其特殊场景下，可能会需要类似的方式，因此作为一个记录。这种方式唯一的优点就是写完可以直接扔服务器上了－_－对html写vue的认知很多人对在html中运行vue项目这种内容，认知只......
  • HTML5调用系统摄像头结合canvas进行拍照以及文件上传，调用结束后关闭浏览器对摄像头的
    html5部分<!--摄像头拍照--><el-buttonsize="mini"type="primary"class="cameraBtn"@click="confirm_camera">拍照</el-button><el-dialog:visible.sync="isShowCamera"title="拍照"......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99