浮动与定位的实操练习

VIP文章 ༨Rꫀꪖᦔᵧₒᵤ11

已于 2023-01-19 17:17:04 修改

阅读量142

点赞数

于 2023-01-19 13:14:25 首次发布

本文链接：https://blog.csdn.net/weixin_69821704/article/details/128730033

版权

一、浮动的练习

完成如下效果

<!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;
        }
        .nav{
            width: 1500px;
            height: 50px;
            line-height: 50px;
            background-color: #666;
        }
        .nav ul{
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
            clear: both;
        }
        /* 第二种清除浮动的方法 */
        /* .nav ul::after{
            content: "";
            display: block;
            clear: both;
        } */
        .nav ul li{
            list-style-type: none;
            float: left;
            padding: 0 20px;
        }
        .nav ul li a{
            color: #b0b0b0;
            text-decoration: none;
            font-size: 18px;
        }
        .nav ul li a:hover{
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="nav">
        <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>
            <li><a href="#">家电</a></li>
            <li><a href="#">医药 | 健康</a></li>
            <li><a href="#">宠物</a></li>
            <li><a href="#">服务</a></li>
        </ul>
        <p>这是一个好消息，同时也是一个坏消息</p>
    </div>
</body>
</html>

二、定位_下拉列表实操

实现下面的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <me

最低0.47元/天解锁文章

༨Rꫀꪖᦔᵧₒᵤ11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动与定位的实操练习

浮动与定位的一些简单实操练习
复制链接

扫一扫

专栏目录

浮动与定位的实操练习

“相关推荐”对你有帮助么？