直接贴代码吧:

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>

css代码:

body,div{
margin:;
padding:;
font-family:"Microsoft YaHei","微软雅黑","SimSun","宋体";
}
ul,li{
list-style: none;
margin:;
padding:;
}
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练习[新浪首页顶部栏]的更多相关文章

  1. 仿新浪首页、主题、详情页,纯html静态页面

    仿新浪首页.主题.详情页.纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535

  2. python抓取新浪首页的小例子

    参考 廖雪峰的python教程:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0 ...

  3. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  4. css实现360导航首页超链接变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. python3爬虫-爬取新浪新闻首页所有新闻标题

    准备工作:安装requests和BeautifulSoup4.打开cmd,输入如下命令 pip install requests pip install BeautifulSoup4 打开我们要爬取的 ...

  6. jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...

  7. 【转】Python爬虫:抓取新浪新闻数据

    案例一 抓取对象: 新浪国内新闻(http://news.sina.com.cn/china/),该列表中的标题名称.时间.链接. 完整代码: from bs4 import BeautifulSou ...

  8. Python爬虫:抓取新浪新闻数据

    案例一 抓取对象: 新浪国内新闻(http://news.sina.com.cn/china/),该列表中的标题名称.时间.链接. 完整代码: from bs4 import BeautifulSou ...

  9. 【玩转微信公众平台之六】 搭建新浪SAEserver

    赶紧接上一篇继续讲. ------本篇将介绍怎样搭建 新浪SAEserver.猛戳 http://sae.sina.com.cn/1.先自己注冊一个账号,假设有新浪的账号,微博之类的都能够直接拿来用, ...

随机推荐

  1. P5020 货币系统

    P5020 货币系统 题解 仔细分析... 这道题其实就是求所给数组中有多少个数字不能被该数组中的数字自由组合表示出来 比如样例1 3,10 不能被该集合里的数字表示出来,所以他们组成目标集合 6=3 ...

  2. 异常值检验实战1--风控贷款年龄变量(附python代码)

    python风控评分卡建模和风控常识(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005214003&am ...

  3. 加载大图片的OOM异常

    * 原因:系统分配给应用程序的堆内存 < 图片的大小* 解决方案:缩放图片显示* OOM:OutOfMemoryError * 图片的宽高 * 宽 2400 * 高 3200 * 手机屏幕的宽高 ...

  4. vector subscript out of range

    报这个错时会弹出一个窗口,貌似内存溢出,这是什么由于vector存放的数据超出了vector的大小所造成的. 解决方法如下: 在Vector<string> vector之后,不能直接通过 ...

  5. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-1.SpringBoot整合微信支付开发在线教育视频站点介绍

    笔记 第一章项目介绍和前期准备 1.SpringBoot整合微信支付开发在线教育视频站点介绍     简介: 课程介绍,和小D课堂在线教育项目搭建开发 1.课程大纲介绍         2.微信支付项 ...

  6. 用python实现简单EXCEL数据统计的实例

    用python实现简单EXCEL数据统计的实例 下面小编就为大家带来一篇用python实现简单EXCEL数据统计的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 任 ...

  7. Java集合(4):未获支持的操作及UnsupportedOperationException

    执行各种添加和移除的方法在Collection中都是可选操作的,这意味着实现类并不需要为这些方法提供实现.当我们调用这些方法时,将不会执行有意义的行为,而是通常抛出UnsupportedOperati ...

  8. vm overcommit参数

    overcommit参数需要根据不同服务来进行调整,使内存得到充分利用的同时保证系统的稳定性.比如redis服务器建议把vm.overcommit_memory设置为1. 1.vm.overcommi ...

  9. ZOJ Problem Set - 1009

    1.参考 http://blog.csdn.net/xiaogugood/article/details/17922105 这篇博客对算法介绍的很详细,我看这道题的时候,将题目理解出错,所以进入了一个 ...

  10. 【Python】【demo实验14】【练习实例】【斐波那契数列】【经典兔子生小兔子问题】

    古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 每个月的兔子数量 1:22:23:4 2+24:6 2+ ...