11.2 Web开发_CSS入门(❤❤)

已于 2024-01-30 20:20:16 修改
阅读量203 收藏
点赞数
分类专栏： Java工程师(后端开发) 文章标签： 前端 css
于 2024-01-27 16:26:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44289784/article/details/135880224
版权

11.2 Web开发_CSS入门❤❤

1. CSS简介

在这里插入图片描述

在这里插入图片描述

1.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>
    <link rel="stylesheet" href="./base.css">
    <style>
        /* CSS代码就是写在style标签中的 */

        /* 
            p: 选择器，用来选中页面中所有的p标签。
            color: 设置文字颜色的属性
            text-align: 设置文本的对齐方式（left、center、right）
            font-size: 设置文字字体大小
         */
        p {
            color: red;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>CSS基础案例</p>
    <h1>CSS基础案例</h1>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2. CSS书写的位置

在这里插入图片描述
在这里插入图片描述

2.1 行内式

在这里插入图片描述

<body>
    <p style="color: orange">我是个p</p>
    <div style="color: green; text-align: center; font-size: 30px;">俺是个div</div>
</body>

2.2 内嵌式

在这里插入图片描述
在这里插入图片描述

2.3 外链式

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./base.css">
</head>
<body>
    <p>哈哈哈,我是个p标签</p>
</body>
</html>

样式文件

p {
    font-style: italic;
    color: blue;
}

在这里插入图片描述

3. CSS基础选择器

在这里插入图片描述

3.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>
        h1 {
            color: orange;
            font-size: 30px;
        }

        p {
            color: lightblue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>静夜思</h1>
    <p>床前明月光</p>
    <p>疑似地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
</body>
</html>

3.2 id选择器

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<!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>
        h1 {
            color: orange;
            font-size: 30px;
        }

        p {
            color: lightblue;
            font-size: 20px;
        }

        #p1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>夜静思</h1>
    <p>床前明月光</p>
    <p>疑似地上霜</p>
    <p id="p1">举头望明月</p>
    <p>低头思故乡</p>
</body>
</html>

3.3 类选择器

在这里插入图片描述
在这里插入图片描述

<!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>
        h1 {
            color: orange;
            font-size: 30px;
        }

        p {
            color: lightblue;
            font-size: 20px;
        }

        .red {
            color: red;
        }
    </style>
</head>
<body>
    <h1>夜静思</h1>
    <p>床前明月光</p>
    <p class="red">疑似地上霜</p>
    <p>举头望明月</p>
    <p class="red">低头思故乡</p>
</body>
</html>

3.4 选择器优先级

在这里插入图片描述

3.5 通配符选择器

在这里插入图片描述

4. 多类名

在这里插入图片描述
在这里插入图片描述

5. 样式的两种特性

5.1 层叠性

在这里插入图片描述

5.2 继承性

在这里插入图片描述

<!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>
        p {
            color: green;
        }
        #d1 {
            color: red;
            z-index:1;
        }
        
    </style>
</head>
<body>
    <div id="d1">
        <p>子承父业</p>
    </div>
</body>
</html>

6. 文字样式font

在这里插入图片描述

6.1 font-size字体大小

在这里插入图片描述
在这里插入图片描述

<!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>
        /* body标签中所有的文字大小都是 16px */
        body {
            font-size: 16px;
        }

        #p1 {
            font-size: 20px;
        }

        #p2 {
            font-size: 1em;
        }
    </style>
</head>
<body>
    <p id="p1">hello world</p>
    <p id="p2">hello world</p>
</body>
</html>

6.2 font-family字体字形

在这里插入图片描述

<!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>
        body {
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <p>你好啊</p>
</body>
</html>

6.3 font-weight字体粗细

在这里插入图片描述
在这里插入图片描述

    <style>
        #p1 {
            font-weight: lighter;
        }
        #p2 {
            /* font-weight: normal; */
            font-weight: 400;
        }
        #p3 {
            font-weight: bold;
        }
        #p4 {
            /* font-weight: bolder; */
            font-weight: 700;
        }
    </style>

6.4 font-style字体样式

在这里插入图片描述

    <style>
        #p1 {
            font-style: italic;
        }
    </style>

7. 文本样式

在这里插入图片描述

7.1 color文本颜色

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<!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>
        p {
            /* color: #FAF706;  */
            /* color: #EE00AA; */
            /* color: #E0A; */
            /* color: #EE0034; */
            /* color: #e034;    //  错误简写 */
            /* color: rgb(110, 69, 205); */
            /* color: rgb(90%, 40%, 80%); */
            color: #EB2503;
        }
    </style>
</head>
<body>
    <p>但使龙城飞将在，不教胡马度阴山</p>
</body>
</html>

7.2 text-align文本对齐

在这里插入图片描述

<!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>
        .l {
            text-align: left;
        }

        .r {
            text-align: right;
        }

        .c {
            text-align: center;
        }
    </style>
</head>
<body>
    <p class="l">我是居左对齐</p>
    <h1 class="c">我是居中对齐</h1>
    <div class="r">我是居右对齐</div>
    <span class="c">哈哈哈</span>
</body>
</html>

7.3 text-decoration文本划线

在这里插入图片描述
在这里插入图片描述

<!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>
        .u {
            text-decoration: underline;
        }

        .o {
            text-decoration: overline;
        }

        .s {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p class="u">下划线</p>
    <p class="o">上划线</p>
    <p class="s">删除划线</p>
    <p>无划线</p>
</body>
</html>

在这里插入图片描述

7.4 text-indent文本缩进

在这里插入图片描述

8. 复合选择器

在这里插入图片描述

8.1 父子嵌套

在这里插入图片描述
在这里插入图片描述

8.2 子代选择器

在这里插入图片描述

8.3 后代选择器

在这里插入图片描述

9. 伪类

9.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>
        
        /* 未访问的链接 */
        a:link {
            color: red;
        }
        /* 已访问的链接 */
        a:visited {
            color: blue;
        }
        /* 鼠标悬浮在链接上 */
        a:hover {
            color: green;
        }
        /* 选定的链接 */
        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <a href="#">链接伪类</a>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!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>
        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #FA0000;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="#">品牌闪购</a>
</body>
</html>

9.2 其他伪类

在这里插入图片描述
hover鼠标悬浮在上

10. 选择器权重

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>
        div ul li {  /* 0, 0, 0, 3*/
            color: red;
        }

        #nav ul li {  /* 0, 1, 0, 2*/
            color: blue;
        }

        div .list #one {  /* 0, 1, 1, 1 */
            color: orange;
        }
        li {  /* 0 ,0, 0, 1*/
            color: lightblue!important;
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul class="list">
            <li id="one" style="color: pink;">兰博基尼</li>
            <li>布加迪威龙</li>
            <li>阿斯顿马丁</li>
        </ul>
    </div>
</body>
</html>

11. 块元素和行内元素

在这里插入图片描述

11.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>
        div {
            /* bcakground-color: 用来设置标签的背景颜色 */
            background-color: orange;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        设置块元素
        <p>哈哈哈</p>
        <span>嘿嘿嘿</span>
    </div>
</body>
</html>

在这里插入图片描述

<body>
    <p>
        <div>错误的嵌套关系</div>
    </p>
</body>

11.2 块内_文字居中

在这里插入图片描述

<!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>
        div {
            width: 200px;
            height: 100px;
            background-color: orange;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 line-height=height */
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>
        文字要居中
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

11.3 行内元素

在这里插入图片描述

<!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>
        span {
            width: 300px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <span>
        行内元素
        <b>哈哈哈</b>
        <div>嘿嘿嘿</div>
    </span>
</body>
</html>

在这里插入图片描述

11.4 行内块元素

在这里插入图片描述

<!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>
        img {
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <img src="./images/1.jpg" alt="">
    <img src="./images/2.jpg" alt="">
    <img src="./images/3.jpg" alt="">
</body>
</html>

在这里插入图片描述

11.5 三种元素互相转换

在这里插入图片描述

在这里插入图片描述

<!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>
        div {
            /* display: inline; */
            /* display: inline-block; */
            width: 300px;
            height: 300px;
            background-color: orange;
            display: none;
        }

        span {
            /* display: block; */
            /* display: inline-block; */
            display: none;
            width: 300px;
            height: 300px;
            background-color: blue;
        }


    </style>
</head>
<body>
    <div>我本来是块元素</div>
    <div>我是另一个div</div>
    <span>我是一个行内元素</span>
</body>
</html>

12.字体图标和背景样式

12.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>
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <span class="iconfont icon-gouwuchekong"></span>
    <i class="iconfont icon-fangdajing"></i>
</body>
</html>

在这里插入图片描述

12.2 背景样式

在这里插入图片描述

<!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>
        div {
            width: 200px;
            height: 200px;
        }

        #one {
            background-color: lightgreen;
        }
        #two {
            background-color: #ccc;
        }
        #three {
            background-color: rgb(112,79,201);
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>
        div {
            width: 300px;
            height: 300px;
            background-image: url(images/1.png);
            background-repeat: no-repeat;
            background-color: lightblue;
            /* 方位名词方式 */
            /* background-position: left bottom; */
            background-position: 20px 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

12.3 背景附着

在这里插入图片描述

<!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>
        body {
            background-image: url("images/2.jpg");
            background-attachment: fixed;
        }
        div {
            height: 1200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

13. 盒子模型

13.1 简介

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

13.2 盒子边框_border

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>
        div {
            width: 200px;
            height: 200px;
        }
        #one {
            border: 1px solid red;
        }
        #two {
            border-style: dashed;
            border-color: green;
            border-width: 5px;
        }
    </style>
</head>
<body>
    <div id="one"></div>

    <div id="two"></div>
</body>
</html>

2. 边框拆分写法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 圆角边框

在这里插入图片描述
在这里插入图片描述

<!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>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        #one {
            /* border-radius: 100px; */
            border-radius: 50%;
        }

        #two {
            width: 100px;
            height: 30px;
            border: 1px solid red;
            border-radius: 15px;
        }

        #three {
            width: 30px;
            height: 100px;
            border: 1px solid red;
            border-radius: 15px;
        }
        #four {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50% 50% 50% 0;
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <br>
    <div id="two"></div>
    <br>
    <div id="three"></div>
    <br>
    <div id="four"></div>
</body>
</html>

在这里插入图片描述

13.2 内边距_padding

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>
        div {
            border:  1px solid red;
            padding: 20px;
        }
        span {
            display: inline-block;
            border: 1px solid blue;
            padding: 20px;
        }
        #one {
            padding: 20px 10px;
        }
        #two {
            /* padding: 5px 20px 50px 100px; */
            padding-top: 5px;
            padding-right: 20px;
            padding-bottom: 50px;
            padding-left: 100px;
        }
    </style>
</head>
<body>
    <div>内边距设置-1</div>
    <br>
    <span>span设置内边距</span>
    <span id="one">吃得苦中苦，方能开路虎</span>
    <span id="two">少壮不努力，长大开夏利</span>
</body>
</html>

在这里插入图片描述

13.3 外边距_margin

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>
        span {
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* margin: 10px; */
            /* margin: 10px 20px; */
            /* margin: 5px 20px 50px 100px; */
            margin-top: 5px;
            margin-right: 20px;
            margin-bottom: 50px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>

在这里插入图片描述

2. 取消内外边距

在这里插入图片描述

3. 外边距塌陷问题

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

13.4 盒子大小计算

在这里插入图片描述
在这里插入图片描述

13.5 盒子阴影_box-shadow

在这里插入图片描述
在这里插入图片描述

<!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>
        div {
            width: 300px;
            height: 200px;
            background-color: orange;
            margin: 100px auto;
            box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

14. 列表样式

14.1 列表样式

在这里插入图片描述

1. list-style-type

在这里插入图片描述

<!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>
        ul {
            list-style-type: disc;
        }

    </style>
</head>

<body>
    <ul>
        <li>宝马530li</li>
        <li>奥迪A6L</li>
        <li>奔驰E300</li>
    </ul>


</body>

</html>

在这里插入图片描述

2. list-style-image

在这里插入图片描述

<!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>
        ol {
            list-style-image: url(images/c11.jpg);
        }
    </style>
</head>

<body>
    <ol>
        <li>宝马530li</li>
        <li>奥迪A6L</li>
        <li>奔驰E300</li>
    </ol>
</body>

</html>

在这里插入图片描述

3. list-style

在这里插入图片描述

<!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>
        li {
            list-style: none;
        }

        ol li {
            list-style: url(images/c11.jpg);
        }
    </style>
</head>
<body>
    <ul>
        <li>宝马530li</li>
        <li>奥迪A6L</li>
        <li>奔驰E300</li>
    </ul>

    <ol>
        <li>宝马530li</li>
        <li>奥迪A6L</li>
        <li>奔驰E300</li>
    </ol>
</body>
</html>

在这里插入图片描述

14.2 文章列表

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 450px;
            height: 226px;
            border: 1px solid #ccc;
            background-image: url(images/line.jpg);
            margin-top: 30px;
            margin-left: 30px;
            padding: 0 10px;
        }
        h3 {
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            border-bottom: 1px solid #ccc;
            padding-left: 15px;
        }
        a {
            color: #000;
            text-decoration: none;
        }

        li {
            padding: 5px 15px;
            list-style: url(images/c11.jpg);
            list-style-position: inside;
            border-bottom: 1px dashed #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>家有萌宠/Cute Pet</h3>
        <ul>
            <li><a href="#">喵星人的最爱</a></li>
            <li><a href="#">我与哈士奇二三事</a></li>
            <li><a href="#">哈士奇真的爱拆家吗？</a></li>
            <li><a href="#">英短的价格区间</a></li>
            <li><a href="#">如何训练边牧</a></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

15. 网页布局

15.1 简介

在这里插入图片描述

在这里插入图片描述

15.2 普通流

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 块元素 -->
    <div>aaaa</div>
    <div>bbbb</div>
    <!-- 行元素 -->
    <span>cccc</span>
    <span>dddd</span>
    <span>eeee</span>
    <span>cccc</span>
    <span>dddd</span>
    <span>eeee</span>
    <span>cccc</span>
    <span>dddd</span>
    <span>eeee</span>
    <span>cccc</span>
    <span>dddd</span>
    <span>eeee</span>
    <span>cccc</span>
    <span>dddd</span>
    <span>eeee</span>
</body>

</html>

在这里插入图片描述

15.3 浮动_float

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>
        .one {
            width: 200px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        .two {
            width: 300px;
            height: 300px;
            background-color: green;
            float: left;
        }
        .three {
            width: 300px;
            height: 300px;
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="one"><span>第1个div</span></div>
    <div class="two"><span>第2个div</span></div>
    <div class="three"><span>第3个div</span></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

15.4 列表浮动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>
        body {
            background-color: #eee;
        }
        li {
            float:left;
            list-style: none;
            width: 280px;
            height: 280px;
            margin: 10px;
            padding: 20px;
            background-color: #fff;
            text-align: center;
        }

        li img {
            width: 260px;
        }

        p {
            color: #707070;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>诱惑美食</h1>
    <ul>
        <li>
            <p>Country bread with dry figs</p>
            <img src="./images/1.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Fruits</p>
            <img src="./images/2.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Bell Pepper</p>
            <img src="./images/3.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Oranges</p>
            <img src="./images/4.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Healthy breakfast</p>
            <img src="./images/5.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Homemade Cupcakes</p>
            <img src="./images/6.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Strawberries</p>
            <img src="./images/7.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Custard Croissant</p>
            <img src="./images/8.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
    </ul>

    <h1>春夏秋冬</h1>
    <ul>
        <li>
            <p>Country bread with dry figs</p>
            <img src="./images/1.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Fruits</p>
            <img src="./images/2.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Bell Pepper</p>
            <img src="./images/3.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Oranges</p>
            <img src="./images/4.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Healthy breakfast</p>
            <img src="./images/5.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Homemade Cupcakes</p>
            <img src="./images/6.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Strawberries</p>
            <img src="./images/7.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
        <li>
            <p>Custard Croissant</p>
            <img src="./images/8.jpg" alt="">
            <a href="#">Free Download</a>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述

15.5 清除浮动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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>
        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .two {
            float: left;
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        .erba {
            width: 600px;
            height: 200px;
            background-color: green;
        }

        .three {
            clear: both;
        }
    </style>
</head>

<body>

    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
        <!-- 额外标签,用于清除浮动 -->
        <div class="three"></div>
    </div>

    <div class="erba"></div>

</body>

</html>

2. 父级添加overflow法

在这里插入图片描述

<!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>
        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .two {
            float: left;
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .erba {
            width: 600px;
            height: 200px;
            background-color: green;
        }
        /* 去除浮动 */
        .father {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="erba"></div>
</body>
</html>

3. after伪元素法

在这里插入图片描述
在这里插入图片描述

<!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>
        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .two {
            float: left;
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .erba {
            width: 600px;
            height: 200px;
            background-color: green;
        }

        .clearfix:after {
            content: "aaa";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="erba"></div>
</body>
</html>

4. 双伪元素法

在这里插入图片描述
在这里插入图片描述

<!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>
        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .two {
            float: left;
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .erba {
            width: 600px;
            height: 200px;
            background-color: green;
        }
        .clearfix:after,.clearfix:before {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="erba"></div>
</body>
</html>

5. 总结

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

16. 定位_position

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1. 静态定位

在这里插入图片描述

2. 相对定位

在这里插入图片描述
在这里插入图片描述

3. 绝对定位_absolute

<!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>
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: green;
            margin-top: 100px;
            margin-left: 100px;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        .son {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .new {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
            <div class="new"></div>
        </div>
    </div>
    
</body>
</html>

4. 子绝父相

在这里插入图片描述

5. 固定定位

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. 堆叠

在这里插入图片描述

<!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>
        div {
            width: 200px;
            height: 200px;
        }
        .one {
            position: fixed;
            top: 0;
            left: 0;
            background-color: orange;
            z-index: 1;
        }
        .two {
            position: fixed;
            top: 50px;
            left: 50px;
            background-color: green;
        }
        .three {
            position: fixed;
            top: 100px;
            left: 100px;
            background-color: blue;
            z-index: 20;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>
与海boy
关注
专栏目录
python从入门到实战django_Python Web开发从入门到实战(Django+Bootstrap微课视频版)
weixin_39842937的博客
12-08 1713
部分基础知识篇章Python Web环境搭建1.1Python Web概述1.1.1Python语言简介1.1.2Python Web的优势1.2安装Python1.3安装开发工具VS Code1.3.1VS Code下载和安装1.3.2VS Code基本配置1.3.3编写和运行Python脚本1.4个Python Web程序1.4.1Django安装1.4.2创建Django项目1.4.3创建应...
html css入门经典 pdf,CSS入门经典
weixin_42425334的博客
06-23 261
《CSS入门经典》是2008年清华大学出版社出版的图书，作者是(美国)(RichardYork)约克。[1]书名CSS入门经典作者(美国)(RichardYork)约克出版社出版时间2008年定价68 元开本16 开ISBN9787302179542CSS入门经典内容简介编辑语音本书详细而有条理地介绍了如何结合使用层叠样式表(CSS)与HTML、XHTML、XML，...
CSS从入门到精通
m0_55674689的博客
01-31 1657
css从入门到精通
web前端入门学习笔记——css基础（传智播客）
cindy647的博客
05-17 2920
第二部分：CSS基础１ Css概念CSS 指层叠样式表 (Cascading StyleSheets)(级联样式表)Css是用来美化html标签的，相当于页面化妆。◆样式表书写位置２  选择器２.1  写法选择器是一个选择谁（标签）的过程。选择器{属性:值； 属性:值;}属性                                                 解释 Width:20...
web前端开发基础入门html5+css3+js学习笔记（一）
weixin_44356316的博客
08-16 1504
目录1.第一个前端程序2.前端工具的选择与安装3.VSCode开发者工具快捷键4.HTML5简介与基础骨架4.1 HTML5的DOCTYPE声明4.2 HTML5基本骨架4.2.1 html标签4.2.2 head标签4.2.3 body标签4.2.4 title标签4.2.5 meta标签5.标签之标题5.1 快捷键5.1 标题标签位置摆放6.标签之段落、换行、水平线6.1 标签之段落6.2换行6.3 水平线7.标签之图片8.图片路径详解8.1 绝对路径8.2 相对路径8.2.1 子级`/`8.2.2 父
html与css入门经典 第9版,HTML与CSS入门经典(第9版)
weixin_34208146的博客
06-14 258
内容提要前言超越HTML可视化示例问题、测验和练习关于作者第1章 理解Web的工作方式1.1 HTML和WWW简史1.2 创建Web内容1.3 理解Web内容递送1.4 选择Web托管提供商1.5 利用多种Web浏览器执行测试1.6 创建一个示例文件1.7 使用FTP传输文件1.7.1 选择FTP客户端1.7.2 使用FTP客户端1.8 了解在Web服务器上放置文件的位置1.8.1 基本的文件管理...
Python Flask Web 框架入门
热门推荐
python学习者的博客
09-03 20万+
Flask是一个轻量级的基于Python的web框架。 本文适合有一定HTML、Python、网络基础的同学阅读。 1. 简介 这份文档中的代码使用 Python 3 运行。 是的，所以读者需要自己在电脑上安装Python 3 和 pip3。建议安装最新版本，我使用的是Python 3.6.4。 安装方法，可以自行谷歌或者百度。 建议在 linux 下实践本教程中命令行操作、执行代码。 2...
pythonweb开发实战pdf百度贴吧_Python Web自动化测试入门与实战，从入门到入行
weixin_39531229的博客
11-24 837
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼图书目录第一篇 基础篇第1章 学习环境的搭建... 11.1 环境搭建... 11.1.1 Selenium简介... 21.1.2 Python简介... 31.1.3 Python的安装... 51.1.4 环境变量的设置... 61.1.5 Selenium的安装... 71.1.6 浏览器驱动的安装... 81.1.7 PyC...
web---CSS基础知识
Allure泽宇的博客
06-23 1603
CSS基础知识
PHP和MySQL Web开发第4版pdf以及源码
10-13
《php和mysql web开发(原书第4版)》：开发人员专业技术丛书。 目录 读者反馈 译者序 前言 作者简介 第一篇 使用PHP 第1章 PHP快速入门教程 1.1 开始之前：了解PHP 1.2 创建一个示例应用：Bob汽车零部件商店 ...
PHP和MySQL WEB开发(第4版)
05-31
11.2 从Web查询数据库的基本步骤 11.2.1 检查与过滤用户输入数据 11.2.2 建立一个连接 11.2.3　选择使用的数据库 11.2.4 查询数据库 11.2.5 检索查询结果 11.2.6 从数据库断开连接 11.3 将新信息放入数据库 11.4 ...
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1338
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
分享有趣的、贴近生活的CS知识
10-07 848
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
Vue根实例、实例总结
m0_54007573的博客
10-04 689
Vue根实例、实例总结
前后分离项目记录
最新发布
qq_25806839的博客
10-10 184
打包报错 Thread Loader时，增加以下代码： 上线，打包prod时:
一文区分SSTI 和 CSTI
zkaq7777777的博客
10-10 172
𝗦𝗲𝗿𝘃𝗲𝗿-𝘀𝗶𝗱𝗲 𝘁𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗶𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 指可能发生使用服务器端模板引擎的 Web 应用程序。它涉及代码注入攻击，攻击者可以在服务器端模板中注入并执行恶意代码。𝗖𝗹𝗶𝗲𝗻𝘁 𝗦𝗶𝗱𝗲 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗜𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 是一个安全问题，攻击者的输入是注入页面并由客户端 JavaScript 库处理。TL;SSTI 允许在远程服务器上执行代码，而 CSTI 允许在受害者端【客户端】执行任意 JavaScript 代码。
VB.Net Web开发入门教程：从11.1到11.2的全解析
"【VB.Net】[Web开发入门].pdf"是一本针对初学者的Web开发指南，主要使用Visual Basic .NET（VB.NET）语言进行讲解。该文档涵盖了Web开发的基础知识，特别是与ASP.NET相关的技术，适合想要学习或深入理解VB.NET在Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

与海boy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值