CSDN话题挑战赛第2期
参赛话题:学习笔记
学习html有一段时间了,找了京东购物导航页面进行练习,将之前学的内容复习一次
完成效果图
- 从一个整体布局开始
导航栏分为三个部分,一个是外围区域,中间区域还有就是中间内容区域
以下是body方面的代码,整体的布局:
body> <!--外围的容器 --> <div class="top-bar-wrapper"> <!--内部容器--> <div class="top-middle clearfix"> <!--左侧导航栏--> <div class="location"> <div class="city "> <i class="fas fa-map-marker-alt"></i> <a href="javascript:;">北京</a> </div> <!--设置城市的下拉框--> <div class="city-list"> </div> </div> <!--右侧导航栏--> <ul class="rightmunue clearfix"> <li> <a href="javascript:;">你好,请登录</a> <a class="highlight" href="javascript:;">免费注册</a> </li> <!--分割线,共有七条--> <li class="line"></li> <li> <a href="javascript:;">我的订单</a> </li> <li class="line"></li> <li><a href="javascript:;">我的京东</a> </li> <li class="line"></li> <li> <a href="javascript:;">京东会员</a> </li> <li class="line"></li> <li> <a class="highlight" href="javascript:;">企业采购</a> </li> <li class="line"></li> <li> <a href="javascript:;">客户服务</a> </li> <li class="line"></li> <li> <a href="javascript:;">网站导航</a> </li> <li class="line"></li> <li> <a href="javascript:;">手机京东</a> </li> </ul> </div> </div> </body>
- 接下来是样式的实现
<style> .clearfix::before .clearfix::after { content: ''; display: table; clear: both; } body { font-size: 14px; /*设置字体颜色,但是不建议对body设置,因为会对整个页面生效*/ color: rgb(169, 3, 3) } /*外部边框的样式*/ .top-bar-wrapper { width: 100%; background-color: #ddd; /*height: 30px;此处可以省略高度,因为设置了line-height,再设置li'横向排列后完成效果*/ /*设置行高*/ height: 30px; line-height: 31px; /*设置底部边框*/ border-bottom: 1px #999 solid; } /*设置内部容器的样式*/ .top-middle { /*开一个相对定位*/ display: absolute; width: 1190px; /*内部容器居中*/ margin: 0 auto; } /*设置top-middle的位置*/ .location { float: left; } .city { padding: 0 10px; /*颜色变为透明使得边框消失*/ border: 1px solid transparent; border-bottom: none; position: relative; /*层级第一覆盖city-list和city的连接处*/ z-index: 1; } .location .city-list { display: none; width: 320px; height: 436px; background-color: #ffffff; border: 1px solid #e9e7e7; /*设置绝对定位,使不占父元素的空间*/ position: absolute; box-shadow: 0 0 5px #999; top: 31px; } .rightmunue { float: right; } .rightmunue li { float: left; } /*设置字体颜色样式*/ .top-middle a, .top-middle span, .top-middle i { color: #999; text-decoration: none; } .top-middle a:hover, .top-middle a.highlight { color: #f10125; } /*设置分割线,margin下边距为0不会撑高整个高度*/ .rightmunue .line { width: 1px; height: 10px; background-color: #999; margin: 12px 12px 0; } /*将hover绑定给city和city-list是行不通的,因为当鼠标移开“北京”后,city-list的内容不会再显示出来 .location .city:hover + .city-list{ display: block; }*/ /*当鼠标移入location时,让city-list显示*/ .location:hover .city-list { display: block; } /*hover应该给的是location,因为鼠标一旦移出“北京”,“北京”就会恢复成原来的样子*/ .location:hover .city { background-color: #ffffff; border: 1px solid #ddd; border-bottom: none; padding-bottom: 1px; } </style>
- 实现了下拉效果
- 问题方面
很可惜的是,在引入图标文字方面还不是很熟练,知道怎么写代码却不知道怎么用,下载的fontawesome到文件里面也不是很会用,就连vsc默认的图标文字也导不进去,后面会熟悉如何把它插进去。最后就是,希望自己加油加油学习!!!