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>
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练习[新浪首页顶部栏]的更多相关文章
- 仿新浪首页、主题、详情页,纯html静态页面
仿新浪首页.主题.详情页.纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535
- python抓取新浪首页的小例子
参考 廖雪峰的python教程:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0 ...
- 豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...
- css实现360导航首页超链接变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- python3爬虫-爬取新浪新闻首页所有新闻标题
准备工作:安装requests和BeautifulSoup4.打开cmd,输入如下命令 pip install requests pip install BeautifulSoup4 打开我们要爬取的 ...
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...
- 【转】Python爬虫:抓取新浪新闻数据
案例一 抓取对象: 新浪国内新闻(http://news.sina.com.cn/china/),该列表中的标题名称.时间.链接. 完整代码: from bs4 import BeautifulSou ...
- Python爬虫:抓取新浪新闻数据
案例一 抓取对象: 新浪国内新闻(http://news.sina.com.cn/china/),该列表中的标题名称.时间.链接. 完整代码: from bs4 import BeautifulSou ...
- 【玩转微信公众平台之六】 搭建新浪SAEserver
赶紧接上一篇继续讲. ------本篇将介绍怎样搭建 新浪SAEserver.猛戳 http://sae.sina.com.cn/1.先自己注冊一个账号,假设有新浪的账号,微博之类的都能够直接拿来用, ...
随机推荐
- Kbengine游戏引擎-【1】kbengine安装
本文主要介绍如何在Linux上安装 官网环境要求:Centos >= 5.x, Debian >= 5.x GCC版本: >= 4.4.x 官网链接 本文的安装环境介绍:Centos ...
- 【Taro全实践】修改radio组件的大小
需求是将radio选中后颜色改为橙色.大小改成合适大小. 1.改颜色 <Radio color='#FF7464'></Radio> 2.改大小 <Radio style ...
- mybatis之分页查询
1)StudentDao.java /** * 持久层*/ public class StudentDao { /** * 增加学生 */ public void add(Student studen ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_6-01 微服务网关介绍和使用场景
笔记 第六章 微服务网关zuul开发实战 1.微服务网关介绍和使用场景 简介:讲解网关的作用和使用场景 (画图) 1)什么是网关 API Gateway,是系 ...
- IDEA使用git
本文转自:http://www.cnblogs.com/java-maowei/p/5950930.html 一.安装git 下载地址: https://git-scm.com/download/w ...
- #dokcer部署code-server web版vscode+golang
codercom/code-server:latest不支持插件在线安装 codercom/code-server:v2目前为最新版1. #创建 docker rm -f vscode docker ...
- kettle转换和任务的基本使用
0 创建转换 并保存0816_em.ktr 1 主对象树中选择DB连接,创建2个DB连接 2 创建表输入 核心对象树中选择输入>表输入 3 核心对象树中选择输出>插入/更新表 并连线 4 ...
- Spring MVC的多视图解析器配置及与Freemarker的集成
一.从freemarker谈起 Freemarker使用模板技术进行视图的渲染.自从看了Struts标签.Freemarker.JSTL的性能对比后,我毅然决定放弃Struts标签了!效率太差…… S ...
- 短路与(&&)、短路或(||)
昨晚上课,老师用了类似这样的语法 fn&&fn.call(obj) fn&&fn.call(obj) 这里的fn为回调函数.老师在课上也没过多解释这句是啥意思,然后我 ...
- 【POJ - 2078】Matrix(dfs)
-->Matrix Descriptions: 输入一个n×n的矩阵,可以对矩阵的每行进行任意次的循环右移操作,行的每一次右移后,计算矩阵中每一列的和的最大值,输出这些最大值中的最小值. Sam ...