前言
在接下来的日子要学习前端知识体系,2023继续保持知识拓展。
请教了公司前辈,学习前端要循序渐进,先学Sass基础 Sass 教程
学习Sass之前要有以下的基础
学习完Sass自己跟着练习了一个登录页面
实现效果如下
Html代码
<!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">
<!-- 加载的 -->
<link rel="stylesheet" href="css/main.css">
<title>登录</title>
</head>
<body>
<div class="card">
<h3>登录之后更加精彩</h3>
<form>
<input type="email" id="email" name="email" placeholder="邮箱">
<input type="password" id="password" name="password" placeholder="密码">
<input type="submit" value="登录">
</form>
<ul>
<li><a href="#">注册</a></li>
<li><a href="#">忘记密码</a></li>
</ul>
</div>
</body>
</html>
Sass代码
$main-color: #2ecc71;
$second-color: #27ae60;
$line-color: #ddd;
$dark-color: #333;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 100vh;
background: url(../img/bg.png) no-repeat center center/cover;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: $main-color;
opacity: 0.5;
}
.card {
width: 400px;
padding: 2rem 3rem;
background: #fff;
h3 {
color: $second-color;
margin-bottom: 1rem;
font-weight: 400;
}
form input {
display: block;
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid $line-color;
&:last-child {
background: $second-color;
color: #fff;
transition: all 0.5s;
&:hover {
background: $main-color;
}
}
&:focus {
outline: 1px solid $main-color;
}
}
ul {
list-style: none;
display: flex;
justify-content: space-between;
font-size: 0.9rem;
li a {
color: $dark-color;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.5s;
&:hover {
color: $main-color;
border-bottom: 1px solid $main-color;
}
}
}
}
}
总结
跟着视频学习,其实很简单,主要就是很多语法要记住是干什么用的
多写多练 自然就形成知识记在脑子里了。
所以不能只看,还要动手练习,一起加油吧~