【UI设计+静态页面】ailiaili页面——仿bilibili页面(完整代码)

已于 2023-06-14 18:35:35 修改
阅读量1k 收藏 5
点赞数
分类专栏： html 文章标签： html
于 2023-04-20 17:36:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52078305/article/details/130271769
版权

1、登录页面：
在这里插入图片描述

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ailiaili登录页面</title>
		<link href="css/login.css"  rel="stylesheet" type="text/css"  />
	<script type="text/javascript" src="js/login.js" ></script>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<script>
	    $(function () {
        // 请将jQuery代码书写在这里 ...
        
//      alert('Hello,ailiaili!');
    });
	
</script>
	</head>
	<body>
		<div class="A">
		<div class="Bbox">
		<div class="login_box">
			<div class="context">
				<div class="box1">
				<h1>扫描二维码登录</h1>
				<div class="twod">
					<img src="img/二维码.png"/>
				</div>
				<p>请使用ailiaili客户端</p>
			</div>
			<div class="boxs"></div>
			<div class="box2">
				<h1><a id="pwds" onclick="logpwd()">密码登录</a> |<a id="msgs" onclick="logmsg()">短信登录</a> </h1>
				<form class="log_form" action="http://127.0.0.1:8088/logUser" method="post" id="loginform_pwd">
					<div class="input_sty">
						<label for="username">账号</label>
					<input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入账号"  />
					</div>
						<hr />
					<div class="input_sty">
						<label for="userpwd">密码</label>
					<input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入密码"  />
					</div><a href="index.html">忘记密码</a>
					<input class="btn" id="submit2" type="submit" value="登录"  onmouseover="over2()"  onmouseout="out2()"/>
					<input class="btn" id="submit1" value="注册" onclick="regs()" onmouseover="over1()"  onmouseout="out1()"/>
				</form>
				<form class="log_form" action="http://127.0.0.1:8088/logUser" method="post" id="loginform_msg">
					<div class="input_sty">
						<label for="username">手机号</label>
					<input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入手机号"  />
					</div>
						<hr />
					<div class="input_sty">
						<label for="userpwd">验证码</label>
					<input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入验证码"  />
					</div>
					<div id="msg_but" type="button" onclick="msgis()">点击发送验证码</div>
					<input class="btn" id="submit3" type="submit" value="登录" onmouseover="over2()"  onmouseout="out2()"/>
					<input class="btn" id="submit4"  value="注册" onclick="regs()" onmouseover="over1()"  onmouseout="out1()"/>
				</form>

				<div class="other">
					<p>其他方式登录</p>
				<div class="other_context"><img src="img/微博图标2-2.jpg" />
				<a class="a_sty" href="">微博登录</a>
				</div>
				<div class="other_context">
					<img  src="img/微信图标2-2.jpg"/>
					<a class="a_sty" href="">微信登录</a></div>
				<div class="other_context">
					<img src="img/qq图标2-2.jpg" />
					<a class="a_sty" href="">QQ登录</a></div>
				</div>
				<div class="ps">
					<p>未注册过<span>ailiaili</span>的手机号，我们将主动帮您注册账号</p>
					<p>登录或完成注册即代表您同意<span>用户协定和隐私政策</span></p>
				</div>
			</div>

			</div>
			
		</div>
		<div class="photo" >
				<img src="img/画板 1.png"  id="img1" />
				<img src="img/画板 2.png" id="img2"/>
			</div>
		<!--<div class="photo" id="img2">
				<img src="img/画板 1.png" id="img1" />
				<img src="img/画板 2.png" />
			</div>-->
			</div>
			
			<div id="regform" class="reg">
				<form class="res_form" action="http://127.0.0.1:8088/addUser" method="post" id="regform_msg">
					<div class="input_sty">
						<label for="username">账号</label>
					<input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入手机号"  />
					</div>
						<hr />
					<div class="input_sty">
						<label for="userpwd">密码</label>
					<input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入密码"  />
						<input class="btn" id="submit1" type="submit"  value="确定"/>
						<!--<button onclick="regx()">X</button>-->
						
				</form>
			</div>
			
	</div>
			<!--<button onclick="test()">sadfsadfgds</button>-->
	</body>
</html>

2、首页页面：
html代码：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ailiaili首页</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/index.js" ></script>

	</head>
	<body>
		<div class="head_sty">
			<nav>
				<div class="nav_1">
				<div class="nav1"><a>首页</a></div>
				<div class="nav1"><a>番剧</a></div>
				<div class="nav1"><a>直播</a></div>
				<div class="nav1"><a>游戏中心</a></div>
				<div class="nav1"><a>会员购</a></div>
				<div class="nav1"><a>漫画</a></div>
				<div class="nav1"><a>赛事</a></div>
				</div>
				<div class="nav_3">
					<a class="look"></a>
					<input />
				</div>
				<div class="nav_2">		
				<div class="nav2" id="logs" onclick="log()">登录</div>
				<div class="nav2" onclick="my()">空间</div>
				<div class="nav2">消息</div>
				<div class="nav2">动态</div>
				<div class="nav2">收藏</div>
				<div class="nav2" id="tougao">
					<img src="img/投稿图标.png" style="border-radius: 5px;" />
				</div>
				</div>
			</nav>
			<div class="logo">
				<img src="img/ailiaili_logo.png" />
			</div>
		</div>
		
		<div class="body_1">
			<div class="a1">
				<div id="a11_1" class="a11">
					<img class="a11s" src="img/动态图标.png" />
				</div>
				<div id="a11_2" class="a11">
					<img class="a11s" src="img/热门图标.png" />
				</div>
				<div id="a11_3"class="a11">
					<img class="a11s" src="img/频道图标.png" />
				</div>
				<p>动态</p>
				<p>&nbsp;&nbsp;热门</p>
				<p>&nbsp;&nbsp;&nbsp;频道</p>
			</div>
			<div id="a22" class="a2">
				
			</div>
			<div class="a3">
				<div class="a31">
					<div class="a31_1"><img src="img/1.png"/>专栏</div>
					<div class="a31_1"><img src="img/2.png" />活动</div>
					<div class="a31_1"><img src="img/3.png"/>社区</div>
				</div>
				<div class="a31">
					<div class="a31_1"><img src="img/4.png"/>直播</div>
					<div class="a31_1"><img src="img/5.png"/>课堂</div>
					<div class="a31_1"><img src="img/6.png"/>热榜</div>
				</div>
			</div>
		</div>
		<div class="body_2">
			<div class="lunbo">
				<img src="img/a1.png" style="border-radius: 25px;"/>
			</div>
			<div class="vido">
				
				<a href="video.html">
					<div class="video_boxs">
						<img class="video_boxs_img" src="img/s1.png" />
						<p>放到整个csgo圈子都是相当炸裂的存在！</p>
						<p>热心市民王大爷乀</p>
					</div>
				</a>
					<a href="">
					<div class="video_boxs">
						<img class="video_boxs_img" src="img/s2.png" />
						<p>让绫华大小姐穿上JK~这么可爱真是抱歉啦✧~</p>
						<p>卡卡Orange</p>
					</div>
				</a>		
				<a href="">
					<div class="video_boxs">
						<img class="video_boxs_img" src="img/s3.png" />
						<p>【B站首发】Lost (Alternate Reality Version) - Linkin Park 林肯公</p>
						<p>LinkinPark</p>
					</div>
				</a>		
				<a href="">
					<div class="video_boxs">
						<img class="video_boxs_img" src="img/s4.png" />
						<p>伊朗沙特为何复交？为什么在中国？美国怕了吗？</p>
						<p>小王Albert</p>
					</div>
				</a>
				
				
			</div>
			
		</div>
	</body>
</html>

3、视频页面：
html代码：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>视频页面</title>
		<link rel="stylesheet" href="css/video.css" />
	</head>
	<body>
		<div class="B">
			<div class="z_box">
			<h1>【Vox Akuma/熟】有用的英音知识增加了！Vox老师在线教学时态</h1>
			<br />
			<p>2023-03-19 12:32:33</p>
			<br />
			<div class="video_box">
				<img src="img/视频0.png" />
			</div>
			<div class="buts">
				<div class="but">
					<img src='img/点赞.png' />
				</div>
				<div class="but">
					<img src='img/投币.png' />
				</div>
				<div class="but">
					<img src="img/收藏.png" />
				</div>
				<div class="but">
					<img src="img/转发.png" />
				</div>
			</div>
			</div>
			<div class="y_box">
				<div class="y_boxs" id="b1">
					<div class="touxiang1">
						<img src="img/视频头像.png" />
					</div>
					<p class="p_name">Wuvvvv</p>
					<div class="gz">关注</div>
				</div>
				<div class="y_boxs" id="b2">
					弹幕列表
				</div>
				<div class="y_boxs">
					<div class="vidos">
						<img src="img/视频2.png" />
					</div>
					<p>【Vox Akuma/短切熟】一秒惹怒英国人</p>
					<br />
					<p>臭豆腐馅小汉堡</p>
				</div>
					<div class="y_boxs">
					<div class="vidos">
						<img src="img/视频1.png" />

					</div>
					<p>400岁老爹兼职被扒！！！点开看老爹在线劝学</p>
					<br />
					<p>鱼戏荷叶everywhere</p>
				</div>
				
				
			</div>
			
		</div>
	</body>
</html>

4、个人中心：
html代码：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人空间</title>
		<link rel="stylesheet" href="css/myself.css" />
	</head>
	<body>
		<!--<div class="mine" id="mine_back">
			<img src="img/vox.jpg" />
		</div>-->
		<div class="mine">
			<!--<div id="mine_back">
				<img id="mine_back" src="img/vox.jpg" />
			</div>-->
			<div class="touxiang">
				<img src="img/vox4.jpg" />
			</div>
			<div class="mine_context">
				<p class="u_name">宇宙超级无敌帅iii</p>
				<input placeholder="编辑个人签名" type="text" name="text" value="vox akuma" onfocus="if(this.value == 'name')this.value='';" onblur="if(this.value == '')this.value='name';" />
			</div>
		</div>
		<div class="dao">
			<div class="dao_context">动态</div>
			<div class="dao_context">收藏</div>
			<div class="dao_context">设置</div>
			<div class="dao_context" id="concert">关注</div>
			<div class="dao_context" id="fan">粉丝</div>
		</div>
		<div class="myself_context">
			<div class="left_context">
			<div class="touxiang">
				<img src="img/vox4.jpg" />
			</div>
				<p class="u_name">宇宙超级无敌帅iii</p>
				<div class="my_context">
					<img src="img/vox1.jpg" />
				</div>
				<!--<div class="my_context_but">
					<div></div>
				</div>-->
			</div>
			<div class="right_context">
				<p>个人资料</p>
				<button>修改</button>
				<hr />
				<ul>
					<li>UID</li>
					<li>生日</li>
				</ul>
			</div>
			
		</div>
		
	</body>
</html>

代码下载

齐天大圣12138
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
模仿bilibili登录页面
H3587005447的博客
10-08 2857
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>哔哩哔哩登录页面</title> <!--外部样式--> <link rel="stylesheet" href="哔哩哔哩样式.css"> </head> <body> <di.
高仿B站首页模板.zip
11-07
使用HTML5加CSS编写,B站首页模板。哔哩哔哩（bilibili）现为国内领先的年轻人文化社区，该网站于2009年6月26日创建，被粉丝们亲切的称为“B站”。
HTML5+CSS3实现哔哩哔哩首页（完整版）
m0_63512120的博客
03-22 5781
本篇文章用html和css实现了哔哩哔哩首页面，希望这篇文章能够大家带来帮助，同时该页面的源代码和图片素材放在了文章末尾，需要了可以自行提取！
仿哔哩哔哩（源码）.zip
06-06
仿哔哩哔哩（源码）
网页制作---简易版B站
SAKURAjinx的博客
06-01 1394
网页制作--B站
android开发游记：meterial design 使用circularReveal仿哔哩哔哩(bilibili)搜索框动画
liaoinstan的博客
04-19 1万+
一直觉得bilibili的安卓客户端做的很不错，所以自己在项目中都会有意识或无意识地去模仿，最近觉得它的搜索框弹出收回的效果体验挺不错的，于是研究了一下模仿着做了一个：（ps：模仿不是罪，罪过的是没有经过思考地抄袭）bilibili搜索框效果图：博主模仿版：实现原理：这里的波纹动画需要使用的ViewAnimationUtils库来实现，但是该库是5.0以后才引入的，所以无法满足低版本。但是不用担心，
【UI设计+静态页面】ailiaili登录页面——仿bilibili登录页面
weixin_52078305的博客
03-21 1031
咱就是说，属实是大怨种了，上个学期的前端作业没有连接后端，实验和大作业直接挂了，（f开头单词），就算某人编译原理考了93分有怎么样呢，就算操作系统实验有99分又怎么样呢，全白干！又被洗脑加入工作室！我只知道以前美好的日子一去不返了。要去图书馆，每天晚上来工作室，星期六七一没有课会在图书馆呆一整天，反正前端已经挂了哭哭。俺就摆，俺受够了，才不天天都在工科大楼待呢。用ai设计好图标和页面布局。
仿B站项目——(1)计划，前端工程
weixin_30896825的博客
03-10 1174
计划 现打算： 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站。 网站兼容手机浏览器端。 部分模块打算仿照SPA用js加载的方式实现。 数据结构要有方便配置的形式。(便于网站更新) 网站优化，目前打算用图片懒加载等方法。 最终结果要与B站90%相同，包括动画，互动等，不包括用户登录，视屏播放等(因为要服务器支持)。 ...
B站首页仿写
qq_64595930的博客
01-04 659
b站首页仿写
vue.js 仿哔哩哔哩的网站(低仿bilibili)
热门推荐
weixin_52014110的博客
05-02 1万+
仿哔哩哔哩的网页版（仅有首页和搜索页面） 线上地址：lovescode.top:8181 b站效果展示视频：https://www.bilibili.com/video/bv1564y1U71T 两个页面的效果展示： 点击图片中的内容，会跳转到官方b站的相应视频页面，由于网上没有视频的接口(人家赚钱的东西当然不能有啦????)，所以就没有进行接下来的制作了。 首页制作 用 element-ui 和 html 加 css 相结合的方式尽可能的还原哔哩哔哩页面...
超详细！模仿哔哩哔哩搭建静态网页
mohuanxiaoyuzhou的博客
05-04 4406
Web静态页面开发实战学习总结 一、构思与前期准备 灵感来源于csdn博客上看到的其他人开发的模仿官方网站的开发文档，同时鉴于自己喜欢二次元的风格。决定自主设计出一个模仿哔哩哔哩·的低配版哔哩哔哩网页。 素材准备：哔哩哔哩官网上或网页界面下载主站png,jpg,gif图片，参考哔哩哔哩某up教程获取主站svg界面图标，选取图标并进行重命名保存。 资源准备：哔哩哔哩网页源代码，csdn博客《哔哩哔哩网页仿写总结》 bootstrap框架下载并学习使用 基于H5 video开发的视频播放插件：supervide
ailiaili页面-仿bilibili页面代码
04-20
ailiaili页面-仿bilibili页面代码
基于小程序实现仿bilibili移动端应用页面程序设计源码
02-28
《微信小程序开发-B站》是以bilibili移动端网站为基础开发微信小程序版本，笔者喜欢的学习是愉快、轻松并能学到实战的东西，不知各位观友有没有一样的经历，就是一有问题不是先去Google/百度，而是先问自己好友里面...
基于小程序实现仿bilibili移动端应用页面程序设计源码分享
02-28
《微信小程序开发-B站》是以bilibili移动端网站为基础开发微信小程序版本，笔者喜欢的学习是愉快、轻松并能学到实战的东西，不知各位观友有没有一样的经历，就是一有问题不是先去Google/百度，而是先问自己好友里面...
仿B站页面源码.rar
07-05
B站（bilibili）现为国内领先的年轻人文化社区，该网站于2009年6月26日创建，被粉丝们亲切的称为“B站”。B站的特色是悬浮于视频上方的实时评论功能，爱好者称其为“弹幕”，这种独特的视频体验让基于互联网的弹幕...
基于SSM框架的高仿bilibili视频网站设计源码
最新发布
04-07
SSM框架视频网站：基于Java构建，包含158个文件，包括61个Java类文件、35个JSP页面、29个XML配置文件、14个PNG图像文件、8个JAR包文件、1个.classpath文件、1个.mymetadata文件、1个.project文件、1个Idea项目文件...
【前端】html 0基础练习题
weixin_52078305的博客
05-21 1487
1、问卷调查：下面是一个网页在浏览器上的效果，请制作一张一模一样的问卷调查网页。 要求： （1）大标题使用h3标签； （2）问卷调查题目使用h4标签 （3）前2个问题选项使用有序列表； （4）最后一个问题选项使用无序列表 添加链接描述 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>练习题</title> </head> <bod.
【javaweb+springboot】旅游网页面设计（主购物车功能）——前后端分离+服务端客户端增删改查（完整代码+文档）
weixin_52078305的博客
06-14 1158
用户进入登录页面，当输入账号和密码后点击登录按钮，若输入为空时，弹出提示窗口，否则将数据传入后端进行判断，判断成功后进入旅游页面，浏览商品信息后可点击加入购物车，如果购物车中已经有该商品订单，则购物车中该商品数量加1，改变商品总价，否则将商品信息加入购物车中，商品数量为1，商品总价等于商品单价，最后计算所有商品的价格。c.商品减少：对商品进行遍历，当点击减号时，获取下一个兄弟元素节点，即商品数量，判断商品数量是否小于1，如果商品小于1时，商品数量无法改变，否则使得商品数量的值减少后输出。
blender 导入vox
07-29
Blender是一款功能强大的3D建模和动画软件，可以导入和处理各种不同的文件格式。其中，导入vox格式是Blender的一项特殊功能。 首先，vox是一种常见的3D体素数据格式，主要用于表示物体的三维结构。在Blender中，我们可以通过使用适当的插件或脚本来导入vox文件。 要导入vox文件到Blender中，我们可以按照以下步骤进行操作： 1. 在Blender中启动软件并打开一个新的或现有的项目。 2. 在左上角的"文件"菜单中，选择"导入"，然后选择"Vox（.vox）"选项。 3. 浏览电脑上存储vox文件的文件夹，并选择要导入的文件。 4. 在导入窗口中，您可以选择调整一些选项，如对象比例、对象大小等，以适应您的项目需求。调整完成后，点击"导入"按钮。 在导入完成后，vox文件将在Blender中显示为一个或多个3D对象。您可以使用Blender的建模和动画工具对这些对象进行编辑和处理，以实现您的设计目标。 需要注意的是，Blender的vox文件导入功能可能需要额外的插件或脚本才能正常工作。您可以在Blender社区或相关网站上找到适用于您使用的Blender版本的合适插件或脚本。 总之，Blender可以方便地导入vox格式的3D模型文件，并通过其强大的功能进行编辑和处理。无论是进行建模、动画制作还是其他相关项目，这个功能都能提供更多的可能性和灵活性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值