day1-css练习[新浪首页顶部栏]
2019-10-16 07:53:19来源:博客园 阅读 ()
直接贴代码吧:
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: 0; padding: 0; font-family:"Microsoft YaHei","微软雅黑","SimSun","宋体"; } ul,li{ list-style: none; margin: 0; padding: 0; } 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使用,不影响文档流中元素布局显示,可实现元素层叠显示
如有不正确的地方欢迎指正~~
原文链接:https://www.cnblogs.com/xinyulove/p/11675007.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:小程序版权标签
- 2020前端练习 —— 超级无敌简易版博客园 2020-05-14
- Bootstrap4 表格练习 2020-04-15
- Bootstrap4网格系统+文字排版+颜色 简单练习 2020-04-14
- HTML连载80-多重背景图片及其练习 2020-04-05
- 练习中的零碎知识-CSS篇 2020-03-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash