直接贴代码吧:

html代码

  1. <div class="border-01">
  2. <div class="border-001">
  3. <ul class="weibo-left">
  4. <li><a href="#">设置为首页</a></li>
  5. <li><a href="#">手机新浪网</a></li>
  6. <li><a href="#">移动客户端</a></li>
  7. </ul>
  8. <ul class="weibo-right">
  9. <li><a href="#">登录</a></li>
  10. <li class="weibo">
  11. <a href="#">微博</a>
  12. <ul>
  13. <li><a href="#">私信</a></li>
  14. <li><a href="#">评论</a></li>
  15. <li><a href="#">@我</a></li>
  16. </ul>
  17. </li>
  18. <li><a href="#">博客</a></li>
  19. <li><a href="#">邮箱</a></li>
  20. <li><a href="#">网站导航</a></li>
  21. </ul>
  22. </div>

css代码:

  1. body,div{
  2. margin:;
  3. padding:;
  4. font-family:"Microsoft YaHei","微软雅黑","SimSun","宋体";
  5. }
  6. ul,li{
  7. list-style: none;
  8. margin:;
  9. padding:;
  10. }
  11. a{
  12. text-decoration: none;
  13. color: #4c4c4c;
  14. }
  15. .border-01{
  16. width: 100%;
  17. border-top: 4px solid #ff8400;
  18. border-bottom: 1px solid #edeef0;
  19. /* 文字居中对齐 height=line-height */
  20. height: 42px;
  21. line-height: 42px;
  22. }
  23. .border-001{
  24. width: 982px;
  25. margin: 0 auto;
  26. font-size: 12px;
  27. }
  28. .weibo-left{
  29. float: left;
  30. }
  31. .weibo-right{
  32. float: right;
  33. }
  34. /* 使用float来实现横排,而不是父组件设置display为flex */
  35. .weibo-left>li,.weibo-right>li{
  36. float: left;
  37. padding:0px 14px;
  38. }
  39.  
  40. .weibo-left>li:hover,.weibo-right>li:hover{
  41. /* color: #ebbe7a; */
  42. background-color: #edeef0;
  43. }
  44. .weibo-left>li>a:hover,.weibo-right>li>a:hover{
  45. color: #ff8400;
  46. }
  47. .weibo>ul{
  48. position: absolute;
  49. display: none;
  50. /* margin-left: -14px; */
  51. /* left: -14px; */
  52. /* padding: 0 14px; */
  53. }
  54. /* 父元素hover实现子元素显示 */
  55. .weibo:hover >ul{
  56. display: block;
  57. width: 113px;
  58. /* margin-left: -14px; */
  59. /* padding: 0 14px; */
  60. }
  61. .weibo:hover >ul>li{
  62. border: 1px solid #ff8400;
  63. border-top: none;
  64. padding: 0 14px;
  65. margin-left: -14px;
  66. }
  67. .weibo:hover >ul>li>a:hover{
  68. background-color:#edeef0;
  69. color: #ff8400;
  70. display: block;
  71. }
  72. .weibo:hover >ul>li:hover{
  73. background-color:#edeef0;
  74. /* color: #ff8400; */
  75. }

实现效果:

知识点总结: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. 胆机实作(1)——12AU7甲类单端前级

    第一次做胆机,选了最经典的单端共阴架构.电路没有什么复杂的,基本就是教科书电路,没有用负反馈,因为我不喜欢负反馈的声音.用电路板做机器焊接也没什么难度,器件找好开焊就行,试做机就不打算找外壳了,也不用 ...

  2. zabbix server端与agent端源码安装 自定义监控项

    ZabbixServer的安装(只有源码装zabbix才能装支持java) 搭建自定义yum仓库并安装支持包 yum -y install createrepo #下载依赖关系命令 createrep ...

  3. python安装gmpy2模块时出现错误的解决

    接下来表演的是安装Python模块gmpy2 此模块用来进行高精度计算的模块,个人根据需求常用来进行rsa加密算法的计算 作为一个资质浅淡的ubuntu玩家,这些知识当然是在网上搜索得到的,不过网上的 ...

  4. backupAgent节点

    在<application>节点中有一个非常重要的属性,那就是backupAgent. 1.backupAgent简介 Androidd:backupAgent用来设置备份代理.对于大部分 ...

  5. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-2.申请微信支付介绍和不同场景的支付方式

    笔记 2.申请微信支付介绍和不同场景的支付方式         简介:介绍微信商户平台,支付方式和使用场景,申请微信支付流程                  1.什么是微信商户平台:        ...

  6. 执行kubelet卡、解决

    现象: 执行kubectl get po -o wide 非常卡.慢 原因: 修改node名称造成的, 解决: https://my.oschina.net/u/3390908/blog/164976 ...

  7. 【POJ - 3045】Cow Acrobats (贪心)

    Cow Acrobats Descriptions 农夫的N只牛(1<=n<=50,000)决定练习特技表演. 特技表演如下:站在对方的头顶上,形成一个垂直的高度. 每头牛都有重量(1 & ...

  8. ValueError: numpy.dtype has the wrong size, try recompiling

    问题ValueError: numpy.dtype has the wrong size, try recompiling解决 这是因为 Python 包的版本问题,例如安装了较旧版本的 Numpy, ...

  9. 关于MySQL 5.6 中文乱码的问题(尤其是windows的gbk编码)

    一般MySQL 数据库乱码由以下几种情况造成(按照顺序): 1. 创建数据库的时候没设置编码,解决办法: 就是在创建数据库的时候设置编码, 例如: CREATE DATABASE `mydb` CHA ...

  10. NPM安装过程中的一些问题与解决

    1. 安装 vue-cli3后提示 : Package require os(darwin) not compatible with your platform(win32). 上面是因为安装 npm ...