学前端已经有一段时间了,也从刚开始的不理解以及只是比葫芦画瓢变得开始有自己的想法,逐渐理解,逐渐主动。
就先说HTML与CSS吧!给我的感觉是,HTML给出要有的内容,而CSS就进行装饰,进行设计。刚开始写的时候我是选择写在一个文件里,不过确实也可以,用上<style>,不过发现,当东西多的时候,这样就比较麻烦,写的东西也不好找。现在就是把它们分开在两个文件里。
当然,要想装饰,当然也要一一对应,分先后,就像装修房子一样,不可能一步到位,总有要先做这个,先做那个。我比较喜欢的方式是一次解决一部分,同时,也有很多工作都是类似的,如果发现的话,会省很多力,不同的内容要有不同的工具,但最终要什么就给什么,比如要让图片居中,就对图片进行局中的操作,从效果出发去找所需要做的,而不是 从毫无头绪的那一边出发。
接下来分享一下我的注册页面(非完全原创,有参考)。 泡泡是动态的,
代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="box">
<h2>Login</h2>
<div class="input-box">
<label>账号</label>
<input type="text"/>
</div>
<div class="input-box">
<label>密码</label>
<input type="password"/>
</div>
<div class="btn-box">
<a href="#">忘记密码?</a>
<div>
<button>登录</button>
<button>注册</button>
</div>
</div>
<div class="wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background: url(bg.jpg) no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 350px;
height: 350px;
border-top: 1px solid rgba(255,255,255,0.5);
border-left: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(255,255,255,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(10px);
background: rgba(50,50,50,0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.box > h2 {
color: rgba(255,255,255,0.9);
margin-bottom: 30px;
}
.box .input-box {
display: flex;
flex-direction: column;
box-sizing: border-box;
margin-bottom: 10px;
}
.box .input-box label {
font-size: 13px;
color: rgba(255,255,255,0.9);
margin-bottom: 5px;
}
.box .input-box input {
letter-spacing: 1px;
font-size: 14px;
box-sizing: border-box;
width: 250px;
height: 35px;
border-radius: 5px;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(255,255,255,0.2);
outline: none;
padding: 0 12px;
color: rgba(255,255,255,0.9);
transition: 0.2s;
}
.box .input-box input:focus {
border: 1px solid rgba(255,255,255,0.8);
}
.box .btn-box {
width: 250px;
display: flex;
flex-direction: column;
align-items: start;
}
.box .btn-box > a {
outline: none;
display: block;
width: 250px;
text-align: end;
text-decoration: none;
font-size: 13px;
color: rgba(255,255,255,0.9);
}
.box .btn-box > a:hover {
color: rgb(70, 61, 152);
}
.box .btn-box > div {
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.box .btn-box > div > button {
outline: none;
margin-top: 10px;
display: block;
font-size: 14px;
border-radius: 5px;
transition: 0.2s;
}
.box .btn-box > div > button:nth-of-type(1) {
width: 120px;
height: 35px;
color: rgba(255,255,255,0.9);
border: 1px solid rgba(231, 236, 238, 0.7);
background: rgba(21, 34, 228, 0.5);
}
.box .btn-box > div > button:nth-of-type(2) {
width: 120px;
height: 35px;
margin-left: 10px;
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(207, 203, 210, 0.7);
background: rgba(22, 33, 199, 0.5);
}
.box .btn-box > div > button:hover {
border: 1px solid rgba(131, 75, 177, 0.7);
background: rgba(19, 31, 202, 0.5);
}
.wrap ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -20;
}
.wrap ul li {
list-style-type: none;
display: block;
position: absolute;
bottom: -120px;
width: 15px;
height: 15px;
z-index: -8;
border-radius: 50%;
background-color:rgba(255, 255, 255, 0.2);
animotion: square 25s infinite;
-webkit-animation: square 25s infinite;
}
.wrap ul li:nth-child(1) {
left: 0;
animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.wrap ul li:nth-child(2) {
width: 40px;
height: 40px;
left: 10%;
animation-duration: 15s;
-moz-animation-duration: 15s;
-o-animation-duration: 15s;
-webkit-animation-duration: 11s;
}
.wrap ul li:nth-child(3) {
left: 20%;
width: 25px;
height: 25px;
animation-duration: 12s;
-moz-animation-duration: 12s;
-o-animation-duration: 12s;
-webkit-animation-duration: 12s;
}
.wrap ul li:nth-child(4) {
width: 50px;
height: 50px;
left: 30%;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
animation-duration: 12s;
-moz-animation-duration: 12s;
-o-animation-duration: 12s;
-webkit-animation-duration: 12s;
}
.wrap ul li:nth-child(5) {
width: 60px;
height: 60px;
left: 40%;
animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.wrap ul li:nth-child(6) {
width: 75px;
height: 75px;
left: 50%;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
animation-delay: 7s;
}
.wrap ul li:nth-child(7) {
left: 60%;
width: 30px;
height: 30px;
animation-duration: 8s;
-moz-animation-duration: 8s;
-o-animation-duration: 8s;
-webkit-animation-duration: 8s;
}
.wrap ul li:nth-child(8) {
width: 90px;
height: 90px;
left: 70%;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.wrap ul li:nth-child(9) {
width: 50px;
height: 50px;
left: 80%;
animation-duration: 20s;
-moz-animation-duration: 20s;
-o-animation-duration: 20s;
-webkit-animation-duration: 20s;
}
.wrap ul li:nth-child(10) {
width: 75px;
height: 75px;
left: 90%;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
animation-duration: 30s;
-moz-animation-duration: 30s;
-o-animation-duration: 30s;
-webkit-animation-duration: 30s;
}
@keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
100% {
bottom: 400px;
-webkit-transform: translateY(-500);
transform: translateY(-500)
}
}
@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
100% {
bottom: 400px;
-webkit-transform: translateY(-500);
transform: translateY(-500)
}
}