abstract:这节课主要是对上节做的布局做了一个完善,利用列表加上了下拉导航菜单样式,导航下拉框主要用到的知识点有:定位:position:relative(相对定位)/absolute(绝对定位);导航下拉原理:先定位实现导航需要出现在网页的位置,然后display属性设置鼠标动作:即先给需要出现下拉效果的a元素一个定位,使其作为参照物,然后给需要展示的下拉内容b元素设置为绝对定位,这样b元素就会始终相对于a
这节课主要是对上节做的布局做了一个完善,利用列表加上了下拉导航菜单样式,导航下拉框主要用到的知识点有:
定位:position:relative(相对定位)/absolute(绝对定位);
导航下拉原理:先定位实现导航需要出现在网页的位置,然后display属性设置鼠标动作:即先给需要出现下拉效果的a元素一个定位,使其作为参照物,然后给需要展示的下拉内容b元素设置为绝对定位,这样b元素就会始终相对于a元素位置固定,最后设置鼠标移动上去之前是不可见的,移动上去后才以块级元素的方式显示:
div{
display:none;
}
div:hover{
display:block;
}
相对定位的参照物是其本身原始的位置,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素
参考:https://blog.csdn.net/zgrkaka/article/details/60465183。
完成效果:
代码部分:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <style type="text/css"> * { margin: 0; padding: 0; } .header { text-align: center; width: 100%px; height: 35px; background: #F4F4F4; } .header-content { width: 1000px; height: 35px; background-color: #F4F4F4; margin: 0 auto; } .left { width: 300px; height: 35px; background-color: #F4F4F4; float: left; } .right { width: 600px; height: 35px; background-color: #F4F4F4; float: right; } .clear { clear: both; } a { display: inline-block; height: 35px; font-size: 13px; text-decoration: none; color: #6c6c6c; margin: 8px 0 -8px 8px; ; } a:hover { color: red; } #sign { color: red; } #tao { margin-left: 15px; } .myt { width: 88px; position: relative; text-align: left; display: inline-block; height: 35px; } .cart { display: inline-block; height: 35px; } .myt:hover { background: white; } .fa-cart-arrow-down { color: #FF0000; } .else { text-align: center; margin: 0 auto; margin-top: 50px; width: 1000px; height: 500px; background-color: bisque; } ul { position: absolute; display: none; border: 1px solid #f4f4f4; border-top: 0px; } li { font-size: 13px; text-align: left; text-indent: 5px; list-style-type: none; background-color: #ffffff; width: 86px; height: 30px; line-height: 30px; } .myt:hover ul { display: block; } li:hover { background: #f4f4f4; } </style> </head> <body> <div class="header"> <div class="header-content"> <div class="left"> <a id="sign" href="">亲,请登录</a> <a href="">免费注册</a> <a id="tao" href="">手机逛淘宝</a> <div class="clear"></div> </div> <div class="right"> <a href="">淘宝首页</a> <span class="myt"> <a href="">我的淘宝</a> <i class="fa fa-sort-desc" aria-hidden="true"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </span> <span class="cart"> <i class="fa fa-cart-arrow-down" aria-hidden="true"></i> <a id="" href="">购物车</a> </span> <span class="myt"> <a href="">卖家中心</a> <i class="fa fa-sort-desc" aria-hidden="true"></i> <ul> <li>正在出售</li> <li>已出售</li> <li>待发货</li> <li>已发货</li> </ul> </span> <a href="">联系客服</a> <div class="clear"></div> </div> </div> </div> <div class="else">总结<br> 前面学过的知识这节课主要用到的: <br> 1- 将行内元素转换成块级元素(display:inline-block)<br> 2- 伪类hover改变字体和背景颜色<br> 3- 浮动和清除浮动:float:left/right;(浮动设置完后, <br> 可以在同级元素最后设置一个空的div标签, <br> 用css给它设置属性:clear:both即可。)<br> 4- 图标字体库的引用:引入方式跟引入外部css文件一样。<br> </div> </body> </html>
Correcting teacher:灭绝师太Correction time:2018-11-30 09:09:16
Teacher's summary:上次作业已经说过代码有冗余,没有修改奥!定位知识理解的不错!