登入界面
话不多说了，直接上代码
<!DOCTYPE html>
<html>
<head>
<title>QQ登入界面</title>
<meta charset="utf-8">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<style type="text/css">
body{
background: red;
margin-top: 100px;
margin-left: 20px;
position: absolute;
}
/*--------------------body为整体属性--------------------------------- */
.大五角星{
width: 0;
height: 0;
border-top: 70px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
position: relative;
left: 50px; /*左右平移*/
top: 110px; /*上下平移*/
}
.大五角星:before{
content: "";
display: block;
width: 0;
height: 0;
border-top:60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
transform:rotate(75deg);
position: absolute;
left: -101px;
top:-62px;
}
.大五角星:after{
content: "";
display: block;
width: 0;
height: 0;
border-top: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
transform: rotate(-70deg);
position: absolute;
left: -105px;
top:-64px;
}
.小五角星1{
width: 0;
height: 0;
border-top: 30px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
position: relative;
left: 260px; /*左右平移*/
top: -120px; /*上下平移*/
transform: rotate(35deg); /*整体角度旋转*/
}
.小五角星1:before{
content: "";
display: block;
width: 0;
height: 0;
border-top: 25px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
transform:rotate(76deg);
position: absolute;
left: -48px;
top:-25px;
}
.小五角星1:after{
content: "";
display: block;
width: 0;
height: 0;
border-top: 25px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
transform: rotate(-71deg);
position: absolute;
left: -52px;
top:-25px;
}
.小五角星2{
width: 0;
height: 0;
border-top: 30px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
position: relative;
left: 335px; /*左右平移*/
top: -50px; /*上下平移*/
transform: rotate(55deg); /*整体角度旋转*/
}
.小五角星2:before{
content: "";
display: block;
width: 0;
height: 0;
border-top: 25px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
transform:rotate(76deg);
position: absolute;
left: -48px;
top:-25px;
}
.小五角星2:after{
content: "";
display: block;
width: 0;
height: 0;
border-top: 25px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
transform: rotate(-71deg);
position: absolute;
left: -52px;
top:-25px;
}
.小五角星3{
width: 0;
height: 0;
border-top: 30px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
position: relative;
left: 345px; /*左右平移*/
top: 45px; /*上下平移*/
transform: rotate(70deg); /*整体角度旋转*/
}
.小五角星3:before{
content: "";
display: block;
width: 0;
height: 0;
border-top: 25px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
transform:rotate(76deg);
position: absolute;
left: -48px;
top:-25px;
}
.小五角星3:after{
content: "";
display: block;
width: 0;
height: 0;
border-top: 25px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
transform: rotate(-71deg);
position: absolute;
left: -52px;
top:-25px;
}
.小五角星4{
width: 0;
height: 0;
border-top: 30px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
position: relative;
left: 245px; /*左右平移*/
top: 120px; /*上下平移*/
transform: rotate(100deg); /*整体角度旋转*/
}
.小五角星4:before{
content: "";
display: block;
width: 0;
height: 0;
border-top: 25px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
transform:rotate(76deg);
position: absolute;
left: -48px;
top:-25px;
}
.小五角星4:after{
content: "";
display: block;
width: 0;
height: 0;
border-top: 25px solid yellow;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
transform: rotate(-71deg);
position: absolute;
left: -52px;
top:-25px;
}
/*---------------------------------------------以上是五颗星星的属性------------------------------------------------------------------------*/
#QQlogo{
width: 60px;
height: 61px;
background: url(./img/QQ.jpg);
background-size: 100% 100%;
margin-left:50px;
}
#登入界面{
margin-left: 600px;
margin-top: -240px;
padding: 10px 60px; /* 内部与输入框和按钮的距离 */
background-color: white; /* 界面的背景颜色 */
width:220px;
height: 600px;
border-radius: 30px;
border: 15px solid black; /*手机外壳*/
text-align: center;
}
#登入界面 .输入框{
margin-top: 20px; /* 输入框顶部与QQlogo的间距 */
margin-left: -14px;
position: absolute;
}
#登入界面 .输入框 .输入字体{
margin-top: 10px; /* 输入框之间的距离 */
}
#登入界面.输入框 .输入字体 span{
color: black; /* 图标颜色 */
}
#登入界面 p{
font-size:45px;
color: black; /* QQ体颜色 */
margin-left:55px;
}
#登入界面 .输入框 .输入字体 input{
border: none; /* 删除输入框边框 */
padding: 15px 60px; /* 输入框内的宽高 */
border-bottom: 2px solid white; /* 输入框白色下划线 */
border-radius: 20px;
background-color: #d6c6af; /* 输入框透明 */
color: black; /* 输入字体的颜色 */
text-align: center;
}
#登入界面 .登入按钮{
font-weight: 900;
margin-top: 170px; /* 按钮顶部与输入框的距离 */
width: 50px;
height: 50px;
font-size: 30px;
color: white; /* 按钮字体颜色 */
border: none; /* 删除按钮边框 */
border-radius: 50px; /*按钮圆角边 */
background: blue; /* 按钮颜色 */
text-align: center;
animation: anniu 5s infinite;
animation-direction:alternate; /* 轮流变化*/
}
@keyframes anniu{
0% {background: #4facfe}
30% {background: #00f2fe}
60% {background: #89f7fe }
100% {background: #66a6ff}
} /*按钮颜色变化*/
#底部{
font-size: 14px;
width: 400px;
height: 15px;
color: black;
text-align: center;
word-spacing: 20px;
position: absolute;
left: 580px;
top: 550px;
}
/*--------------------------------------------------!!以上是手机界面的属性!!------------------------------------------ */
#头像{
margin-top: 4px; /*小头像的上下移动*/
margin-left: 8px; /*小头像的左右移动*/
width: 40px;
height: 40px;
border:none;
border-radius: 30px;
background-image: url(./img/htl.png);
background-size: 100% 100%;
position: absolute;
}
#按钮图标{
font-size: 26px;
color: white;
margin-top: -320px; /*按钮箭头的上下位置调动*/
margin-left: 774px; /*按钮箭头的左右位置调动*/
width: 20px;
height: 20px;
border: 0 solid;
border-radius: 20px;
position: absolute;
}
#眼睛图标{
font-size: 25px;
color: #75878a;
margin-top: 73px; /*眼睛图标的上下位置调动*/
margin-left: -110px; /*眼睛图标的左右位置调动*/
width: 20px;
height: 20px;
border: 0 solid;
border-radius: 20px;
position: absolute;
}
#x图标{
font-size: 15px;
color: #75878a;
margin-top: 81px; /*x图标的上下位置调动*/
margin-left: 100px; /*x图标的左右位置调动*/
width: 20px;
height: 20px;
border: 0 solid;
border-radius: 20px;
position: absolute;
}
#下图标{
font-size: 20px;
color: #75878a;
margin-top: 20px; /*下方向图标的上下位置调动*/
margin-left: 100px; /*下方向图标的左右位置调动*/
width: 20px;
height: 20px;
border: 0 solid;
border-radius: 20px;
position: absolute;
}
/*-----------------------------------------------以上是登入界面的装饰----------------------------------------------------*/
#挖孔屏{
width: 90px;
height: 30px;
background: black;
border: 0;
position: relative; /* 0000*/
border-radius: 51px;
border-style: solid;
margin-top: -7px; /*整体摄像头的上下移动*/
margin-left: -55px; /*整体摄像头的左右移动*/
}
#挖孔屏:before{
position: absolute;
width: 20px;
height: 20px;
border: 6px solid black;
border-radius: 15px;
background: #1e3c72;
content:'';
margin-top: -0.7px;
margin-left: 12px;
}
#挖孔屏:after{
position: absolute;
width: 20px;
height: 20px;
border: 6px solid black;
border-radius: 15px;
background: #1e3c72;
content:'';
margin-left: -43px;
margin-top: -0.7px;
}
#音量键{
width: 10px;
height: 130px;
border: 0px groove #a8c97f;
border-radius: 10px;
background: #a8c97f;
position: absolute;
margin-left: 299px; /*整个音量键的左右移动*/
margin-top: 50px; /*整个音量键的上下移动*/
}
#音量键:before{
content:'';
width: 10px;
height: 60px;
border: 0px groove #a8c97f;
background: #a8c97f;
border-radius: 10px;
position: absolute;
left: 1px; /*电源键的左右移动*/
top: 160px; /*电源键的上下移动*/
}
#音量键:after{ /*底部充电口*/
content:'';
width: 40px;
height: 11px;
border: 1px inset black;
background: black;
border-radius: 10px;
position: absolute;
left: -210px; /*充电口的左右移动*/
top: 550px; /*充电口的上下移动*/
}
#手机壳{
width:360px; /* 手机壳的宽度*/
height: 638px; /*手机壳的高度*/
position:absolute;
border-radius: 40px; /* 手机壳的边框*/
border: 15px solid #a8c97f; /*手机外壳样式*/
top: -56px;
left: 589.5px;
}
/*-------------------------------------以上是手机配件的属性------------------------------------------------ */
</style>
</head>
<body>
<!-- ............................... -->
<div id="lxy">
<div class="container">
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
<div class="meteor"></div>
</div>
</div>
<!-- ....................................................... -->
<audio autoplay>
<source src="./audio/2.mp3" type="audio/mpeg">
<embed height="50" width="100" src="./audio/2.mp3">
</audio>
<div>
<div class="大五角星"></div>
<div class="小五角星1"></div>
<div class="小五角星2"></div>
<div class="小五角星3"></div>
<div class="小五角星4"></div>
</div>
<!-- ------------------------------ 分割线---------------------------- -->
<div id="手机壳"></div>
<div id="登入界面">
<div id="挖孔屏"></div>
<div id="音量键"></div>
<div id="QQlogo"> <p>QQ</p></div>
<div class="输入框">
<span id="眼睛图标"> <i class="fa fa-eye-slash" aria-hidden="true"></i></span>
<span id="x图标"><i class="fa fa-times" aria-hidden="true"></i> </span>
<span id="下图标"><i class="fa fa-caret-down" aria-hidden="true"></i> </span>
<div class="输入字体">
<span id="头像"></span>
<input type="text" style="width: 135px" placeholder="QQ/电话号码" value="1524166065">
</div>
<div class="输入字体">
<input type="password" style="width: 135px" placeholder="密码" value="">
</div>
</div><a href="./web/子页.html">
<input class="登入按钮" type="button" >
</div>
<div id="按钮图标"><i class="fa fa-arrow-right" aria-hidden="true"></i></div></a>
<a href="./web/子页.html"><div id="底部" <p>忘记密码</a> 丨 用户注册</p><div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
