今天![
今天小编学习了HTML的三中选择器,基本选择器(标签,id,class),其他选择器,伪类选择武器(用在超链接上)
今天小编实现了一个 登录的界面:
先上图:
上以个比较骚的图:
代码实现 很简单:
下面直接上代码:
下面时第一张的HTML
并未用 css外部链接, 用的时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录提交</title>
<style>
.div1{
width: 400px;
height: 500px;
border: palevioletred dotted 5px;
/*border-radius: 10%;*/
border-color: bisque;
background-image: url("../image/美女.jpeg");
background-position: right;
margin: auto;
border-radius: 5%;
}
.p1{
width: 100px;
height: 40px;
border: 1px blue solid;
background-image: url("../image/孙悟空.jpg");
background-position-x: 100px;
background-position-y: 40px;
background-position: top;
}
a{
writing-mode: rl-bt;
color: blue;
float: right;
text-align: right;
text-decoration: none;
}
a:hover{
font-size: 20px;
}
.p2{
position: center;
text-align: center;
}
button:hover{
background-color: bisque;
}
button{
width: 400px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1">
<span>请注册</span>   
<a href="作业2.1.html" >立即登录</a><br><br>
<input type="text" placeholder="请输入手机号" size="45" style="height: 30px"><br><br>
<input type="password" placeholder="请输入短信验证码" size="30" style="height: 30px"> 
<input type="button" value="发送验证码" size="45" style="height: 30px"><br><br>
<input type="text" placeholder="请输入用户名" size="45" style="height: 30px"><br><br>
<input type="password" placeholder="请输入密码" size="45" style="height: 30px"><br><br>
<input type="password" placeholder="请再次输入密码" size="45" style="height: 30px"><br><br>
<input type="password" placeholder="请输入图形验证码" size="30" style="height: 30px">
<p class="p1"></p>
<p class="p2">
<button type="submit" style="color: blueviolet;font-size: 30px">立即注册</button>
</p>
</div>
</body>
</html>
下面附上第二张的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
div{
width: 400px;
height: 250px;
border: 5px dotted palevioletred;
/*border-radius: 10%;*/
border-color: bisque;
background-image: url("../image/美女2.jpeg");
background-position: right;
margin: auto;
border-radius: 5%;
}
a{
color: blue;
float: right;
text-decoration: none;
}
a:hover{
font-size: 20px;
}
button:hover{
background-color: bisque;
}
.spn{
float: right;
color: palevioletred;
}
p{
text-align: center;
}
button{
height: 50px; width: 400px;color: blue;
/*border: 1px solid blueviolet;*/
font-size: 20px;
text-align: center;
position: center;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<span>请登录</span>
<a href="作业2.html" >立即注册</a><br><br>
<input type="text" placeholder="请输入手机号" size="45" style="height: 30px"><br><br>
<input type="password" placeholder="请输入密码" size="45" style="height: 30px"><br><br>
<input type="radio" size="20" value="hot-login">七天之内自动登录
<span class="spn" style="size: 20px">忘记密码?</span>
<p><button type="submit" >登录</button></p>
</div>
</body>
</html>
今天小编的分享就到这里,如果有错误之处还请指正😁😁😁😁😁