【css】元素显示类型/二级菜单

最新推荐文章于 2024-07-24 20:42:50 发布

暂无++

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量97

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_43185879/article/details/124598823

版权

元素分类

块元素

div、p、ul、li、dl、dt、dd、h1-h6等
样式：display：block/list-item
特点：

形成矩形区域，默认独占一行
可定义宽高
一般作为容器
p：只能放文本，不能放块元素

行内（内联）元素

a、b、em、i、span、strong等
样式：display：inline
特点：

默认行内逐个显示
不能定义宽高，根据内容的宽高决定
遵顼盒子模型，但margin和padding个别属性不生效

行内块元素

img、input等
样式：display：inline-block
特点：

同时具备行内元素和块元素特点

元素类型互相转换

设置对方的display类型即可
应用：

取消行内元素与块元素的间隙
解决行内元素与块元素的重叠问题

隐藏内容

鼠标悬停设置样式更改

<!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>
        .hide{
	        display:none;
        }
        .box:hover p{
	        display:block;
        }
    </style>
</head>
<body>
    <div class="box">
        显示：
        <p class="hide">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Nihil quis tenetur dolores, praesentium sunt est odio sequi quaerat, 
            quod quidem non quibusdam perferendis nulla delectus expedita! Aperiam assumenda similique dolorem?
        </p>
    </div>
</body>
</html>

练习：二级菜单

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .hide{
            width: 400px;
            margin: 0 auto;
        }
        .hide>li{
            width: 200px;
            line-height: 40px;
            list-style: none;
            text-align: center;
            float: left;
            background-color: rgb(116, 114, 206);
            color: cornsilk;
        }
        .hide>li>ul>li{
            background-color: cornsilk;
            color: rgb(116, 114, 206);
            list-style: none;
            display: none;
        }
        .hide>li:hover{
	        background-color: rgb(194, 194, 221);
            color: black;
        }
        .hide>li:hover ul>li{
            display: block;
        }
        .hide>li>ul>li:hover{
            background-color: rgb(194, 194, 221);
            color: black;
        }
    </style>
</head>
<body>
    <ul class="hide">
        <li>
            一级标题1
            <ul>
                <li>11111111111</li>
                <li>11111111111</li>
                <li>11111111111</li>
                <li>11111111111</li>
                <li>11111111111</li>
                <li>11111111111</li>
            </ul>
        </li>
        <li>
            一级标题2
            <ul>
                <li>222222222222</li>
                <li>222222222222</li>
                <li>222222222222</li>
            </ul>
        </li>
    </ul>
</body>
</html>

暂无++

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】元素显示类型/二级菜单

元素分类块元素div、p、ul、li、dl、dt、dd、h1-h6等样式：display：block/list-item特点：形成矩形区域，默认独占一行可定义宽高一般作为容器p：只能放文本，不能放块元素行内（内联）元素a、b、em、i、span、strong等样式：display：inline特点：默认行内逐个显示不能定义宽高，根据内容的宽高决定遵顼盒子模型，但margin和padding个别属性不生效行内块元素img、input等样式：display：inlin
复制链接

扫一扫