day1-css练习[新浪首页顶部栏]_早秋_前端开发者

直接贴代码吧:

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">
                    <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>
 <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">
                    <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>

<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”><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:hover >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;  */
}
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:hover >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;  */
}

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:hover >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使用,不影响文档流中元素布局显示,可实现元素层叠显示

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

» 本文来自:前端开发者 » 《day1-css练习[新浪首页顶部栏]_早秋_前端开发者》
» 本文链接地址:https://www.rokub.com/73660.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!