<!DOCTYPE HTML>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>pagethree</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
a herf{font-family: 幼圆;}
select{font-family: 幼圆;}
</style>
</head>
<body>
<nav class="meue">
<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508217043330&di=6dbe0c9b157c6df92
7daab9d49eb4956&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fae51f3deb48f8c54d9f2cc0830292df5e0fe7ff7.jpg"
weight="40" height="40">
</div>
<div>
<a herf="#"> 首页</a>
<a herf="#">图片</a>
<a herf="#">视频</a>
<a herf="#">地图</a>
<a herf="#">文章</a>
<a herf="#">新闻</a>
<a href="#">发现</a>
</div>
<div style="float: right"><a href=""> 注册</a>♡<a href=""> 登录</a></div>
<div style="float: right">
<input type="text" name="search" style="height:20px;width:300px">
<input type="button" value="搜索">
</div>
</nav>
<div class="login">
<div class="login-top">
<h1>LOGIN FORM</h1>
<form>
<input type="text" value="Username" onfocus="this.value = '';" onblur="if (this.value==''){ this.value = 'Username';}">
<input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value==''){ this.value = 'Password';}">
</form>
<div class="forgot">
<a href="#">forgot Password</a>
<input type="submit" value="Login" >
</div>
</div>
<div class="login-bottom">
<h3>New User <a href="#">Register</a> Here</h3>
</div>
</div>
<div class="copyright">
<p>Copyright ☺ All of the company</p>
</div>
</body>
</html
html,body,div,h2,h3,p,a,nav {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a{
text-decoration:none;
}
.txt-rt{
text-align:right;
}
.txt-lt{
text-align:left;
}
.txt-center{
text-align:center;
}
.pos-relative{
position:relative;
}
.pos-absolute{
position:absolute;
}
.vertical-base{
vertical-align:baseline;
}
.vertical-top{
vertical-align:top;
}
body {
background-color: lightcoral;
font-family: 'Roboto', sans-serif;
font-size: 100%;
}
.meue{
background-color: white;
height:40px;
}
.meue div{
float:left;
line-height:250%;
}
.meue div a{
font-family: 幼圆;
margin-right:18px;
}
.login {
padding: 120px 0px 30px 0px;
width: 35%;
margin: 0 auto;
}
.login-top {
background: #E1E1E1;
border-radius: 25px 25px 0px 0px;
-webkit-border-radius: 25px 25px 0px 0px;
-moz-border-radius: 25px 25px 0px 0px;
-o-border-radius: 25px 25px 0px 0px;
padding: 35px 60px;
}
.login-top h1 {
text-align: center;
font-size: 30px;
font-weight: 500;
color:lightsalmon;
margin: 0px 0px 20px 0px;
font-family: "Castellar";
}
.login-top input[type="text"] {
outline: none;
font-size: 15px;
font-weight: 500;
color: #818181;
padding: 15px 20px;
background: #CACACA;
border: 1px solid #ccc;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
margin: 0px 0px 12px 0px;
width: 88%;
-webkit-appearance: none;
}
.login-top input[type="password"] {
outline: none;
font-size: 15px;
font-weight: 500;
color: #818181;
padding: 15px 20px;
background: #ccc;
border: 1px solid #ccc;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
margin: 0px 0px 12px 0px;
width: 88%;
-webkit-appearance: none;
}
.forgot a {
font-size: 13px;
font-weight: 500;
color: lightsalmon;
display: inline-block;
border-right: 2px solid #AD4337;
padding: 0px 7px 0px 0px;
}
.forgot a:hover {
color: #818181;
}
.forgot input[type="submit"] {
background: lightsalmon;
color: #FFF;
font-size: 17px;
font-weight: 400;
padding: 8px 7px;
width: 20%;
display: inline-block;
cursor: pointer;
border-radius: 6px;
-webkit-border-radius: 19px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
margin: 0px 7px 0px 3px;
outline: none;
border: none;
}
.forgot input[type="submit"]:hover {
background: #818181;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.forgot {
text-align: right;
}
.login-bottom {
background: lightsalmon;
padding: 30px 65px;
border-radius: 0px 0px 25px 25px;
-webkit-border-radius: 0px 0px 25px 25px;
-moz-border-radius: 0px 0px 25px 25px;
-o-border-radius: 0px 0px 25px 25px;
text-align: right;
border-top: 2px solid #AD4337;
}
.login-bottom h3 {
font-size: 14px;
font-weight: 500;
color: #fff;
}
.login-bottom h3 a {
font-size: 25px;
font-weight: 500;
color: #fff;
}
.login-bottom h3 a:hover {
color: #696969;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.copyright {
padding: 100px 0px 0px 0px;
text-align: center;
}
.copyright p {
font-size: 15px;
font-weight: 400;
color:white;
}
