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.先自己注冊一个账号,假设有新浪的账号,微博之类的都能够直接拿来用, ...
随机推荐
- 胆机实作(1)——12AU7甲类单端前级
第一次做胆机,选了最经典的单端共阴架构.电路没有什么复杂的,基本就是教科书电路,没有用负反馈,因为我不喜欢负反馈的声音.用电路板做机器焊接也没什么难度,器件找好开焊就行,试做机就不打算找外壳了,也不用 ...
- zabbix server端与agent端源码安装 自定义监控项
ZabbixServer的安装(只有源码装zabbix才能装支持java) 搭建自定义yum仓库并安装支持包 yum -y install createrepo #下载依赖关系命令 createrep ...
- python安装gmpy2模块时出现错误的解决
接下来表演的是安装Python模块gmpy2 此模块用来进行高精度计算的模块,个人根据需求常用来进行rsa加密算法的计算 作为一个资质浅淡的ubuntu玩家,这些知识当然是在网上搜索得到的,不过网上的 ...
- backupAgent节点
在<application>节点中有一个非常重要的属性,那就是backupAgent. 1.backupAgent简介 Androidd:backupAgent用来设置备份代理.对于大部分 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-2.申请微信支付介绍和不同场景的支付方式
笔记 2.申请微信支付介绍和不同场景的支付方式 简介:介绍微信商户平台,支付方式和使用场景,申请微信支付流程 1.什么是微信商户平台: ...
- 执行kubelet卡、解决
现象: 执行kubectl get po -o wide 非常卡.慢 原因: 修改node名称造成的, 解决: https://my.oschina.net/u/3390908/blog/164976 ...
- 【POJ - 3045】Cow Acrobats (贪心)
Cow Acrobats Descriptions 农夫的N只牛(1<=n<=50,000)决定练习特技表演. 特技表演如下:站在对方的头顶上,形成一个垂直的高度. 每头牛都有重量(1 & ...
- ValueError: numpy.dtype has the wrong size, try recompiling
问题ValueError: numpy.dtype has the wrong size, try recompiling解决 这是因为 Python 包的版本问题,例如安装了较旧版本的 Numpy, ...
- 关于MySQL 5.6 中文乱码的问题(尤其是windows的gbk编码)
一般MySQL 数据库乱码由以下几种情况造成(按照顺序): 1. 创建数据库的时候没设置编码,解决办法: 就是在创建数据库的时候设置编码, 例如: CREATE DATABASE `mydb` CHA ...
- NPM安装过程中的一些问题与解决
1. 安装 vue-cli3后提示 : Package require os(darwin) not compatible with your platform(win32). 上面是因为安装 npm ...