• DAY05-网页布局实战&选择器&CSS样式

    文章目录

    网页布局实战

    一 CSS选择器

    a.基本选择器

    1.元素选择器
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            background-color: aqua;
        }
        span{
            background-color: red;
        }
        a{
            background-color: pink;
        }
    style>
head>
<body>
            
    
    <div>我是一个divdiv>
    <br />
    <div>我是一个divdiv>
    
    <span>我是一个spanspan>
    <a href="https://www.baidu.com">百度a>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    2.类选择器
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

    <style>
        .content{
            width: 100px;
            height: 100px;
            background-color: red;
        }


        .item{
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .item1{
            margin-left: 50px;
        }
    style>


head>
<body>
        
        <div class="content">div>
        <div class="item item1">div>
        <br>
        <div class="item">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    3.id选择器
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        #one{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #two{
            background-color: aqua;
        }
    style>
head>
<body>
        
		
		<div id="one">div一div>
		<div id="two">div二div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    b.复杂选择器

    1 并列声明

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 
            并列声明
                给div和span加上相同的样式
        */
        div,span{
            background-color: red;
        }

    style>
head>
<body>
    <div>我是一个divdiv>
    <span>我是一个spanspan>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    2 后代选择器

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>


        /* 
            后代选择器
                选择div中所有的span标签
        */
        div span{
            background-color: aqua;
        }
    style>
head>
<body>
    <div>
        我是一个div
        <br />
        <span>我是一个spanspan>
    div>
    <span>我是div外面的spanspan>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    3 子元素选择器

    只找指定元素下面儿子，不会继续往下找

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 这个选择器称为后代选择器 */
        .box > span{
            color: red;
        }
    style>
head>
<body>
    <div class="box">
        <span>345span>
        <div>
            <span>123span>
        div>
    div>
    <span>455span>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    4 属性选择器

    
"en">

    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">
    Document
    


    123
    "username">455
    
    "app">div1
    
    
    "app1">div2
    
    
    div3
    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    6 通配符*

    ​ 匹配所有元素

    c 伪选择器

    image-20220418105537420

    语法: 

选择器:伪类名 {

}

    • 1
    • 2
    • 3
    • 4
    • 5
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* 默认状态 */
        a:link{
            background-color: brown;
        }
        /* 悬浮状态 */
        a:hover{
            background-color: aqua;
        }
        /* 触发状态 */
        a:active{
            background-color: green;
        }
        /* 触发后的状态 */
        a:visited{
            background-color: orange;
        }
    style>
head>
<body>
    <a href="https://www.baidu.com">百度一下a>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    二 CSS常用样式

    1.文本样式

    属性名值解释说明
    font-size16px字体大小默认为16像素
    font-weightnormal 正常 | bold 加粗字体粗细设置字体加粗
    line-height24px行高文本在容器中垂直对齐
    colorred | #0099aa | rgb(0,0,0)字体颜色
    text-decorationnone|underline|line-through字体装饰线
    text-alignleft | center | right水平对齐方式
    text-indent2em文本缩进一般使用在段落前缩进两个字
    font-stylenoraml 正常 | italic 斜体文字样式
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            /* 文字的大小 */
            font-size: 20px;
            /* 文字加粗 */
            font-weight: bold;
            /* 文字颜色 */
            color: red;
            /* 
                装饰线
                    underline下划线
                    line-through贯穿线
                    none:去掉标签自带的装饰线
             */
            text-decoration: line-through;
            /* 文字垂直居中 */
            line-height: 200px;
            /* 
                文字水平对齐方式
                    left左对齐
                    center居中
                    right右对齐
             */
            text-align: center;
            /* 文字斜体 */
            font-style: italic;
        }
    style>
head>
<body>
    <div>
        文本样式
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    2.背景样式

    1)背景颜色
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .div2{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 透明度 */
            opacity: 0.2;
        }
    style>
head>
<body>
    <div class="div2">蜗牛学院div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    2)背景图片
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .div1{
            width: 500px;
            height: 500px;
            border: 1px red solid;
            /* 
                显示背景图片
                只有当div有宽高的时候,背景图片才会显示出来
             */
            background-image: url("./img/id7.jpg");
            /* 
                背景图片的平铺
                一般设置背景图片不平铺no-repeat
             */
            background-repeat: no-repeat;
            /* 
                背景图片的大小
                    cover等比放大图片,铺满容器
                    也可以设置百分比 100% 100%
             */
            background-size: cover;
        }
    style>
head>
<body>
    <div class="div1">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    三 案例

    案例1

    image-20221108161009302

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box{
            width: 520px;
            height: 520px;
        }

        .box .item1{
            width: 260px;
            height: 260px;
            background-color: #d9011b;
            float: left;
            /* 让div内容水平居中 */
            text-align: center;
            /* 让div内容垂直居中 */
            line-height: 260px;
            /* 文字大小 */
            font-size: 60px;
            /* 文字加粗 */
            font-weight: bold;
            /* 文字颜色 */
            color: #f59a23;
        }

        .box .item2{
            width: 260px;
            height: 260px;
            background-color: #ec808c;
            float: left;
            /* 让div内容水平居中 */
            text-align: center;
            /* 让div内容垂直居中 */
            line-height: 260px;
            /* 文字大小 */
            font-size: 60px;
            /* 文字加粗 */
            font-weight: bold;
            /* 文字颜色 */
            color: #03bfc0;
        }

        .box .item3{
            width: 260px;
            height: 260px;
            background-color: #03bfc0;
            float: left;
            /* 让div内容水平居中 */
            text-align: center;
            /* 让div内容垂直居中 */
            line-height: 260px;
            /* 文字大小 */
            font-size: 60px;
            /* 文字加粗 */
            font-weight: bold;
            /* 文字颜色 */
            color: #ec808c;
        }

        .box .item4{
            width: 260px;
            height: 260px;
            background-color: #f59a23;
            float: left;
            /* 让div内容水平居中 */
            text-align: center;
            /* 让div内容垂直居中 */
            line-height: 260px;
            /* 文字大小 */
            font-size: 60px;
            /* 文字加粗 */
            font-weight: bold;
            /* 文字颜色 */
            color: #d9011b;
        }
    style>
head>
<body>
    <div class="box">
        <div class="item1">恭div>
        <div class="item2">囍div>
        <div class="item3">發div>
        <div class="item4">财div>
    div>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92

    案例2

    image-20221108173945603

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

    <style>
        .box1{
            width: 200px;
            height: 300px;
            border: 1px gray solid;
        }
        .box1 a{
            display: block;
            height: 58px;
            border: 1px gray solid;

            text-decoration: none;
            color: black;
            text-align: center;
            line-height: 58px;
        }
        /* 伪选择器 */
        .box1 a:hover{
            background-color: gray;
        }
    style>

head>
<body>
    <div class="box1">
        <a href="">首页a>
        <a href="">楼宇管理a>
        <a href="">房屋管理a>
        <a href="">业主管理a>
        <a href="">账号管理a>
    div>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    案例3-贯穿项目

    image-20221128101711732

  • 相关阅读:
    电脑常见问题及解决方法
    27K测试老鸟6年经验的面试心得，四种公司、四种问题…
    灰度级形态学 - 灰度开运算和灰度闭运算
    深入理解python虚拟机：程序执行的载体——栈帧
    SpringBoot第三方bean管理
    详解【计算机类&面试真题】军队文职考试——第10期：存储系统有哪三种？如何清理内存垃圾？xp系统文件的共享方法 | C#中委托和事件的区别 | 为何备份的时候找不到ghost.txt文件？子网掩码计算
    基于android的移动学习平台（前端APP+后端Java和MySQL）
    java毕业设计养老院管理系统Mybatis+系统+数据库+调试部署
    QT 系统学习 day01 了解各种控件,学习信号槽，QPushbutton
    【Qt】【模型视图架构】 在项目视图中启用拖放
  • 原文地址：https://blog.csdn.net/qq_33396183/article/details/128198702