<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--设置网页标题-->
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!--设置标题上的图片-->
    <link rel="shortcut icon" href="./img/favicon.png">
<!--    引进css样式-->
    <link rel="stylesheet" href="style.css">
<!--    引进图标字符体-->
　　<link rel="stylesheet" href="fa/css/all.css">
</head>
<body>
<!--    外部容器，蓝色框-->
<div class="top-bar-wrapperr">
<!--    内部容器，红色框-->
    <div class="top-bar clearfix">
<!--    左容器，绿色框-->　　
        <div class="left-tar">
            <div class="location">
<!--    利用i加图标字符-->
                <i class="fas fa-map-marker-alt"></i>
                <a href="">浙江</a>
            </div>
        </div>
<!--    右容器，紫色框-->
        <ul class="list-tar clearfix">
            <li class="list-tar-li">
                <a href="">你好，请登录</a>
                <a href="" class="highlight">免费注册</a>
            </li>
            <li class="line"></li>
            <li class="list-tar-li"><a href="">我的订单</a></li>
            <li class="line"></li>
            <li class="list-tar-li">
                <a href="">我的京东</a>
                <i class="fas fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li class="list-tar-li"><a href="">京东会员</a></li>
            <li class="line"></li>
            <li class="list-tar-li">
                <a href=""class="highlight">企业采购</a>
                <i class="fas fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li class="list-tar-li">
                <span>客户服务</span>
                <i class="fas fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li class="list-tar-li">
                <span>网站导航</span>
                <i class="fas fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li class="list-tar-li"><span>手机京东</span></li>
        </ul>
    </div>
</div>
</body>
</html>
style.css
* {
    margin:0;
    padding:0;
}
body{
    font:12px/1.5 Microsoft YaHei;
    color:#999;
}
/*蓝色框的设置样式*/
.top-bar-wrapperr{
    width:100%;
    background-color: #e3e4e5;
    height:30px;
    border-bottom:1px #ddd;
    /*设置行高，使文字垂直居中*/
    line-height: 30px;
}
/*红色框的样式*/
.top-bar{
    width:1190px;
    height:100%;
    /*内部容器水平居中*/
    margin:0 auto;
}
.left-tar{
    float:left;
}
.list-tar{
    float: right;
}
.list-tar li{
    float:left;
}
.list-tar-li{
    float:left;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
/*解决高度塌陷*/
.clearfix::before,.clearfix::after{
    content: '';
    display: table;
}
.left-tar a,.list-tar-li a,.list-tar-li li{
    color:#999;
}
.fa-map-marker-alt{
    color:red;
}
.top-bar a:hover,.top-bar a.highlight {
    color:red;
}
/*设置分割线*/
.line{
    width:1px;
    height:10px;
    background: #999; /*填充一个|*/
    margin:10px 12px;
}

HTML实例-02-京东顶部导航条的更多相关文章

  1. css实现京东顶部导航条

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  2. uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在 ...

  3. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  4. UINavigationController及顶部导航条

    UINavigationController管理一个VC的栈,栈底的VC叫做这个UINavigationController的root view controller. 有一个函数叫做popToRoo ...

  5. Bootstrap 固定在顶部导航条

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  6. android开发（1）：底部导航条的实现 | navigation tab | activity的创建

    底部导航条,在iOS中叫tabbar,在android中叫bottombar或bottom navigation,是一个常用的切换页面的导航条. 同样,如果有良好的第三方库,我们应该优先考虑,能用好别 ...

  7. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  8. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  9. ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

随机推荐

  1. LESS实战：:not与:hover混合使用

    举个例子,有个HTML是这样的. <div class="item light">A</div> <div class="item" ...

  2. 题解 洛谷 P4547 【[THUWC2017]随机二分图】

    根据题意,题目中所求的即为所有\(n!\)种完美匹配的各自的出现概率之和再乘上\(2^n\)的值. 发现\(n\)很小,考虑状压\(DP\).设\(f_{S,T}\)为左部图匹配情况为\(S\),右部 ...

  3. el-table 操作列(编辑or删除) 获取本行相关数据

    简单说明:开发的时候,经常会遇到表格后面跟着操作列,一般都是编辑或者删除,那么 就需要获取到 本行数据相关的id或者其他附属信息.ok,下边放代码 //vue el-table的部分代码 <el ...

  4. jQuery与javascript

    jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程. javaScript(js)和jQuery(jq) 都是找元素.操作元素 Dom操作的区别: ...

  5. 找工作的你不容错过的45个PHP面试题附答案（上篇）

    Q1: == 和 === 之间有什么区别? 如果是两个不同的类型,运算符 == 则在两个不同的类型之间进行强制转换 === 操作符执行 ’ 类型安全比较’ 这意味着只有当两个操作数具有相同的类型和相同 ...

  6. 获取全部 txt 文本中出现次数最多的前N个词汇

    1.使用 chain 对 allwords 二维列表进行解包 from itertools import chain allwords = [] allwords.append(列表) 解包: cha ...

  7. 部分浏览器 set-cookie 不成功踩坑记录

    事件起因: 公司正在做一个sso的单点登录的项目,做完之后,在测试阶段,不同的终端的兼容测试时候,好几个不同的浏览器出现了不同的问题,有登录之后自动退出,有登陆不成功等问题. 在 pc 端只有 uc ...

  8. 4.11 省选模拟赛 序列 二分 线段树优化dp set优化dp 缩点

    容易想到二分. 看到第一个条件容易想到缩点. 第二个条件自然是分段 然后让总和最小 容易想到dp. 缩点为先:我是采用了取了一个前缀最小值数组 二分+并查集缩点 当然也是可以直接采用 其他的奇奇怪怪的 ...

  9. JavaScript动画实例：圆点的衍生

    考虑如下的曲线方程: R=S*sqrt(n) α=n*θ X=R*SIN(α) Y=R*COS(α) 其中,S和θ可指定某一个定值.对n循环取0~999共1000个值,对于每个n,按照给定的坐标方程, ...

  10. Android Studio--APK打包

    首先在app的build.gradle里面加一下代码 lintOptions { checkReleaseBuilds false abortOnError false } 在上方Build里面找到G ...