CSS 基础
取值单位
外观样式
布局样式
动画样式
工具与规范
实例练习
$$demo <div class="box"> <div class="title">登录页面</div>
<div class="row">
<label for="username" class="label">用户名</label
><input
id="username"
class="username"
type="text"
placeholder="请输入用户名"
/>
</div>
<div class="row">
<label for="password" class="label">密码</label
><input
id="password"
class="password"
type="password"
placeholder="请输入密码"
/>
</div>
<div class="row">
<button class="login-btn">登录</button>
</div>
</div> <style> :root { box-sizing: border-box; }
*,
*::before,
*::after {
box-sizing: inherit;
}
.box {
margin: 100px auto;
text-align: center;
width: 400px;
border-radius: 16px;
background-color: pink;
border: 3px #65336e solid;
overflow: hidden;
}
.title {
font-size: 34px;
font-weight: bold;
color: white;
padding: 20px 0;
margin-bottom: 20px;
background-color: teal;
}
.label {
background: #eee;
width: 70px;
height: 40px;
display: inline-block;
border-radius: 6px 0 0 6px;
line-height: 40px;
vertical-align: middle;
font-size: 14px;
color: white;
background-color: teal;
font-weight: bold;
}
.username,
.password {
height: 40px;
border: none;
padding: 0;
vertical-align: middle;
border-radius: 0 6px 6px 0;
padding: 0 10px;
}
.row {
margin: 20px 0;
}
.login-btn {
cursor: pointer;
padding: 5px 30px;
border: 3px #65336e solid;
border-radius: 4px;
background-color: #ffdb8a;
color: #65336e;
font-weight: bold;
font-size: 22px;
}
.login-btn:hover {
background-color: #fff0ce;
}
.login-btn:active {
background-color: #fdcc59;
}
.username:focus,
.password:focus {
outline: 2px dashed teal;
}
</style> $$
$$answer
<div class="box">
<div class="title">登录页面</div>
<div class="row">
<label for="username" class="label">用户名</label
><input
id="username"
class="username"
type="text"
placeholder="请输入用户名"
/>
</div>
<div class="row">
<label for="password" class="label">密码</label
><input
id="password"
class="password"
type="password"
placeholder="请输入密码"
/>
</div>
<div class="row">
<button class="login-btn">登录</button>
</div>
</div>
<style>
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.box {
margin: 100px auto;
text-align: center;
width: 400px;
border-radius: 16px;
background-color: pink;
border: 3px #65336e solid;
overflow: hidden;
}
.title {
font-size: 34px;
font-weight: bold;
color: white;
padding: 20px 0;
margin-bottom: 20px;
background-color: teal;
}
.label {
background: #eee;
width: 70px;
height: 40px;
display: inline-block;
border-radius: 6px 0 0 6px;
line-height: 40px;
vertical-align: middle;
font-size: 14px;
color: white;
background-color: teal;
font-weight: bold;
}
.username,
.password {
height: 40px;
border: none;
padding: 0;
vertical-align: middle;
border-radius: 0 6px 6px 0;
padding: 0 10px;
}
.row {
margin: 20px 0;
}
.login-btn {
cursor: pointer;
padding: 5px 30px;
border: 3px #65336e solid;
border-radius: 4px;
background-color: #ffdb8a;
color: #65336e;
font-weight: bold;
font-size: 22px;
}
.login-btn:hover {
background-color: #fff0ce;
}
.login-btn:active {
background-color: #fdcc59;
}
.username:focus,
.password:focus {
outline: 2px dashed teal;
}
</style>
$$