第二章 前端开发基础CSS

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


文章目录

  • CSS介绍
  • CSS使用方法
    • 内联方式
    • 内部方式
    • 外部导入方式(推荐)
    • 准备工作
  • 选择器
    • 元素
    • ID
    • 派生
  • CSS常用属性
    • 内边距和外边距
      • 内边距
      • 外边距
      • 举例
    • 字体font-*
      • 举例
    • 文本
      • 举例
    • **边框 border-\***
      • 举例
    • **背景 background-\***
      • 举例
    • **定位**
      • 格式
      • 举例
    • 浮动
      • 举例
    • 其他
      • 举例
  • 写一个登陆界面


CSS介绍

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

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

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

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

CSS使用方法

内联方式

内联方式(行内样式)

\

在HTML中如何使用css样式

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>

第二章 前端开发基础CSS_第1张图片

内部方式

内部方式(内嵌样式),在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>

第二章 前端开发基础CSS_第2张图片

外部导入方式(推荐)

外部导入方式(推荐),在head标签中使用

准备工作

创建CSS目录,以及css文件

第二章 前端开发基础CSS_第3张图片

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>

第二章 前端开发基础CSS_第4张图片

选择器

元素

元素选择器:这是最基本的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>元素演示2h2>
    <p class="c1">这是第一个句子p>
    <p class="c2">这是第二个句子p>
    <p class="c3">这是第三个句子p>
body>

html>

第二章 前端开发基础CSS_第5张图片

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">元素演示2h2>
    <p>这是第一个句子p>
    <p>这是第二个句子p>
    <p>这是第三个句子p>
body>

html>

第二章 前端开发基础CSS_第6张图片

类选择器:使用.来指定,后面跟着类名

例如.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">元素演示2h2>
    <p>这是第一个句子p>
    <p>这是第二个句子p>
    <p>这是第三个句子p>
body>

html>

第二章 前端开发基础CSS_第7张图片

派生

**派生选择器:**依据元素在其位置的上下文关系来定义样式

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"的元素内部的

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

元素 */ .dd p { color: darkmagenta; } style> head> <body> <div class="dd"> <h1>元素演示h1> <h2>元素演示2h2> <p>这是第一个句子p> <p>这是第二个句子p> <p>这是第三个句子p> div> body> html>

第二章 前端开发基础CSS_第8张图片

CSS常用属性

内边距和外边距

第二章 前端开发基础CSS_第9张图片

内边距

属性 描述
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>

第二章 前端开发基础CSS_第10张图片

字体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>

第二章 前端开发基础CSS_第11张图片

文本

属性 描述
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" 的 

元素 */ .w1 { color: blue; /* 设置文本颜色为蓝色 */ font-size: 16px; /* 设置字体大小为16px */ font-weight: bold; /* 设置字体加粗 */ } style> head> <body> <div class="ddiv"> <p class="w1">文本1p> <p class="w2">文本2p> <p class="w3">文本3p> <input type="text" value="123456789123456789123456789132465789" id="w4"> div> body> html>

第二章 前端开发基础CSS_第12张图片

边框 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>
    
    <div class="ddiv">div>
    
    <div class="dd2">div>
    
    <div class="dd3">div>
body>

html>

第二章 前端开发基础CSS_第13张图片

背景 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>
    
    <div class="dd1">div>
body>

html>

第二章 前端开发基础CSS_第14张图片

定位

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>
    
    <div class="dd1">div>

    
    <div class="dd2">
        <div class="dd21">div>
        <div class="dd22">div>
    div>
body>

html>

第二章 前端开发基础CSS_第15张图片

浮动

**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>
    
    <div class="dd21">div>

    
    <div class="dd22">div>

    
    <div class="dd33">
        <img src="img/tupian.jpeg" alt="">
        
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动... 
    div>
body>

html>

第二章 前端开发基础CSS_第16张图片

其他

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

举例

第二章 前端开发基础CSS_第17张图片

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>
    
    <div class="dd22">div>

    
    <div class="dd33">
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
        只能水平浮动,不能横向浮动只能水平浮动,不能横向浮动只能水平浮动...
    div>
body>

html>

第二章 前端开发基础CSS_第18张图片

写一个登陆界面

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>   码:<input type="password" name="password" id=""><br> 
            div>
            
            <button type="submit" class="butt">登录button>
        form>
    div>
body>

html>

第二章 前端开发基础CSS_第19张图片

你可能感兴趣的:(运维开发实战Web前端开发,css,前端)