day07

A:今天学到的内容

一、实现下拉菜单(运用float,position)

<style>
        *{margin: 0;padding: 0}
        ul{list-style: none;}
        li{float: left;}
        .navBox{background-color: pink}
        .nav{
            margin-right: auto;margin-left: auto;
            width: 1000px;text-align: center;line-height: 50px;
        }
        .nav:after{
            content: "";
            display: table;
            clear: both;
        }
        .nav a{
            text-decoration: none;
            display: block;
            width: 120px;
        }
        .menu{
            position: relative;
        }
        .content{
            position: absolute;
            display: none;
            background-color: palevioletred;
        }
        .menu:hover .content{
            display: block;
        }
        .nav a:hover{
            background-color: gainsboro;
        }
    </style>
<div class="navBox">
    <ul class="nav">
        <li class="menu">
            <a href="">收藏夹</a>
            <div class="content">
                <a href="">我的宝贝</a>
                <a href="">收藏的宝贝</a>
            </div>
        </li>
        <li><a href="">卖家中心</a></li>
        <li><a href="">联系我们</a></li>
        <li><a href="">商城</a></li>
    </ul>
</div>

B:学会了什么

一、实现下拉菜单(运用float,position)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • A.今天学到了什么 1.实现一个下拉菜单(运用知识点float,position) width的继承问题 css3...
    孔子曰_f425阅读 2,629评论 0 0
  • A我今天学习到了什么 1温习day06的知识点 1.iframe 2拓展day07的知识点 1.实现一个下拉菜单/...
    尘榆骡厌阅读 1,571评论 0 0
  • 1、实现一个下拉框(运用知识点float,position) 2、CSS3常用样式的讲解 2.1边框border-...
    陈梦晴阅读 1,729评论 0 0
  • A、今天我学到了什么 1、实现一个下拉框(运用知识点float,position) //HTML //CSS 2、...
    向钱看丷向厚赚阅读 1,688评论 0 0
  • 1 实现一个下拉菜单 运用知识点float,position 2 再说width的继承问题 3 元素效果 3.1 ...
    yuxiaohu阅读 1,864评论 0 0

友情链接更多精彩内容