css钉钉网页注册

最新推荐文章于 2024-11-08 16:59:14 发布

betterIatethanne

最新推荐文章于 2024-11-08 16:59:14 发布

阅读量104

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/betterIatethanne/article/details/130690879

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>钉钉注册</title>
   <link rel="stylesheet" href="css/dingding2.css">
   </head>
   <body>
       <div class="head">
           <div class="head_center">
               <img src="img/li.png" alt="">
           </div>
       </div>
   <div class="center">
       <div class="center_section">
           <form action="#" method="post">
               <h1>欢迎注册钉钉</h1>
               <select name="sj" disabled>
                   <option>+86</option>
                   <option>+87</option>
               </select>

               <input type="tel" name="dh" placeholder="请在此输入手机号"><br />
                   <input type="checkbox" name="dx" value="true">我已阅读并同意
                   <a href="#">钉钉公约</a> 、
                   <a href="#">钉钉服务协议</a>、
                   <a href="#">钉钉组织协议</a><br />
               <input type="submit" value="注册" >
           </form>
       </div>
       <img src="img/al.png" alt="">
   </div>
   <div class="footer">
       <div class="footer_center">
           <img src="img/a.png" alt="">
           <ul>
               <li><a href="#">钉钉官网</a></li>
               <li>|</li>
               <li><a href="#">使用手册</a></li>
               <li>|</li>
               <li><a href="#">下载钉钉</a></li>
           </ul>
       </div>
   </div>
   </body>
</html>

/* 头部 */
.head{
	width: 100%;
	height: 320px;
	 background-color: rgb(0, 55, 177);
}
/* 头部中间内容 */
.head_center{
	width:1038px;
	height: 320px;
	margin: 0 auto;
}
/* 中间图片 */
.head_center img{
	width:1038px;
	height: 320px;
}
.center{
	width:100%;
	min-height:338.09px;
	background-color:#FFF;/* 中间底部的大颜色 */
}
.center_section{
	height:338.09px;
	width: 500px;
	margin: 0 auto;
	padding: 44px 0 60px;
	/* background-color:red;/* 中间小部分颜色居中 */ */
}
.center_input select{
	height:40px; /* 高度 */
	width:60px;/* 宽度 */
	background-color: #f5f5f5;/* +86的颜色 */
	font-size: 16px;/* +86字体的大小 */
	padding-left: 10px;/* 左边内边距 */
	border: 1px solid rgb(118,118,118,0.3);/* 边框 */
	border-radius: 3px 0px 0px 3px;/* 边框圆角 */
	border-right-width: 0px;/* 边框圆角宽度 */
}
.center_section input[type=tel]{
	height:36.8px;/* 高度 */
	width: 428px;/* 宽度 */
	position: relative;/* 相对定位 */
	left:-5px;/* 左 */
	top: -1px;/* 上 */
	border: 1px solid rgb(118,118,118,0.3);/* 边框 大小 实线 颜色 */
	border-radius: 0px 3px 3px 0px;/* 边框圆角 */
}
.center_section div{
	margin: 24px 0px;/* 不懂 */
	color:rgba(0,0,0,.65)/* 字体颜色 */
}
.center_section div a{
	text-decoration: none;/* 去除下划线 */
	font-size: 14px;/* 里面字体的大小 */
	color:#1890ff;/* 字体的颜色 */
}
.center_section input[type=submit]{
	height:40px;/* 高度 */
	width:100% ;/* 宽度 */
	background-color: #40a9ff;/* 背景颜色 注册的背景颜色 */
	color: #fff;/* 字体颜色 */
	border: 1px solid #40a9ff;/* 边框 大小 实线 颜色 */
	border-radius: 5px;/* 边框圆角 */
}
.center a img{
	position: fixed;/* 固定定位 */
	right: 30px;/* 距离右边25px */
	top:400px;/* 距离上边400px */
	/* border-radius:50%;/* 变圆 */ */
}
.footer{
	width:100%;
    height: 68px;
	background-color: rgba(0,0,0,.5);
}
.footer_center{
	width:650px;
	height:68px;
	margin: 0 auto;
	background-color:  rgba(0,0,0,0);
}
.footer_center img{
	float: left;
	height: 30px;
	margin-top: 19px;
}
.footer_center ul{
	float: right;
	margin: 0 ;
	list-style: none;

}
.footer_center ul li{
	float: left; /* 向左浮动 */
	margin-left: 20px;
	text-decoration: none;
	color: #fff;
	line-height: 68px;/* 不懂 */
	font-size: 14px;
}
.footer_center ul li a{
	color: #fff;
	text-decoration: none;
}
.footer_center ul li:last-child{
	padding: 7px;/* 内边距 */
	font-size: 18px;/* 字体大小 */
	border-radio:20px;/* 边框圆角 */
	background-color: #0089ff;/* 背景颜色 */
}