CSS布局练习，jd顶部导航栏跟下拉框

「已注销」

已于 2022-11-22 17:39:16 修改

阅读量445

点赞数

分类专栏：前端文章标签： css html

于 2022-05-24 12:09:27 首次发布

本文链接：https://blog.csdn.net/qq_43987112/article/details/124944394

版权

学习过程中并记录了这篇笔记

css代码

html代码

效果

这里下拉框只做了一个例子，其他都是一样做法。里面有些图标字体我是截图然后使用img引入

这里我也引入了css样式重置文件。还有图标字体库

<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./fa/css/all.css">

css代码

body{
    font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}

.nav a,
.nav i,
.nav span{
    color: #999;
    text-decoration: none;
}

.top-nav{
    background-color: #e3e4e5;
    border-bottom: 1px solid #ddd;
}

.nav{
    width: 1190px;
    height: 30px;
    line-height: 30px;
    margin: auto;
    position: relative;

}

.localtion{
    float: left;
}

.r-nav {
    float: right;
}

.r-nav li{
    float: left;
}

.top-nav a:hover,
.top-nav .hilight{
    color: #f10215;
}

.top-nav .spacer{
    width: 1px;
    height: 10px;
    background-color: #ccc;
    margin: 11px 14px 0;
}
.top-nav .img1{
    margin-bottom: 1px;
}
.localtion .localtion-shortcut{
    display: none;
    width: 300px;
    height: 442px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: absolute;
    top:31px;
    z-index: 999;
}

.localtion:hover .localtion-shortcut{
    display: block;
}

.city{
    padding: 0 10px;
    padding-bottom: 1px;
    border: 1px solid transparent;
    position: relative;
    z-index: 9999;
}
.localtion:hover .city{
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom: none;
}
.localtion-shortcut{
    padding: 10px;
}
.local li{
    float: left;
    width: 60px;
}

.local a{
    float: left;
    padding: 0 8px;
}
.local a:hover{
    background-color: #faf0f0;
}

.local .BeiJing a{
    color: #fff;
    background-color: #f10215;
}
.local2{
    margin: 10px 0 10px 10px;
}

.split{
    width: 262px;
    border-bottom: 1px solid #eee;
    position: absolute;
    top: 230px;
}
.split1{
    width: 262px;
    border-bottom: 1px solid #eee;
    position: absolute;
    top:340px;
}
.local2 .t1{
    color: #8f8f8f;
    position: relative;
    top: 15px;
}
.lcoal-list li{
    float: left;
    width: 120px;
}
.lcoal-list .lcoal-first{
    padding-top: 15px;
}
.lcoal-firs