day1

直接贴代码吧：

html代码

 <div class="border-01">            <div class="border-001">                <ul class="weibo-left">                    <li><a href="#">设置为首页</a></li>                    <li><a href="#">手机新浪网</a></li>                    <li><a href="#">移动客户端</a></li>                </ul>                <ul class="weibo-right"&脆皮烤鸭gt;                    <li><a href葡萄酒的知识="#">登录</a></li>                    <li class="weibo">                        <a href="#">微博</a>                        <ul>                            <li><a href="#">私信</a></li>                            <li><a href="#">评论</a></li>                            <li><a href="#">@我</a></li>                        </ul>                    </li>                    <li><a href="#">博客</a></li>                    <li><a href="#">邮箱</a></li>                    <li><a href="#">网站导航</a></li>                </ul>            </div>

css代码：

body,div{    margin: 0;    padding: 0;    font-family:"microsoft yahei","微软雅黑","simsun","宋体";}ul,li{    list-style: none;    margin: 0;    padding: 0;}a{    text-decoration: none;    color: #4c4c4c;}.border-01{    width: 100%;    border-top: 4px solid #ff8400;    border-bottom: 1px solid #edeef0;    /* 文字居中对齐  height=line-height */    height: 42px;    line-height: 42px;}.border-001{    width: 982px;    margin: 0 auto;    font-size: 12px;}.weibo-left{    float: left;}.weibo-right{    float: right;}/* 使用float来实现横排，而不是父组件设置display为flex */.weibo-left>li,.weibo-right>li{    float: left;    padding:0px 14px;}.weibo-left>li:hover,.weibo-right>li:hover{    /* color: #ebbe7a; */    background-color: #edeef0;}.weibo-left>li>a:hover,.weibo-right>li>a:hover{    color: #ff8400;}.weibo>ul{    position: absolute;    display: none;    /* margin-left: -14px; */    /* left: -14px; */    /* padding: 0 14px; */}/* 父元素hover实现子元素显示 */.weibo:hover >ul{    display: block;    width: 113px;    /* margin-left: -14px; */    /* padding: 0 14px; */}.weibo:hovmake的意思er >ul>li{    border: 1px solid #ff8400;    border-top: none;    padding: 0 14px;    margin-left: -14px;}.weibo:hover >ul>li>a:hover{    background-color:#edeef0;    color: #ff8400;     display: block;}.weibo:hover >ul>li:hover{    background-color:#edeef0;    /* color: #ff8400;  */}

实现效果：

知识点总结：1.uli li横向排列可使用float,之前经常使用diplay:flex；这个可能会导致一些问题，酷炫头像后面遇到再添上

2.父元素:hover >子元素{ dispay:block/none}：通过父元素hover属性控制子元素显示与隐藏

3.position:absolute 可使元素脱离文档流，配合z-index使用，不影响文档流中元素布局显示，可实现元素层叠显消防安全图片示

如有不正确的地方欢迎指正~~