html+css制作简单百度登录界面

最新推荐文章于 2023-06-10 16:09:49 发布

原创最新推荐文章于 2023-06-10 16:09:49 发布 · 6.5k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

web前端专栏收录该内容

3 篇文章

订阅专栏

这篇博客详细介绍了如何利用HTML和CSS技术，一步步构建一个仿百度风格的登录界面。内容涵盖HTML基本结构的搭建，CSS样式的设计，以及如何通过CSS实现布局和美化，达到与百度登录页面类似的视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
        <div class="box">
         	<label><strong>用户名</strong></label>
         	<div class="box1">
             	<input type="text" placeholder="  请设置用户名">
         	</div>
         	<br/>
         	<br/>
         <label><strong>手机号</strong></label>
         <div class="box2">
             <input type="text" placeholder="  可用于登录和找回密码">
          </div>
         <br/>
         <br/>
         <label><strong>&nbsp;&nbsp;&nbsp;密码&nbsp;</strong></label>
         <div class="box3">
         	 <input type="password" placeholder="  密码">
         </div>
         <br/>
         <br/>
        <label><strong>验证码</strong></label>
         <div class="box4">
             <input id="inp" type="text" placeholder="  请输入验证码"><input id="inp1" type="button" value="获取短信验证码">
         </div>
         <br/>
         <br/>
         <div class="box5">
         	<input type="checkbox" id="inp2"><label id="id1">&nbsp;&nbsp;阅读并接受<span>《百度用户协议》</span>及<span>《百度隐私权保护声明》</span></label>
         </div>
         <div class="box6">
         	<input type="button" id="inp3" value="注册">
         </div>
     </div>
</body>
</html>

*{
    		padding: 0;
    		margin: 0;
    	}
    	body{
    		border:solid 1px #dddddd;
    		width:500px;
    		height: 500px;
    		background-color:#ffffff;
    		margin: 0 auto; /*水平居中*/
    		margin-top: 200px;
    	}
    	.box{
    		/*border: solid 1px red;*/
    		text-align: center;
    		margin-top:80px;
            position: relative;
             top: 50%;/*偏移*/
            margin-top: -180px;
    	}
    	.box1,.box2,.box3,.box4,.box5{
    		position:relative;
    		display:inline;
    	}
    	.box5{
    		/*border: solid 1px red;*/
    		width: 350px;
    		height: 40px;
    	}
    	label{
    		color: #666666;
			font-size:15px;
    	}
    	input{
			width: 350px;
			height: 40px;
			margin-left: 12px;
		}
		#inp{
			width: 180px;
			height: 40px;
			margin-right:1px;
		}
		#inp1{
			width: 151px;
			height: 40px;
			background-color: #f7f7f7;
			color: #666666;
		}
		
		#inp2{
			width: 12px;
			vertical-align:middle;
			margin-left:56px;	
		}
		#inp3{
			width: 354px;
			height: 52px;
			background-color: #3f89ec;
			color: white;
			font-size: 18px;
			margin-left:54px;
		}
		label{
			font-size: 14px;
			vertical-align:middle;
		}
		span{
			color: #1b66c7;		
		}
		input::-webkit-input-placeholder{
			font-size: 15px;
		}
		#id1{
			font-size: 12px;
		}

在这里插入图片描述