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 等。