HTML入门（浮动布局、待选中光标样式）————DAY5

最新推荐文章于 2023-06-18 14:40:09 发布

好吃的都给你呀

最新推荐文章于 2023-06-18 14:40:09 发布

阅读量147

点赞数

分类专栏：前端杂文文章标签： HTML 待选光标样式浮动布局

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102593962

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

截图无法选中鼠标样式

主要是浮动的设置和清理浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动布局</title>
    <style>
        /* *{
            margin:0;
            padding:0;
        } */
        body{
            background-color: pink;
            margin:0;
            padding:0; 
        
        }
        .aa{
            background-color: royalblue;
            list-style: none;
            padding: 0;
            margin:0px;
        }
        .q{
            
            background-color: powderblue;
            margin:10px 10px;
            /* float，让元素使用浮动布局，在浮动布局中，块元素不再单独占一行，而且宽度不再
            和父元素等宽，也进行左右排列。 */
            /* 浮动布局分为左浮动和右浮动，区别是从左向右排列和从右向左排列 */
            float: left;
            padding: 5px 5px;
            border-radius: 8px;
            /* 定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */
            /* 还有很多其他样式， 参考链接为：https://www.w3school.com.cn/cssref/pr_class_cursor.asp*/
            cursor: pointer;
        }
        .q:hover{
            background-color: salmon;
            color: slategrey;
        }
        /* 清除浮动的方式， */
        .aa::after{
            content: "";
            /* 转换为块元素，换行符重新恢复 */
            display: block;
            /* 清除浮动 */
            clear: both;
        }
    </style>
</head>
<body>
    <ul id="a" class="aa">
        <li class="q">路飞</li>
        <li class="q">乔巴</li>
        <li class="q">娜美</li>
        <li class="q">索隆</li>
        <li class="q">山治</li>
        <li class="q">罗宾</li>
    </ul>
</body>
</html>