直接贴代码吧:

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. Kbengine游戏引擎-【1】kbengine安装

    本文主要介绍如何在Linux上安装 官网环境要求:Centos >= 5.x, Debian >= 5.x GCC版本: >= 4.4.x 官网链接 本文的安装环境介绍:Centos ...

  2. 【Taro全实践】修改radio组件的大小

    需求是将radio选中后颜色改为橙色.大小改成合适大小. 1.改颜色 <Radio color='#FF7464'></Radio> 2.改大小 <Radio style ...

  3. mybatis之分页查询

    1)StudentDao.java /** * 持久层*/ public class StudentDao { /** * 增加学生 */ public void add(Student studen ...

  4. 小D课堂 - 新版本微服务springcloud+Docker教程_6-01 微服务网关介绍和使用场景

    笔记 第六章 微服务网关zuul开发实战 1.微服务网关介绍和使用场景     简介:讲解网关的作用和使用场景 (画图)          1)什么是网关         API Gateway,是系 ...

  5. IDEA使用git

    本文转自:http://www.cnblogs.com/java-maowei/p/5950930.html 一.安装git 下载地址:  https://git-scm.com/download/w ...

  6. #dokcer部署code-server web版vscode+golang

    codercom/code-server:latest不支持插件在线安装 codercom/code-server:v2目前为最新版1. #创建 docker rm -f vscode docker ...

  7. kettle转换和任务的基本使用

    0 创建转换 并保存0816_em.ktr 1 主对象树中选择DB连接,创建2个DB连接 2 创建表输入 核心对象树中选择输入>表输入 3 核心对象树中选择输出>插入/更新表 并连线 4 ...

  8. Spring MVC的多视图解析器配置及与Freemarker的集成

    一.从freemarker谈起 Freemarker使用模板技术进行视图的渲染.自从看了Struts标签.Freemarker.JSTL的性能对比后,我毅然决定放弃Struts标签了!效率太差…… S ...

  9. 短路与(&&)、短路或(||)

    昨晚上课,老师用了类似这样的语法 fn&&fn.call(obj) fn&&fn.call(obj)  这里的fn为回调函数.老师在课上也没过多解释这句是啥意思,然后我 ...

  10. 【POJ - 2078】Matrix(dfs)

    -->Matrix Descriptions: 输入一个n×n的矩阵,可以对矩阵的每行进行任意次的循环右移操作,行的每一次右移后,计算矩阵中每一列的和的最大值,输出这些最大值中的最小值. Sam ...