0基础学web----CSS浮动

最新推荐文章于 2024-07-25 14:15:14 发布

情绪员Tim

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量397

点赞数 1

分类专栏： web前端文章标签： css html elementui

本文链接：https://blog.csdn.net/QQ675396947/article/details/122156507

版权

web前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

01-结构伪类-基本用法

<!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>Document</title>
    <style>
        /*li标签的第一个元素变blue色*/
        li:first-child {
            color: blue;
        }

        /*li标签的最后一个元素变red色*/
        li:last-child {
            color: red;
        }

        /*li标签的第二个元素变背景springgreen色*/
        li:nth-child(2) {
            width: 5000px;
            height: 20px;
            background-color: springgreen;
        }

        /*li标签的倒数八个元素变背景tomato色*/
        li:nth-last-child(3) {
            width: 5000px;
            height: 20px;
            background-color: tomato;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>

</body>

</html>

02-结构伪类-公式

<!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>Document</title>
    <style>
 
        /*li标签的第一个元素起的双数变seagreen色*/
        li:nth-child(2n) {
            width: 5000px;
            height: 20px;
            background-color: seagreen;
        }

        /*li标签的最后一个元素起的双数变slategrey色*/
        li:nth-last-child(2n) {
            width: 5000px;
            height: 20px;
            background-color: slategrey;
        }

        
    </style>
</head>

<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>

</body>

</html>

03-伪元素

<!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>Document</title>
    <style>
        div{
        }
        div::before{
            content: '老鼠';
            color: chartreuse;

        }
        div::after{
            content: '大米';
            color: crimson;
        }
    </style>
</head>
<body>
    <div>爱</div>
</body>
</html>

04-标准流

05-体验内行块问题

06-作用

<!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>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
        }
        .lae{
            background-color: crimson;
            /* 浮动最左边 */
            float: left;
        }

        .lew{
            background-color: darkturquoise;
            /* 浮动最右边 */
            float: right;
        }

    </style>
</head>
<body>
        <div class="lae">老A</div>
        <div class="lew">老B</div>
</body>
</html>

07-特点

<!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>Document</title>
    <style>
 
        .lae{
            width: 100px;
            height: 100px;
            background-color: crimson;

            float: left;

            margin-top: 10px;

            /* 因为浮动的出现，盒子无法水平居中 */
            /* margin: 0 auto; */
        }

        .lew{
            width: 200px;
            height: 200px;
            background-color: darkturquoise;

            float: left;
        }
        
        .llo{
            width: 300px;
            height: 300px;
            background-color:darkviolet;
        }

    </style>
</head>
<body>
        <div class="lae">老A</div>
        <div class="lew">老B</div>
        <div class="llo">老C</div>
</body>
</html>

08-综合案例-小米布局

<!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>Document</title>
    <style>
        .box{
            height: 40px;
            background-color: #333;
        }
        .bss{
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        .poo{
            width: 1226px;
            height: 460px;
            background-color:red;
            margin: 0 auto;
        }
        .left{
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa550;
        }
        .right{
            float: right;
            width: 992px;
            height: 460px;
            background-color: #87ceed;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="bss"></div>
    <div class="poo">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

09-拓展-CSS属性顺序

CSS书写顺序：

浮动/display
盒子模型：margin border padding 宽度高度背景颜色
文字样式

10-综合案例-小米产品

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1226px;
            height: 614px;
            /* background-color: rgb(17, 240, 17); */
            margin: auto;
        }
        .left{
            float: left;
            width: 234px;
            height: 614px;
            background-color: #800080;
            
        }
        .right{
            float: right;
            width: 978px;
            height: 614px;
            /* background-color: rgb(31, 34, 219); */
        }
    
        .right>ul>li{
            float: left;

            width: 234px;
            height: 300px;
            background-color: #87ceeb;
            margin-right: 14px;
            margin-bottom: 14px;

            list-style: none; 
        }
        .right>ul>li:nth-child(4n){
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

12-综合案例-导航

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
            margin: auto;
        }
        .box>ul>li{

            list-style: none;
        }
        .box>ul>li>a{
            float: left;
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            color: #fff;
            font-size: 16px;
 

        }
        .box>ul>li>a:hover{
   
            background-color: #008000;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <a href=""></a>
            <li><a href="">新闻1</a></li>
            <li><a href="">新闻2</a></li>
            <li><a href="">新闻3</a></li>
            <li><a href="">新闻4</a></li>
            <li><a href="">新闻5</a></li>
            <li><a href="">新闻6</a></li>
            <li><a href="">新闻7</a></li>
            <li><a href="">新闻8</a></li>
        </ul>
    </div>
</body>
</html>

13-清楚浮动-场景搭建

<!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>Document</title>
    <style>
        .top{
            width: 1000px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
        .left{
            /* 左浮动 */
             float: left;
            width: 200px;
            height: 300px;
            background-color: #CCC;
        }
        .right{
            /* 右浮动 */
            float:right ;
            width: 790px;
            height: 300px;
            background-color:blueviolet;
        }

        .bottom{
            height: 180px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <div class="bottom"></div>
</body>
</html>

14-清楚浮动-额外标签

<!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>Document</title>
    <style>
        .top{
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            margin: 0 auto;
        }
        .left{
            /* 左浮动 */
             float: left;
            width: 200px;
            height: 300px;
            background-color: #CCC;
        }
        .right{
            /* 右浮动 */
            float:right ;
            width: 790px;
            height: 300px;
            background-color:blueviolet;
        }

        .bottom{
            height: 180px;
            background-color: chartreuse;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父级标签没有高通过赋予clear: both;也可以基于自动比例的高。 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>

    <div class="bottom"></div>
</body>
</html>

15-清楚浮动-单伪元素

<!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>Document</title>
    <style>
        .top{
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            margin: 0 auto;
        }
        .left{
            /* 左浮动 */
             float: left;
            width: 200px;
            height: 300px;
            background-color: #CCC;
        }
        .right{
            /* 右浮动 */
            float:right ;
            width: 790px;
            height: 300px;
            background-color:blueviolet;
        }

        .bottom{
            height: 180px;
            background-color: chartreuse;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
    
    </style>
</head>
<body>
    <!-- 父级标签没有高通过赋予clear: both;也可以基于自动比例的高。 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过CSS添加个标签进行clear: both; -->
    </div>

    <div class="bottom"></div>
</body>
</html>

16-清楚浮动-双伪元素

<!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>Document</title>
    <style>
        .top{
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            margin: 0 auto;
        }
        .left{
            /* 左浮动 */
             float: left;
            width: 200px;
            height: 300px;
            background-color: #CCC;
        }
        .right{
            /* 右浮动 */
            float:right ;
            width: 790px;
            height: 300px;
            background-color:blueviolet;
        }

        .bottom{
            height: 180px;
            background-color: chartreuse;
        }
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }

        .clearfix::after{

            clear: both;
        }
    
    </style>
</head>
<body>
    <!-- 父级标签没有高通过赋予clear: both;也可以基于自动比例的高。 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过CSS添加个标签进行clear: both; -->
    </div>

    <div class="bottom"></div>
</body>
</html>

17-清楚浮动-overflow

<!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>Document</title>
    <style>
        .top{
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            margin: 0 auto;

            /*清楚浮动*/
            overflow: hidden;

        }
        .left{
            /* 左浮动 */
             float: left;
            width: 200px;
            height: 300px;
            background-color: #CCC;
        }
        .right{
            /* 右浮动 */
            float:right ;
            width: 790px;
            height: 300px;
            background-color:blueviolet;
        }

        .bottom{
            height: 180px;
            background-color: chartreuse;
        }
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }

    
    </style>
</head>
<body>
    <!-- 父级标签没有高通过赋予,也可以基于自动比例的高。 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过CSS添加个标签进行clear: both; -->
    </div>

    <div class="bottom"></div>
</body>
</html>

想要视频教学？
请点击下方链接吧！

黑马程序员web前端开发入门教程，前端零基础html5+css3+前端项目视频教程_哔哩哔哩_bilibili

情绪员Tim

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
0基础学web----CSS浮动

01-结构伪类-基本用法<!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..
复制链接

扫一扫