html仿网站页面（三个页面）

最新推荐文章于 2024-07-25 11:52:08 发布

blockrock

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量99

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/blockrock/article/details/140448404

版权

1.登录注册页面

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        .div1{
            background-color: pink;
            width: 100%;
            height: 60px;
            font-size: 15px;
            font-weight: 500;
            padding: 10px;
			border-radius: 15px 0px 0px 0px;
        }
		svg{
			margin-top: 10px;
		}
         li{
            list-style: none;
            display: inline-block;
            color: white;
            margin: 10px 20px 20px 20px;
            line-height: 0.5;
         }
		 .li1{
			margin-left: 80px;
			font-size: 20px;
		 }
		 .a2{
			margin-right: 0px;
		 }
		 .li2{
			width: 250px;
		 }
		 .li3,.li4,.li5{
			width: 25px;
		 }
		 .div2{
			width: 400px;
			height: 350px;
			margin: auto;
			margin-top: 50px;
			box-shadow: 1px 1px 20px rgb(212, 211, 211);
		 }
		 .tr1{
			background-color: pink;
			color: white;
			height: 50px;
			margin-left: 10px;
			text-align: center;
		 }
		 .tr2,.tr3,.tr4{
			width: 300px;
			height: 50px;
		 }
		 .tr5{
			text-align: center;
		 }
		 .a1{
			color: rgba(201, 206, 209, 0.466);
			margin-left: 80px;
		 }
		 .a2{
			color: rgba(201, 206, 209, 0.466);
			margin-left: 48px;
		 }
		 .div3{
			width: 100%;
			height: 100px;
			margin: auto;
			text-align: center;
			margin-top: 100px;
			color: rgba(129, 131, 133, 0.466);
		 }
    </style>
</head>
<body>
    <div class="div1">
        <li class="li1"><img src="./QQ截图20240714135014.png" width="35px" height="35px">樱花动漫</li>
        <li>首页</li>
        <li>APP下载</li>
        <li>新旧番剧</li>
        <li>欧美动漫</li>
        <li>留言</li>
        <li>最新</li>
        <li>全部</li>
		<li class="li2"></li>
		<svg t="1720937717341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21251" width="32" height="32"><path d="M879.358227 793.020348 743.99119 666.456814c37.216623-53.892421 59.010999-119.123075 59.010999-189.418071 0-185.131441-151.051251-335.217714-337.361541-335.217714-186.308243 0-337.361541 150.086274-337.361541 335.217714s151.053298 335.217714 337.361541 335.217714c78.106916 0 150.007479-26.38902 207.188806-70.668503l135.423319 126.581953c20.843724 19.507286 53.717436 18.525935 73.355705-2.223644C901.273353 845.182358 900.256186 812.550147 879.358227 793.020348zM206.295971 477.038744c0-142.531204 116.115578-258.057357 259.344676-258.057357s259.343653 115.527177 259.343653 258.057357c0 142.518924-116.115578 258.057357-259.343653 258.057357S206.295971 619.557668 206.295971 477.038744z" fill="#ffffff" p-id="21252"></path></svg>
		<li class="li3"></li>
		<svg t="1720937183628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4893" id="mx_n_1720937183629" width="32" height="32"><path d="M512.736 992a483.648 483.648 0 0 1-164.672-28.8 36.88 36.88 0 1 1 25.104-69.36 407.456 407.456 0 1 0-184.608-136.512A36.912 36.912 0 0 1 129.488 801.6a473.424 473.424 0 0 1-97.472-290A480 480 0 1 1 512.736 992z" fill="#ffffff" p-id="4894"></path><path d="M685.6 638.592a32 32 0 0 1-14.032-2.96l-178.048-73.888a36.8 36.8 0 0 1-22.912-34.016V236.672a36.944 36.944 0 1 1 73.888 0v266.72l155.2 64.272a36.336 36.336 0 0 1 19.952 48 37.616 37.616 0 0 1-34.048 22.928z" fill="#ffffff" p-id="4895"></path></svg>
		<li class="li4"></li>
		<svg t="1720937223183" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6008" width="32" height="32"><path d="M685 472.2v-328c0-6.6-5.4-12-12-12H352.1c-6.6 0-12 5.4-12 12v189.6c0 3.3-2.7 6-6 6H76.2c-6.6 0-12 5.4-12 12v596.5c0 6.6 5.4 12 12 12H949c6.6 0 12-5.4 12-12V490.2c0-6.6-5.4-12-12-12H691c-3.3 0-6-2.7-6-6z m-556.8 418V409.8c0-3.3 2.7-6 6-6h199.9c3.3 0 6 2.7 6 6v480.5c0 3.3-2.7 6-6 6H134.2c-3.3-0.1-6-2.8-6-6.1z m282.4 6c-3.3 0-6-2.7-6-6V339.8h-0.5V202.1c0-3.3 2.7-6 6-6H615c3.3 0 6 2.7 6 6v688.1c0 3.3-2.7 6-6 6H410.6z m480.4 0H691c-3.3 0-6-2.7-6-6v-342c0-3.3 2.7-6 6-6h200c3.3 0 6 2.7 6 6v342.1c0 3.2-2.7 5.9-6 5.9z" p-id="6009" fill="#ffffff"></path><path d="M472.9 259.8v37.7l32.8-28.5v115.8H541V231.3h-35.3zM264.4 521c12.3-12.9 19-21.6 19-37.7 0-28.9-20.7-46.3-49.1-46.3-26.7 0-49.6 16.6-49.6 46.8H220c0-11.9 7.8-14.9 14.2-14.9 9.1 0 13.8 5.8 13.8 14.2 0 6.5-2.2 10.3-7.8 16.4l-55.6 60.3v31.9h98.7v-31.9h-55.6l36.7-38.8zM791.8 607.8c7.3 0 14 5 14 14.7 0 6.9-4.1 14.4-14.7 14.4h-5v30.6h5c9.5 0 16.4 6.9 16.4 16.2 0 11-6.5 16.4-15.7 16.4-8.8 0-15.7-5.4-15.7-16.2h-35.3c0 34.5 25.6 48.1 51.1 48.1 26.9 0 51.1-15.1 51.1-47.2 0-18.3-9.3-27.6-17.7-33.4 7.8-5 15.9-13.1 15.9-30 0-26.5-20.9-45.5-49.4-45.5-27.4 0-49.4 17.5-49.4 46.3h35.3c0.1-9.2 6.7-14.4 14.1-14.4z" p-id="6010" fill="#ffffff"></path></svg>
		<li class="li5"></li>
		<svg t="1720937315314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8271" width="48" height="48"><path d="M515.541449 7.082899c-280.359429 0-508.458551 228.120391-508.458551 508.458551s228.120391 508.458551 508.458551 508.458551 508.458551-228.120391 508.458551-508.458551S795.900879 7.082899 515.541449 7.082899zM515.541449 981.864196c-257.132626 0-466.301477-209.190121-466.301477-466.322747 0-257.132626 209.168851-466.322747 466.301477-466.322747s466.301477 209.190121 466.301477 466.322747S772.674075 981.864196 515.541449 981.864196zM614.574414 524.177056 614.574414 524.177056c47.751075-31.96876 79.230625-86.398604 79.230625-148.187857 0-98.437405-79.804915-178.24232-178.24232-178.24232-98.437405 0-178.24232 79.804915-178.24232 178.24232 0 61.810523 31.479551 116.219097 79.251895 148.187857-100.266622 39.519598-171.244501 137.170014-171.244501 251.453545 0 0.23397 0 0.446669 0.02127 0.659369 0 0.04254-0.02127 0.10635-0.02127 0.14889 0 15.612155 12.65563 28.246516 28.267786 28.246516 15.590885 0 21.886796-12.63436 21.886796-28.246516 0-0.340319-0.08508-0.659369-0.10635-1.020958 0.10635-118.005774 102.159649-219.995264 220.207964-219.995264 118.112124 0 220.207964 102.095839 220.207964 220.207964 0 0.14889-1.467628 29.054774 21.971875 29.054774 15.505806 0 28.076356-12.57055 28.076356-28.055086 0-0.06381-0.02127-0.12762-0.02127-0.2127 0-0.25524 0.02127-0.510479 0.02127-0.786989C785.797645 661.34707 714.798496 563.696654 614.574414 524.177056zM515.541449 510.734437c-74.402343 0-134.723968-60.321625-134.723968-134.723968 0-74.423613 60.321625-134.723968 134.723968-134.723968 74.423613 0 134.723968 60.321625 134.723968 134.723968S589.943792 510.734437 515.541449 510.734437z" fill="#ffffff" p-id="8272"></path></svg>
    </div>
	<div class="div2">
        <table align="center">
			<tr>
				<td class="tr5"><h2>用户注册</h2></td>
			</tr>
			<tr>
				<td class="tr2">账户<a class="a1">请输入您的登录账号</a><hr></td>
			</tr>
			<tr>
				<td class="tr3">密码<a class="a1">请输入您的登录密码</a><hr></td>
			</tr>
			<tr>
				<td  class="tr4">确认密码<a class="a2">请输入您的确认密码</a><hr></td>
			</tr>
			<tr class="tr1">
				<td>立即注册</td>
			</tr>
			<tr>
				<td></td>
			</tr>
		</table>
     </div>
	 <div class="div3">
		<tr>
			<td class="td1">&copy;&nbsp;2024&nbsp;yinghua.us&nbsp;All rights reservd.</td>
		</tr>
	 </div>
</body>
</html>

运行截图

2.主界面

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <style>
        .div1{
            background-color: pink;
            width: 100%;
            height: 60px;
            font-size: 15px;
            font-weight: 500;
            padding: 10px;
            border-radius: 15px 0px 0px 0px;
        }
		svg{
			margin-top: 10px;
		}
         li{
            list-style: none;
            display: inline-block;
            color: white;
            margin: 10px 20px 20px 20px;
            line-height: 0.5;
         }
		 .li1{
			margin-left: 80px;
			font-size: 20px;
		 }
		 .li2{
			width: 250px;
		 }
		 .li3,.li4,.li5{
			width: 25px;
		 }
         .div2{
			width: 1200px;
			height: 550px;
			margin: auto;
			margin-top: 20px;
		 }
         .div3{
            width: 1200px;
            height: 90px;
            margin: auto;
            font-size: 25px;
         }
         .a1{
            display: inline-block;
            font-size: 15px;
            margin-left: 20px;
            margin-top: 25px;
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 2;
            border-radius: 40px 40px 40px 40px;
            background-color: rgba(119, 121, 124, 0.067);
         }
         .a2{
            display: inline-block;
            font-size: 15px;
            margin-left: 25px;
            margin-top: 25px;
            width: 130px;
            height: 40px;
            text-align: center;
            border-radius: 40px 40px 40px 40px;
            background-color:rgba(119, 121, 124, 0.067);
         }
         .a3{
            display: inline-block;
            font-size: 15px;
            margin-left: 440px;
            margin-top: 25px;
            width: 400px;
            height: 40px;
            text-align: center;
         }
    </style>
</head>
<body>
    <div class="div1">
        <li class="li1"><img src="./QQ截图20240714135014.png" width="35px" height="35px">樱花动漫</li>
        <li>首页</li>
        <li>APP下载</li>
        <li>新旧番剧</li>
        <li>欧美动漫</li>
        <li>留言</li>
        <li>最新</li>
        <li>全部</li>
		<li class="li2"></li>
		<svg t="1720937717341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21251" width="32" height="32"><path d="M879.358227 793.020348 743.99119 666.456814c37.216623-53.892421 59.010999-119.123075 59.010999-189.418071 0-185.131441-151.051251-335.217714-337.361541-335.217714-186.308243 0-337.361541 150.086274-337.361541 335.217714s151.053298 335.217714 337.361541 335.217714c78.106916 0 150.007479-26.38902 207.188806-70.668503l135.423319 126.581953c20.843724 19.507286 53.717436 18.525935 73.355705-2.223644C901.273353 845.182358 900.256186 812.550147 879.358227 793.020348zM206.295971 477.038744c0-142.531204 116.115578-258.057357 259.344676-258.057357s259.343653 115.527177 259.343653 258.057357c0 142.518924-116.115578 258.057357-259.343653 258.057357S206.295971 619.557668 206.295971 477.038744z" fill="#ffffff" p-id="21252"></path></svg>
		<li class="li3"></li>
		<svg t="1720937183628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4893" id="mx_n_1720937183629" width="32" height="32"><path d="M512.736 992a483.648 483.648 0 0 1-164.672-28.8 36.88 36.88 0 1 1 25.104-69.36 407.456 407.456 0 1 0-184.608-136.512A36.912 36.912 0 0 1 129.488 801.6a473.424 473.424 0 0 1-97.472-290A480 480 0 1 1 512.736 992z" fill="#ffffff" p-id="4894"></path><path d="M685.6 638.592a32 32 0 0 1-14.032-2.96l-178.048-73.888a36.8 36.8 0 0 1-22.912-34.016V236.672a36.944 36.944 0 1 1 73.888 0v266.72l155.2 64.272a36.336 36.336 0 0 1 19.952 48 37.616 37.616 0 0 1-34.048 22.928z" fill="#ffffff" p-id="4895"></path></svg>
		<li class="li4"></li>
		<svg t="1720937223183" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6008" width="32" height="32"><path d="M685 472.2v-328c0-6.6-5.4-12-12-12H352.1c-6.6 0-12 5.4-12 12v189.6c0 3.3-2.7 6-6 6H76.2c-6.6 0-12 5.4-12 12v596.5c0 6.6 5.4 12 12 12H949c6.6 0 12-5.4 12-12V490.2c0-6.6-5.4-12-12-12H691c-3.3 0-6-2.7-6-6z m-556.8 418V409.8c0-3.3 2.7-6 6-6h199.9c3.3 0 6 2.7 6 6v480.5c0 3.3-2.7 6-6 6H134.2c-3.3-0.1-6-2.8-6-6.1z m282.4 6c-3.3 0-6-2.7-6-6V339.8h-0.5V202.1c0-3.3 2.7-6 6-6H615c3.3 0 6 2.7 6 6v688.1c0 3.3-2.7 6-6 6H410.6z m480.4 0H691c-3.3 0-6-2.7-6-6v-342c0-3.3 2.7-6 6-6h200c3.3 0 6 2.7 6 6v342.1c0 3.2-2.7 5.9-6 5.9z" p-id="6009" fill="#ffffff"></path><path d="M472.9 259.8v37.7l32.8-28.5v115.8H541V231.3h-35.3zM264.4 521c12.3-12.9 19-21.6 19-37.7 0-28.9-20.7-46.3-49.1-46.3-26.7 0-49.6 16.6-49.6 46.8H220c0-11.9 7.8-14.9 14.2-14.9 9.1 0 13.8 5.8 13.8 14.2 0 6.5-2.2 10.3-7.8 16.4l-55.6 60.3v31.9h98.7v-31.9h-55.6l36.7-38.8zM791.8 607.8c7.3 0 14 5 14 14.7 0 6.9-4.1 14.4-14.7 14.4h-5v30.6h5c9.5 0 16.4 6.9 16.4 16.2 0 11-6.5 16.4-15.7 16.4-8.8 0-15.7-5.4-15.7-16.2h-35.3c0 34.5 25.6 48.1 51.1 48.1 26.9 0 51.1-15.1 51.1-47.2 0-18.3-9.3-27.6-17.7-33.4 7.8-5 15.9-13.1 15.9-30 0-26.5-20.9-45.5-49.4-45.5-27.4 0-49.4 17.5-49.4 46.3h35.3c0.1-9.2 6.7-14.4 14.1-14.4z" p-id="6010" fill="#ffffff"></path></svg>
		<li class="li5"></li>
		<svg t="1720937315314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8271" width="48" height="48"><path d="M515.541449 7.082899c-280.359429 0-508.458551 228.120391-508.458551 508.458551s228.120391 508.458551 508.458551 508.458551 508.458551-228.120391 508.458551-508.458551S795.900879 7.082899 515.541449 7.082899zM515.541449 981.864196c-257.132626 0-466.301477-209.190121-466.301477-466.322747 0-257.132626 209.168851-466.322747 466.301477-466.322747s466.301477 209.190121 466.301477 466.322747S772.674075 981.864196 515.541449 981.864196zM614.574414 524.177056 614.574414 524.177056c47.751075-31.96876 79.230625-86.398604 79.230625-148.187857 0-98.437405-79.804915-178.24232-178.24232-178.24232-98.437405 0-178.24232 79.804915-178.24232 178.24232 0 61.810523 31.479551 116.219097 79.251895 148.187857-100.266622 39.519598-171.244501 137.170014-171.244501 251.453545 0 0.23397 0 0.446669 0.02127 0.659369 0 0.04254-0.02127 0.10635-0.02127 0.14889 0 15.612155 12.65563 28.246516 28.267786 28.246516 15.590885 0 21.886796-12.63436 21.886796-28.246516 0-0.340319-0.08508-0.659369-0.10635-1.020958 0.10635-118.005774 102.159649-219.995264 220.207964-219.995264 118.112124 0 220.207964 102.095839 220.207964 220.207964 0 0.14889-1.467628 29.054774 21.971875 29.054774 15.505806 0 28.076356-12.57055 28.076356-28.055086 0-0.06381-0.02127-0.12762-0.02127-0.2127 0-0.25524 0.02127-0.510479 0.02127-0.786989C785.797645 661.34707 714.798496 563.696654 614.574414 524.177056zM515.541449 510.734437c-74.402343 0-134.723968-60.321625-134.723968-134.723968 0-74.423613 60.321625-134.723968 134.723968-134.723968 74.423613 0 134.723968 60.321625 134.723968 134.723968S589.943792 510.734437 515.541449 510.734437z" fill="#ffffff" p-id="8272"></path></svg>
    </div>
    <div class="div2">
        <tr>
            <td><img src="https://i1.hdslb.com/bfs/archive/d28600bb5bf9347ada484934ff24a14ebce47d56.jpg" width="1200px" height="550px"></td>
        </tr>
    </div>
    <div class="div3">
        <a class="a1"><svg t="1721036913890" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4433" width="16" height="16"><path d="M206.935452 206.935452a50.844091 50.844091 0 0 0-50.844092 50.844091v508.440914a50.844091 50.844091 0 0 0 50.844092 50.844091h610.129096a50.844091 50.844091 0 0 0 50.844092-50.844091v-508.440914a50.844091 50.844091 0 0 0-50.844092-50.844091z m0-101.688183h610.129096a152.532274 152.532274 0 0 1 152.532274 152.532274v508.440914a152.532274 152.532274 0 0 1-152.532274 152.532274h-610.129096a152.532274 152.532274 0 0 1-152.532274-152.532274v-508.440914a152.532274 152.532274 0 0 1 152.532274-152.532274z" fill="#e8989a" p-id="4434"></path><path d="M651.821251 559.285005l-162.701092 108.297915a50.844091 50.844091 0 0 1-78.808342-42.200596V410.311817a50.844091 50.844091 0 0 1 78.808342-42.200596l162.701092 108.297915a50.844091 50.844091 0 0 1 0 84.401192z" fill="#e8989a" p-id="4435"></path></svg><span class="sp1">新旧番剧</span></a>
        <a class="a2"><svg t="1721036913890" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4433" width="16" height="16"><path d="M206.935452 206.935452a50.844091 50.844091 0 0 0-50.844092 50.844091v508.440914a50.844091 50.844091 0 0 0 50.844092 50.844091h610.129096a50.844091 50.844091 0 0 0 50.844092-50.844091v-508.440914a50.844091 50.844091 0 0 0-50.844092-50.844091z m0-101.688183h610.129096a152.532274 152.532274 0 0 1 152.532274 152.532274v508.440914a152.532274 152.532274 0 0 1-152.532274 152.532274h-610.129096a152.532274 152.532274 0 0 1-152.532274-152.532274v-508.440914a152.532274 152.532274 0 0 1 152.532274-152.532274z" fill="#e8989a" p-id="4434"></path><path d="M651.821251 559.285005l-162.701092 108.297915a50.844091 50.844091 0 0 1-78.808342-42.200596V410.311817a50.844091 50.844091 0 0 1 78.808342-42.200596l162.701092 108.297915a50.844091 50.844091 0 0 1 0 84.401192z" fill="#e8989a" p-id="4435"></path></svg><span class="sp1">欧美动漫</span></a>
        <a class="a3"><svg t="1721038438868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5526" width="16" height="16"><path d="M800 760.896 800 832c0 0 192-79.552 192-320s-192-320-192-320l0 71.104c0 0 128 54.272 128 248.896S800 760.896 800 760.896z" p-id="5527" fill="#e8989a"></path><path d="M232 716.8 736 1024 736 0 232 307.2 98.688 307.2C32 307.2 32 375.488 32 375.488l0 273.088c0 0 0 68.288 66.688 68.288L232 716.864zM96 371.328l135.808 0L672 128l0 768-440.192-248.512L96 647.488 96 371.328z" p-id="5528" fill="#e8989a"></path></svg><span> 欢迎访问樱花动漫,建议使用夸克浏览器或者谷歌浏览器</span></a>
    </div>
</body>
</html>

运行截图

3.其他页面

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新旧番剧</title>
    <style>
        .div1{
            background-color: pink;
            width: 100%;
            height: 60px;
            font-size: 15px;
            font-weight: 500;
            padding: 10px;
            border-radius: 15px 0px 0px 0px;
        }
		svg{
			margin-top: 10px;
		}
         li{
            list-style: none;
            display: inline-block;
            color: white;
            margin: 10px 20px 20px 20px;
            line-height: 0.5;
         }
		 .li1{
			margin-left: 80px;
			font-size: 20px;
		 }
		 .a2{
			margin-right: 0px;
		 }
		 .li2{
			width: 220px;
		 }
		 .li3,.li4,.li5{
			width: 25px;
		 }
         .box{
            width: 100%;
        }
        .li6{
            width: 210px;
            height: 330px;
            list-style: none;
            border: 1px solid #f2f2f2;
            display: inline-block;
            line-height: 1.6;
            margin-left: 40px;
            
        }
     
        .dm1{
            color: #9b9b9b;
            font-size: 12px;
        }
        .dm2{
            color: black;
            font-size: 15px;
        }

        .div3{
            width: 210px;
            height: 350px;
            margin: auto;
            margin-top: 15px;
        }
        .div2{
            width: 300px;
            height: 60px;
            font-size: 25px;
            text-align: center;
        }
        .a1{
            display: inline-block;
            margin-top: 20px;
            margin-left: 20px;
        }
        .a2{
            font-size: 18px;
            color: #9b9b9b;
        }
    </style>
</head>
<body>
    <div class="div1">
        <li class="li1"><img src="./QQ截图20240714135014.png" width="35px" height="35px">樱花动漫</li>
        <li>首页</li>
        <li>APP下载</li>
        <li>新旧番剧</li>
        <li>欧美动漫</li>
        <li>留言</li>
        <li>最新</li>
        <li>全部</li>
		<li class="li2"></li>
		<svg t="1720937717341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21251" width="32" height="32"><path d="M879.358227 793.020348 743.99119 666.456814c37.216623-53.892421 59.010999-119.123075 59.010999-189.418071 0-185.131441-151.051251-335.217714-337.361541-335.217714-186.308243 0-337.361541 150.086274-337.361541 335.217714s151.053298 335.217714 337.361541 335.217714c78.106916 0 150.007479-26.38902 207.188806-70.668503l135.423319 126.581953c20.843724 19.507286 53.717436 18.525935 73.355705-2.223644C901.273353 845.182358 900.256186 812.550147 879.358227 793.020348zM206.295971 477.038744c0-142.531204 116.115578-258.057357 259.344676-258.057357s259.343653 115.527177 259.343653 258.057357c0 142.518924-116.115578 258.057357-259.343653 258.057357S206.295971 619.557668 206.295971 477.038744z" fill="#ffffff" p-id="21252"></path></svg>
		<li class="li3"></li>
		<svg t="1720937183628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4893" id="mx_n_1720937183629" width="32" height="32"><path d="M512.736 992a483.648 483.648 0 0 1-164.672-28.8 36.88 36.88 0 1 1 25.104-69.36 407.456 407.456 0 1 0-184.608-136.512A36.912 36.912 0 0 1 129.488 801.6a473.424 473.424 0 0 1-97.472-290A480 480 0 1 1 512.736 992z" fill="#ffffff" p-id="4894"></path><path d="M685.6 638.592a32 32 0 0 1-14.032-2.96l-178.048-73.888a36.8 36.8 0 0 1-22.912-34.016V236.672a36.944 36.944 0 1 1 73.888 0v266.72l155.2 64.272a36.336 36.336 0 0 1 19.952 48 37.616 37.616 0 0 1-34.048 22.928z" fill="#ffffff" p-id="4895"></path></svg>
		<li class="li4"></li>
		<svg t="1720937223183" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6008" width="32" height="32"><path d="M685 472.2v-328c0-6.6-5.4-12-12-12H352.1c-6.6 0-12 5.4-12 12v189.6c0 3.3-2.7 6-6 6H76.2c-6.6 0-12 5.4-12 12v596.5c0 6.6 5.4 12 12 12H949c6.6 0 12-5.4 12-12V490.2c0-6.6-5.4-12-12-12H691c-3.3 0-6-2.7-6-6z m-556.8 418V409.8c0-3.3 2.7-6 6-6h199.9c3.3 0 6 2.7 6 6v480.5c0 3.3-2.7 6-6 6H134.2c-3.3-0.1-6-2.8-6-6.1z m282.4 6c-3.3 0-6-2.7-6-6V339.8h-0.5V202.1c0-3.3 2.7-6 6-6H615c3.3 0 6 2.7 6 6v688.1c0 3.3-2.7 6-6 6H410.6z m480.4 0H691c-3.3 0-6-2.7-6-6v-342c0-3.3 2.7-6 6-6h200c3.3 0 6 2.7 6 6v342.1c0 3.2-2.7 5.9-6 5.9z" p-id="6009" fill="#ffffff"></path><path d="M472.9 259.8v37.7l32.8-28.5v115.8H541V231.3h-35.3zM264.4 521c12.3-12.9 19-21.6 19-37.7 0-28.9-20.7-46.3-49.1-46.3-26.7 0-49.6 16.6-49.6 46.8H220c0-11.9 7.8-14.9 14.2-14.9 9.1 0 13.8 5.8 13.8 14.2 0 6.5-2.2 10.3-7.8 16.4l-55.6 60.3v31.9h98.7v-31.9h-55.6l36.7-38.8zM791.8 607.8c7.3 0 14 5 14 14.7 0 6.9-4.1 14.4-14.7 14.4h-5v30.6h5c9.5 0 16.4 6.9 16.4 16.2 0 11-6.5 16.4-15.7 16.4-8.8 0-15.7-5.4-15.7-16.2h-35.3c0 34.5 25.6 48.1 51.1 48.1 26.9 0 51.1-15.1 51.1-47.2 0-18.3-9.3-27.6-17.7-33.4 7.8-5 15.9-13.1 15.9-30 0-26.5-20.9-45.5-49.4-45.5-27.4 0-49.4 17.5-49.4 46.3h35.3c0.1-9.2 6.7-14.4 14.1-14.4z" p-id="6010" fill="#ffffff"></path></svg>
		<li class="li5"></li>
		<svg t="1720937315314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8271" width="48" height="48"><path d="M515.541449 7.082899c-280.359429 0-508.458551 228.120391-508.458551 508.458551s228.120391 508.458551 508.458551 508.458551 508.458551-228.120391 508.458551-508.458551S795.900879 7.082899 515.541449 7.082899zM515.541449 981.864196c-257.132626 0-466.301477-209.190121-466.301477-466.322747 0-257.132626 209.168851-466.322747 466.301477-466.322747s466.301477 209.190121 466.301477 466.322747S772.674075 981.864196 515.541449 981.864196zM614.574414 524.177056 614.574414 524.177056c47.751075-31.96876 79.230625-86.398604 79.230625-148.187857 0-98.437405-79.804915-178.24232-178.24232-178.24232-98.437405 0-178.24232 79.804915-178.24232 178.24232 0 61.810523 31.479551 116.219097 79.251895 148.187857-100.266622 39.519598-171.244501 137.170014-171.244501 251.453545 0 0.23397 0 0.446669 0.02127 0.659369 0 0.04254-0.02127 0.10635-0.02127 0.14889 0 15.612155 12.65563 28.246516 28.267786 28.246516 15.590885 0 21.886796-12.63436 21.886796-28.246516 0-0.340319-0.08508-0.659369-0.10635-1.020958 0.10635-118.005774 102.159649-219.995264 220.207964-219.995264 118.112124 0 220.207964 102.095839 220.207964 220.207964 0 0.14889-1.467628 29.054774 21.971875 29.054774 15.505806 0 28.076356-12.57055 28.076356-28.055086 0-0.06381-0.02127-0.12762-0.02127-0.2127 0-0.25524 0.02127-0.510479 0.02127-0.786989C785.797645 661.34707 714.798496 563.696654 614.574414 524.177056zM515.541449 510.734437c-74.402343 0-134.723968-60.321625-134.723968-134.723968 0-74.423613 60.321625-134.723968 134.723968-134.723968 74.423613 0 134.723968 60.321625 134.723968 134.723968S589.943792 510.734437 515.541449 510.734437z" fill="#ffffff" p-id="8272"></path></svg>
    </div>
    <div class="div2">
           <a class="a1">新旧番剧</a>
           <a class="a2"><svg t="1721046037714" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6681" width="16" height="16"><path d="M557.065419 1018.881024 399.503331 861.421316C396.227187 854.869026 394.589114 849.954809 394.589114 846.576285L394.589114 420.882224 5.751682 34.5019c-6.55229-8.190362-7.371326-15.561688-2.457109-22.113977C6.570718 4.095181 12.303971 0 20.494333 0L965.55972 0c8.190362 0 13.923615 4.095181 17.19976 12.285543 4.914217 6.55229 4.095181 13.923615-2.457109 22.113977L591.464939 420.882224l0 583.256149c0 8.292741-4.095181 13.923615-12.285543 17.19976C577.541324 1022.976205 575.084215 1023.795241 571.80807 1023.795241 568.531926 1023.795241 563.617708 1022.259548 557.065419 1018.881024zM434.005231 839.204959l118.145971 118.145971L552.151202 413.408518c0-3.276145 1.638072-8.190362 4.914217-14.742651l361.809238-359.35213L67.281776 39.313737l361.809238 359.35213c3.276145 6.55229 4.914217 11.466507 4.914217 14.742651L434.005231 839.204959z" p-id="6682"></path></svg>筛选</a>
    </div>
    <div class="box">
        <ul>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://img.3dmgame.com/uploads/images/news/20240411/1712836202_529878.png" alt="">
                <div class="dm2">GIRLS BAND CRY</div>
            </li>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://img2.baidu.com/it/u=1723062920,3345964052&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=712" alt="">
                <div class="dm2">夜晚的水母不会游泳</div>
            </li>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://img1.baidu.com/it/u=1281122382,468210132&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=707" alt="">
                <div class="dm2">神之塔</div>
            </li>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://i0.hdslb.com/bfs/bangumi/image/b212f52c35a77ad4b751997e320d24d01d9a45ce.png@450w_600h.webp" alt="">
                <div class="dm2">亚托莉-我挚爱的时光</div>
            </li>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://img0.baidu.com/it/u=3652343022,2130543522&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=707" alt="">
                <div class="dm2">鹿乃子乃子虎视眈眈</div>
            </li>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://img0.baidu.com/it/u=100434595,630673391&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=756" alt="">
                <div class="dm2">我独自升级</div>
            </li>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://img5.mtime.cn/pi/2020/05/14/114627.77676799_1000X1000.jpg" alt="">
                <div class="dm2">命运之夜无限剑制</div>
            </li>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://img1.baidu.com/it/u=3020652502,845263290&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=707" alt="">
                <div class="dm2">葬送的芙莉莲</div>
            </li>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://imgs.aixifan.com/newUpload/28729145_f4ef258cb9754474ab88832e4e8014d9.jpg" alt="">
                <div class="dm2">86~不存在的战区</div>
            </li>
            <li class="li6">
                <img class="dm1" width="210px" height="300px" src="https://img0.baidu.com/it/u=472679412,3615617852&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=709" alt="">
                <div class="dm2">游戏人生zero</div>
            </li>
        </ul>
    </div>
</body>
</html>

运行截图