js+html+css制作网站标准登录界面

浅浅的花香味﹌ 2023-06-12 12:27 2阅读 0赞

## js+html+css制作网站标准登录界面 ##

首先来看css代码：

这里的input\[type=“checkbox”\]，我想设置边框，但是没有效果，加了dispaly：block也没有用，input\[type=“checkbox”\]::before与input\[type=“checkbox”\]:checked::before不知道是否被废弃，添加之后也无法实现想要的效果，读者可自行百度解决，本人能力有限，暂不解决！

html代码：

<div class="box">
    		<div class="top">
    			<ul id="ul1">
    			<li class="hover" onMouseOver="setTab(1,0)">快速登录</li>
    		    <li onMouseOver="setTab(1,1)">账号密码登录</li>
    			</ul></div>
    		<div class="buttom" id="but1">
    				<div class="block">
    				<dt class="nr">
    					<br><br>
    			<input type="text" name="" value="" class="ipt1" size="30" placeholder="支持学号登录"><br><br>
    			<input type="password" name="" value="" class="ipt2" size="30" placeholder="密码"><br><br><br><br>
    			<input type="submit" name="submit" value="登  录" class="ipt4"><br><br>
    				</dt></div>
    				<div>
    				<dt class="nr">
    					<br><br>
    			<input type="text" name="" value="" class="ipt1" placeholder="支持qq号/邮箱/手机号登录"><br><br>
    			<input type="password" name="" value="" class="ipt2" placeholder="密码"><br><br>
    			<input type="checkbox" name="" value="" class="ipt3">  下次自动登录<br><br>
    			<input type="submit" name="submit" value="登  录" class="ipt4"><br><br>
    				</dt></div>
    		</div>
    		<div class="footer">
    			<span class="sp3">
    			<a href="">忘记密码？</a>  
    			<a href="">注册新账号</a>  
    			<a href="">意见反馈</a>
    		</span>
    		</div>
    	</div>

js代码：这里用到的是之前要实现的一个效果——悬浮标题显示不同的内容，故html中的id命名是有要求要相对应的，如有疑问，  
[可点击以下链接：][Link 1]

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70 1]

[Link 1]: https://blog.csdn.net/qq_44760912/article/details/102835579
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191113083612987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191113083536903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzYwOTEy,size_16,color_FFFFFF,t_70