1.例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<style>
.box{
width: 300px;
height: 500px;
top: 15%;
left: 40%;
position: absolute;
border: 5px solid rgb(113, 113, 189);
}
body{
background-image:url("images/1.jpg");
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
}
.box>form{
text-align: center;
margin-top: 15%;
}
.box>form>input{
margin-top: 15%;
width: 270px;
height: 50px;
}
.one{
width: 170px;
height: 45px;
margin-top:20px;
transition-property: background;
transition-duration: 2s;
transition-timing-function: linear;
}
.one:hover{
background-color: aqua;
}
</style>
</head>
<body>
<div class="box">
<form>
<h2>登录界面</h2>
<input type="text" name="id" placeholder="姓名">
<input type="password" name="as" placeholder="密码">
<button type="submit" class="one">提交</button>
</form>
</div>
</body>
</html>2.类选择器
查阅资料可知
类选择器是 CSS 中一种常用的选择器，用于选择具有相同类名的元素。
类选择器使用类名作为选择器，并在类名前面加上一个点号（.）来表示。例如，.my-class 就是一个类选择器，选择具有 my-class 类名的所有元素。
使用类选择器的优点是可以将相同样式应用于多个元素，而不必为每个元素都添加一个独立的 ID 或标签选择器。
1例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dom{
color: aliceblue;
}
</style>
</head>
<body>
<p class="dom">我是个p标签</p>
</body>
</html>2.background
background-repeat:no-repeat;图片不重复
background-size:cover;表示背景图片固定在视口中不滚动。
background-attachment:fixed;表示将背景图片缩放到完全覆盖背景区域，可能会裁剪或拉伸图片来适应。
3.position: absolute
据资料可知
position: absolute; 是 CSS 的样式规则，用于设置元素的定位方式。
具体解释如下：
position是一个 CSS 属性，用于指定元素的定位方式。absolute是position的值之一，表示将元素的位置相对于其最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位。
当将 position 设置为 absolute 时，元素的位置将被设置为相对于其最近的已定位的祖先元素。这意味着，通过使用 top、right、bottom 和 left 属性，可以调整元素相对于其定位祖先的位置。
4.过渡效果
transition-property: background;属性用于指定过渡效果应用到哪些，一般为背景和宽度，此处用到的是背景
transition-duration: 2s;属性用于指定过渡效果的持续时间，此处为background 属性的过渡持续时间为 2 秒
transition-timing-function: linear;即控制过渡期间属性值的变化速度，
- 预定义的关键词包括：
ease（默认值，缓慢开始，缓慢结束）、linear（匀速）、ease-in（缓慢开始）、ease-out（缓慢结束）、ease-in-out（缓慢开始，缓慢结束）等。
5.margin
据资料可知
margin 是 CSS 中用于设置元素外边距（margin）的属性。
外边距是指元素与相邻元素之间的空白区域，用于控制元素与其他元素之间的间隔。margin 属性可以设置元素的上、右、下、左四个方向的外边距。
margin 属性的常见使用方式是通过指定一个值来设置所有方向的外边距，或者通过指定多个值来设置不同方向的外边距。
以下是一些常见的 margin 属性用法：
设置相同的外边距：可以使用一个值来设置元素的上、右、下、左四个方向的外边距为相同值。例如，margin: 10px; 将设置元素的外边距为 10 像素。
设置不同的外边距：可以使用多个值来设置元素的上、右、下、左四个方向的外边距为不同的值。例如，margin: 10px 20px 15px 5px; 将设置元素的上外边距为 10 像素，右外边距为 20 像素，下外边距为 15 像素，左外边距为 5 像素。
设置指定方向的外边距：可以使用单独的 margin-top、margin-right、margin-bottom、margin-left 属性来分别设置元素的上、右、下、左方向的外边距。例如，margin-left: 30px; 将设置元素的左外边距为 30 像素。
使用负值外边距：可以使用负值来设置元素的外边距，从而使元素与其他元素重叠或调整元素的位置。例如，margin-top: -10px; 将使元素的上外边距向上移动 10 像素。
外边距可以用于控制元素之间的间距、布局和对齐。通过调整外边距属性的值，可以实现元素在页面中的定位和排列。
5.盒子模型/border
1.盒子模型
2.border
边框样式（border-style）：
solid：实线边框，是最常用的边框样式。
dashed：虚线边框，由短线段组成。
dotted：点线边框，由小圆点组成。
double：双线边框，由两条实线并排组成。
none：无边框，不显示边框。
其他样式还包括 groove、ridge、inset、outset 等。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
