第二章 前端开发基础CSS

  • 开发
  • 32

第一章：前端开发基础：html
第二章：前端开发基础：CSS
第三章：前端开发基础：JavaScript
第四章：前端开发基础：jQuery
第五章：前端UI框架 Layui

文章目录

CSS介绍

CSS，全称为层叠样式表（Cascading Style Sheets），主要用于设置HTML页面中的CSS，全称为层叠样式表（Cascading Style Sheets），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。它是一种样式表语言，用于描述网页上的信息格式化和显示的方式。无论样式是直接存储于HTML网页还是单独的样式单文件，其核心都是将样式应用到指定类型的元素的规则。此外，CSS还描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

还可以配合Javascript脚本语言动态对网页各元素操作

格式： 选择器{属性:值;属性:值;属性:值;....}

选择器：需要改变样式的HTML元素

CSS使用方法

内联方式

内联方式（行内样式）

\<p style="color:red">在HTML中如何使用css样式</p>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS演示</title>
</head>

<body>
    <p style="color:aqua;">这是第一个句子</p>
    <p style="color: blueviolet;">这是第二个句子</p>
    <p>这是第三个句子</p>
</body>

</html>

image-20231213154606531

内部方式

内部方式（内嵌样式），在head标签中使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS演示</title>
    <style type="text/css">
        .c1 {
     
            color: aqua; // 设置类名为c1的元素的文字颜色为浅蓝色（aqua）
        }

        .c2 {
     
            color: blueviolet; // 设置类名为c2的元素的文字颜色为深紫色（blueviolet）
        }

        .c3 {
     
            color: red; // 设置类名为c3的元素的文字颜色为红色（red）
        }
    </style>
</head>

<body>
    <p class="c1">这是第一个句子</p>
    <p class="c2">这是第二个句子</p>
    <p class="c3">这是第三个句子</p>
</body>

</html>

image-20231213154920580

外部导入方式(推荐)

外部导入方式（推荐），在head标签中使用

<link href="main.css" type="text/css" rel="stylesheet"/>

准备工作

创建CSS目录，以及css文件

image-20231213155224662

css.css文件

.c1 {
   
    color: aqua; // 设置类名为c1的元素的文字颜色为浅蓝色（aqua）
}

.c2 {
   
    color: blueviolet; // 设置类名为c2的元素的文字颜色为深紫色（blueviolet）
}

.c3 {
   
    color: red; // 设置类名为c3的元素的文字颜色为红色（red）
}

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS演示</title>
    <link rel="stylesheet" href="css/css.css"> // 指定css文件
</head>

<body>
    <p class="c1">这是第一个句子</p>
    <p class="c2">这是第二个句子</p>
    <p class="c3">这是第三个句子</p>
</body>

</html>

image-20231213155426735

选择器

元素

元素选择器：这是最基本的CSS选择器，HTML文档中的元素本身就是一个选择器

例如p { line-height: 1.5em; margin-bottom: 1em; }，这会设置所有p元素的行高为1.5em，底部间距为1em。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS演示</title>
    <style>
        h1 {
     
            /*针对当前标题设置样式*/
            color: blue;
        }

        .c2,
        .c1 {
     
            /*组合选择器*/
            color: aqua;
        }

        body {
     
            /*p和h的标签继承了body标签样式属性*/
            color: red;
        }
    </style>
</head>

<body>
    <h1>元素演示</h1>
    <h2>元素演示2</h2>
    <p class="c1">这是第一个句子</p>
    <p class="c2">这是第二个句子</p>
    <p class="c3">这是第三个句子</p>
</body>

</html>

image-20231213160527784

ID

ID选择器：使用#来指定，后面跟着ID名

例如#firstname会选择所有ID为firstname的元素。

使用格式

#id名{样式...}

特点

  1. 根据元素id选择：ID选择器根据元素的id属性来选取特定的元素。这意味着，每个id属性值只能对应一个元素，这确保了每个HTML文档中id的唯一性。
  2. 精确匹配：为了使被选中的元素生效，其id属性值必须与选择器中给出的值完全匹配。例如，如果选择器的值为"demo"，那么只有id为"demo"的元素才会应用相应的样式。
  3. 语法规则：ID选择器的语法规则是以井号（#）开头，后面跟着对应元素id的名称。这样的规则使得我们可以很轻松地定义出对应的样式规则。
  4. 高优先级和唯一性：ID选择器具有很高的优先级，而且每个id属性值只能对应一个元素，这使得它具有唯一性。
  5. 常用于派生选择器：在现代布局中，id选择器常常用于建立派生选择器，以实现更为复杂和灵活的样式设置。
  6. ID不能以数字开头
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS演示</title>
    <style>
        body {
     
            /*p和h的标签继承了body标签样式属性*/
            color: red;
        }

        #DD1 {
     
            /* 针对DD1的ID定义了其他颜色 */
            color: aqua;
        }
    </style>
</head>

<body>
    <h1>元素演示</h1>
    <h2 id="DD1">元素演示2</h2>
    <p>这是第一个句子</p>
    <p>这是第二个句子</p>
    <p>这是第三个句子</p>
</body>

</html>

image-20231213161204199

类

类选择器：使用.来指定，后面跟着类名

例如.c1会选择所有类名为c1的元素。

使用格式

.类名{样式...}

特点

  1. 独立于文档元素：类选择器可以单独使用，也可以与其他元素结合使用，提供了一种独立于文档元素的方式来指定样式。
  2. 根据class属性的内容匹配元素：当定义了类选择器后，所有含有对应class属性的元素都将被选中并应用相应的样式。
  3. 一个元素可以有多个class：一个元素可以拥有多个class，因此可以使用逗号分隔多个class名称来选中对应的元素。
  4. 提高开发效率：通过使用类选择器，开发者可以在全局范围内统一设置某种样式，而不需要对每个元素分别设置，从而提高了网页开发的效率。
  5. 层叠与优先级：当多个选择器选中同一个元素时，CSS规定了选择器的优先级规则。在同等优先级的情况下，后定义的样式将覆盖先定义的样式。而在不同优先级之间，优先级高的样式将覆盖优先级低的样式
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS演示</title>
    <style>
        body {
     
            /*p和h的标签继承了body标签样式属性*/
            color: red;
        }

        .DD1 {
     
            /* 针对DD1的ID定义了其他颜色 */
            color: aqua;
        }
    </style>
</head>

<body>
    <h1>元素演示</h1>
    <h2 class="DD1">元素演示2</h2>
    <p>这是第一个句子</p>
    <p>这是第二个句子</p>
    <p>这是第三个句子</p>
</body>

</html>

image-20231213161729698

派生

**派生选择器：**依据元素在其位置的上下文关系来定义样式
html
body
head
meta
title
First Page!
h1
Test!
<\!--NOTE!--\>
p
Welcome to
em
DOM
World!
ul
li
Newer 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS演示</title>
    <style>
        /* 样式规则: 类名为"dd"的元素 */
        .dd {
     
            width: 150px;
            height: 200px;
            background-color: aqua;
        }

        /* 样式规则: 类名为"dd"的元素内部的<h1>元素 */
        .dd h1 {
     
            color: brown;
        }

        /* 样式规则: 类名为"dd"的元素内部的所有<p>元素 */
        .dd p {
     
            color: darkmagenta;
        }
    </style>
</head>

<body>
    <!-- 包含样式的<div>元素 -->
    <div class="dd">
        <!-- <h1>标题，应用了样式规则 .dd h1 -->
        <h1>元素演示</h1>

        <!-- <h2>标题，未应用样式规则，采用默认样式 -->
        <h2>元素演示2</h2>

        <!-- 多个<p>段落元素，应用了样式规则 .dd p -->
        <p>这是第一个句子</p>
        <p>这是第二个句子</p>
        <p>这是第三个句子</p>
    </div>

</body>

</html>

image-20231213163351706

CSS常用属性

内边距和外边距

image-20231213174208995

内边距

属性 描述
padding 设置四边的内边距
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

外边距

属性 描述
margin 设置四边的外边距，使用方法同padding
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>内边距和外边距</title>
    <style>
        /* 外层容器样式 */
        .zhuozi {
     
            width: 200px;
            height: 200px;
            background-color: grey;
            border: 2px dashed gold; /* 设置边框样式，2px宽度，虚线，金色 */
        }

        /* 内层容器样式 */
        .hezi {
     
            width: 50px;
            height: 50px;
            background-color: red;
            margin-left: 65px; /* 左外边距为65px */
            margin-top: 65px;  /* 上外边距为65px */
            padding-left: 30px; /* 左内边距为30px */
            padding-top: 30px;  /* 上内边距为30px */
        }

        /* 内层容器中的图片样式 */
        .hezi img {
     
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <!-- 外层容器 -->
    <div class="zhuozi">
        <!-- 内层容器 -->
        <div class="hezi">
            <!-- 图片 -->
            <img src="img/zuanjie.jpeg" alt=""> /* 我自己下载的图片以及存放路径 */
        </div>
    </div>
</body>

</html>

image-20231213174149925

字体font-*

属性 描述 值
font-size 设置字体的尺寸 • xx-small、x-small、small、medium、large、xlarge、xx-large，从小到大，默认值 medium
• length 固定长度，例如 12px
font-family 字体系列。可以写多个，如果第一个不支持，使用下一个 Microsoft YaHei
font-weight 设置字体的粗细 • normal 默认值
• bold 粗体
• bolder 更粗
• lighter 更细
font-style 字体样式 • normal 正常
• italic 斜体
• oblique 倾斜的字体

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>字体</title>
    <style>
        /* 类选择器 .DD 定义 */
        .DD {
     
            color: red; /* 设置文字颜色为红色 */
            font-size: x-large; /* 设置字体大小为较大 */
            font-weight: bolder; /* 设置字体加粗 */
            font-style: oblique; /* 设置字体样式为斜体 */
            /* 可选：设置字体族，如果注释解开，使用 Courier New 字体，如果不注释则使用默认字体 */
            /* font-family:'Courier New', Courier, monospace; */
        }
    </style>
</head>

<body>
    <!-- 包含样式的段落 -->
    <p class="DD">这是一个段落</p>
</body>

</html>

image-20231214140733747

文本

属性 描述 值
text-align 文本对齐方式 • left：左边
• right：右边
• center：中间
• justify：两端对齐文本效果
text-decoration 文本修饰 • none：默认，定义标准的文本，例如去掉超链接下划线
• line-through：删除线
• underline：文本下加一条线
text-overflow 文本溢出后显示效果 • clip：修剪文本
• ellipsis：显示省略号来代表被修剪的文本
• string：使用给定的字符串来代表被修剪的文本
letter-spacing 字符间的距离 • normal：默认
• length：自定义间距
line-height 行间的距离（行高） • normal：默认
• length：设置固定值
color 字体颜色 • 颜色名称，例如 red
• 十六进制值，例如 #ff0000
• rgb 代码，例如 rgb(255,0,0)

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文本</title>
    <style>
        /* 样式规则：外层容器 */
        .ddiv {
     
            width: 200px;
            height: 200px;
            background-color: aqua;
            text-align: center; /* 文本居中对齐 */
            text-decoration: underline; /* 添加文本下划线效果 */
            letter-spacing: 20px; /* 设置字符间距为20px */
            line-height: 20px; /* 设置行高为20px */
        }

        /* 样式规则：内层输入框 */
        .ddiv input {
     
            text-overflow: ellipsis; /* 当文本溢出时，用省略号表示 */
        }

        /* 样式规则：类名为 "w1" 的 <p> 元素 */
        .w1 {
     
            color: blue; /* 设置文本颜色为蓝色 */
            font-size: 16px; /* 设置字体大小为16px */
            font-weight: bold; /* 设置字体加粗 */
        }
    </style>
</head>

<body>
    <!-- 外层容器 -->
    <div class="ddiv">
        <!-- 应用了样式的 <p> 元素 -->
        <p class="w1">文本1</p>
        <p class="w2">文本2</p>
        <p class="w3">文本3</p>
        <!-- 输入框 -->
        <input type="text" value="123456789123456789123456789132465789" id="w4">
    </div>
</body>

</html>

image-20231214151124180

边框 border-*

属性 描述 值
border 所有边框样式的缩写 示例：`border: 1px solid blue;` 宽度 样式 颜色
border-color 四边框的颜色 示例：`border-color: red blue green yellow;` 上右下左
border-style 边框样式 • `solid` 实线边框
• `dotted` 点线
• `dashed` 虚线
• `none` 不显示边框，默认
border-left
border-right
border-top
border-bottom		 左边框
右边框
上边框
下边框		 例如设置底边框为虚线：`border-bottom: 1px dotted red;`
box-shadow 给元素添加阴影 格式：`box-shadow: h-shadow v-shadow blur spread color inset;`
• `h-shadow` 必选，水平阴影的位置
• `v-shadow` 必选，垂直阴影的位置
• `blur` 可选，模糊程度
• `spread` 可选，阴影的大小
• `color` 可选，阴影的颜色
• `inset` 可选，从外层的阴影（开始时）改变阴影内侧阴影
示例1：`box-shadow: 1px 2px 3px 1px #c2c2c2;`
示例2：`box-shadow: 0 5px 20px 0 #e8e8e8;`

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>边框</title>
    <style>
        /* 样式规则：外层容器1 */
        .ddiv {
     
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 5px solid yellow; /* 实线边框，宽度为5px，颜色为黄色 */
        }

        /* 样式规则：外层容器2 */
        .dd2 {
     
            width: 200px;
            height: 200px;
            background-color: black;
            border: 5px dashed hotpink; /* 虚线边框，宽度为5px，颜色为hotpink */
            border-radius: 10px; /* 边框圆角半径为10px */
        }

        /* 样式规则：外层容器3 */
        .dd3 {
     
            width: 200px;
            height: 200px;
            background-color: chocolate;
            border: 5px dotted red; /* 点线边框，宽度为5px，颜色为红色 */
            border-radius: 10px; /* 边框圆角半径为10px */
            box-shadow: 10px 20px 30px aqua; /* 阴影效果，水平10px，垂直20px，模糊度30px，颜色为aqua */
        }
    </style>
</head>

<body>
    <!-- 外层容器1 -->
    <div class="ddiv"></div>
    <!-- 外层容器2 -->
    <div class="dd2"></div>
    <!-- 外层容器3 -->
    <div class="dd3"></div>
</body>

</html>

image-20231214151942003

背景 background-*

属性 描述 值
background-color 背景颜色 • 颜色名称，例如 `red`
• 十六进制值，例如 `#ff0000`
• rgb 代码，例如 `rgb(255,0,0)`
background-image 背景图片 • `url('URL')` 图片路径
• `none` 不显示背景图片
background-repeat 设置是否及如何重复背景图像 • `repeat` 默认。背景图像将在垂直方向和水平方向重复
• `repeat-x` 背景图像将在水平方向重复
• `repeat-y` 背景图像将在垂直方向重复
• `no-repeat` 背景图像将仅显示一次
background-position 背景图片的位置 • `top left`、`top center`、`top right`、
`center left`、`center center`、`center right`、
`bottom left`、`bottom center`、`bottom right`
• `x% y%` 水平位置和垂直位置
background-size 背景图片的尺寸 • `length` 背景的高度和宽度，例如 `80px 60px`
• `percentage` 以父元素的百分比设置背景图像
的高度和宽度，例如 `50% 50%`

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景</title>
    <style>
        /* 样式规则：外层容器1 */
        .dd1 {
     
            width: 200px;
            height: 200px;
            background-color: aqua; /* 设置背景颜色为水绿色 */
            background-image: url(img/zuanjie.jpeg); /* 设置背景图片 */
            background-size: 50% 50%; /* 设置背景图片大小为容器的50%宽度和50%高度 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-position: 50% 50%; /* 设置背景图片在容器中的位置为中心 */
        }
    </style>
</head>

<body>
    <!-- 外层容器1 -->
    <div class="dd1"></div>
</body>

</html>

image-20231214152404321

定位

position属性：把你元素定到什么位置，或者把你元素根据什么定位

属性 描述
absolute 绝对定位，根据自己最近的一个父元素定位，而且父元素必须相对定位过。如果没有父元素，根据窗口定位。
fixed 固定定位，相对于浏览器窗口进行定位。
relative 相对定位，相对于自己定位，偏移后，元素仍保持其未定位前的形状。原来的空间依然保留，只是看不到了。
static 默认值。没有定位，元素框正常生成，出现在正常的流中。

格式

1.先使用postion告诉怎么定位

2. 再告诉它定位到哪

​ • left 靠左距离

​ • right 靠右距离

​ • top 顶部距离

​ • bottom 底部距离

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景</title>
    <style>
        /* 样式规则：外层容器1 */
        .dd1 {
     
            width: 200px;
            height: 200px;
            background-color: aqua; /* 设置背景颜色为水绿色 */
            background-image: url(img/zuanjie.jpeg); /* 设置背景图片 */
            background-size: 50% 50%; /* 设置背景图片大小为容器的50%宽度和50%高度 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-position: 50% 50%; /* 设置背景图片在容器中的位置为中心 */
            position: absolute; /* 绝对定位 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto; /* 居中对齐 */
        }

        /* 样式规则：外层容器2 */
        .dd2 {
     
            width: 500px;
            height: 500px;
            border: 5px dashed hotpink; /* 设置边框样式，宽度为5px，颜色为hotpink */
            position: relative; /* 相对定位 */
        }

        /* 样式规则：内层容器1 */
        .dd21,
        .dd22 {
     
            width: 50px;
            height: 50px;
            position: absolute; /* 绝对定位 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto; /* 居中对齐 */
        }

        /* 样式规则：内层容器1的颜色 */
        .dd21 {
     
            height: 60px;
            background-color: aqua;
        }

        /* 样式规则：内层容器2的颜色 */
        .dd22 {
     
            background-color: black;
        }
    </style>
</head>

<body>
    <!-- 外层容器1 -->
    <div class="dd1"></div>

    <!-- 外层容器2，包含两个内层容器 -->
    <div class="dd2">
        <div class="dd21"></div>
        <div class="dd22"></div>
    </div>
</body>

</html>

image-20231214161317414

浮动

**float属性：**定义元素在哪个方向浮动。

可选值：none、left、right

特点：

• 只能水平浮动，不能横向浮动

• 浮动碰到父元素的边框或者浮动元素的边框就会停止

• 浮动元素的后一个元素会围绕着浮动元素（典型应用：文字围绕图片）

• 浮动元素的前一个元素不会受到任何影响（如果想让两个块元素并排显示，必须让两个块元素都应用float）

举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景</title>
    <style>
        /* 样式规则：内层容器1和内层容器2 */
        .dd21,
        .dd22 {
     
            width: 200px;
            height: 200px;
            float: left; /* 左浮动 */
            margin-left: 20px; /* 左外边距为20px */
        }

        /* 样式规则：内层容器1的颜色 */
        .dd21 {
     
            background-color: aqua;
        }

        /* 样式规则：内层容器2的颜色 */
        .dd22 {
     
            background-color: black;
        }

        /* 样式规则：图片容器 */
        .dd33 img {
     
            width: 100px;
            height: 100px;
            float: left; /* 左浮动 */
        }

    </style>
</head>

<body>
    <!-- 内层容器1 -->
    <div class="dd21"></div>

    <!-- 内层容器2 -->
    <div class="dd22"></div>

    <!-- 图片容器 -->
    <div class="dd33">
        <img src="img/tupian.jpeg" alt="">
        <!-- 文本容器，clear:left用于清除左浮动 -->
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动... 
    </div>
</body>

</html>

image-20231214170607338

其他

属性 描述 其他
list-style-type 列表样式 • `none`: 不显示项目符号
overflow 内容溢出处理 • `hidden`: 溢出部分隐藏
• `scroll`: 不管是否溢出都显示滚动
• `auto`: 溢出显示滚动条，不溢出没有滚动条
display 是否及如何显示 • `none`: 隐藏该元素
• `block`: 显示为块级元素
• `inline`: 默认

举例

image-20231214171324672

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>其他</title>
    <style>
        /* 样式规则：内层容器2 */
        .dd22 {
     
            width: 200px;
            height: 200px;
            float: left; /* 左浮动 */
            margin-left: 20px; /* 左外边距为20px */
            background-color: black;
            display: none; /* 初始状态设置为不显示 */
        }

        /* 样式规则：图片容器 */
        .dd33 {
     
            width: 100px;
            height: 100px;
            float: left; /* 左浮动 */
            overflow: auto; /* 清除浮动，确保容器包含浮动元素 */
        }

        /* 清除浮动之后添加文本 */
        .dd33::after {
     
            content: ""; /* 伪元素用于清除浮动 */
            display: table;
            clear: both;
        }

    </style>
</head>

<body>
    <!-- 内层容器2 -->
    <div class="dd22"></div>

    <!-- 图片容器 -->
    <div class="dd33">
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
        只能水平浮动，不能横向浮动只能水平浮动，不能横向浮动只能水平浮动...
    </div>
</body>

</html>

image-20231214171352623

写一个登陆界面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <style>
        body {
     
            background-image: url(img/zuanjie.jpeg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            margin: 0; /* 清除默认的页面边距 */
            font-family: Arial, sans-serif; /* 设置字体 */
        }

        /* 样式规则：登录框容器 */
        .dd1 {
     
            width: 600px;
            height: 300px;
            box-shadow: 0 5px 20px 0 red;
            background-color: aliceblue;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto; /* 居中对齐 */
            outline: none;
            padding: 20px; /* 添加内边距增加内容与边框的间距 */
        }

        /* 样式规则：标题 */
        .dd1 h1 {
     
            color: aqua;
            margin-left: 30%;
        }

        /* 样式规则：输入框容器 */
        .input {
     
            margin-top: 20px; /* 调整上边距 */
            margin-left: 20%;
        }

        /* 样式规则：输入框样式 */
        .input input {
     
            width: 300px;
            height: 30px;
            border: 1px solid lightgray;
            margin-top: 10px;
            outline: none;
            padding: 5px; /* 添加内边距增加内容与边框的间距 */
        }

        /* 样式规则：登录按钮 */
        .butt {
     
            width: 150px;
            height: 30px;
            background-color: red;
            border-style: none;
            border-radius: 10px;
            font-size: 20px;
            margin-left: 40%;
            margin-top: 20px; /* 调整上边距 */
            cursor: pointer;
            color: white; /* 设置按钮文字颜色 */
        }
    </style>
</head>

<body>
    <!-- 登录框容器 -->
    <div class="dd1">
        <h1>欢迎访问管理系统</h1>
        <form action="" method="get" class="form">
            <!-- 输入框容器 -->
            <div class="input">
                用户名：<input type="text" name="username" id=""><br>
                密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id=""><br> <!-- 使用password类型隐藏密码 -->
            </div>
            <!-- 登录按钮 -->
            <button type="submit" class="butt">登录</button>
        </form>
    </div>
</body>

</html>

image-20231214174635969

阅读全部

相关推荐

  3. 第一章：CSS基础入门

    2023-12-31 00:38:03       11 阅读

  4. 学习笔记--第二章WebGIS开发基础

    2023-12-31 00:38:03       19 阅读

  5. [前端开发] CSS基础知识 [下]

    2023-12-31 00:38:03       34 阅读

  8. Vue-前端应用开发平时作业第二章

    2023-12-31 00:38:03       15 阅读

  9. Vue-前端应用开发平时作业第二章作业2

    2023-12-31 00:38:03       14 阅读

最近更新

  4. TCP协议是安全的吗?

    2023-12-31 00:38:03       18 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2023-12-31 00:38:03       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2023-12-31 00:38:03       18 阅读

  18. 通过文章id递归查询所有评论（xml）

    2023-12-31 00:38:03       20 阅读

热门阅读

  6. C++/Qt版餐厅点餐系统模块代码详解——点餐模块

    2023-12-31 00:38:03       36 阅读

  7. 微机原理12练习题答案

    2023-12-31 00:38:03       31 阅读

  12. js预加载和滚动到底部加载数据实现

    2023-12-31 00:38:03       39 阅读

  13. R语言【base】——which()：给出逻辑对象的 TRUE 索引，允许使用数组索引。

    2023-12-31 00:38:03       31 阅读

  20. 装饰器模式（Decorator）

    2023-12-31 00:38:03       34 阅读

  22. 人大金仓：元数据查询语句记录

    2023-12-31 00:38:03       25 阅读

  23. SpringBoot全局异常捕获

    2023-12-31 00:38:03       34 阅读

  24. 数据被锁？被.mkp 勒索病毒攻击后的拯救行动

    2023-12-31 00:38:03       32 阅读

  26. php5.6安装openssl扩展

    2023-12-31 00:38:03       42 阅读

  29. SSRF靶场安装测试记录

    2023-12-31 00:38:03       34 阅读