京东导航条

最新推荐文章于 2024-05-18 20:42:18 发布
最新推荐文章于 2024-05-18 20:42:18 发布
阅读量365 收藏 1
点赞数 1
分类专栏： 导航条 HTML CSS 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49881997/article/details/108472939
版权

京东导航条代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="icon" type="image/x-icon" href="https://www.jd.com/favicon.ico">

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

    <title>京东顶部导航条</title>

    <style type="text/css">

        *{margin: 0;padding: 0;}

        .header{

            width: 100%;

            height: 30px;

            background: #E3E4E5;

            text-align: center;

            line-height: 30px;

            position: relative

        }

        .clear{clear: both;}

        a{text-decoration: none;}

        li{list-style: none;}

        .header_1{          

            height: 30px;

            float: left;

            position: absolute; top: 0px;left: 540px;

            font-size: 13px;

            color: #999999;

        }

        .header_1 li{margin-left: 10px;padding: 0px 10px;}

        .header_2{          

            height: 30px;

            position: absolute; top: 0px;right: 200px;

        }
        .header_2 .aa{
            float: left;
            text-align: left;
            margin-left: 150px;
        }
        .header_2 li{

            color: #999999;    

            float: left;
            margin-left: 2px;
            font-size: 13px;

            padding: 0px 2px; 

        }
        img{
            width:148px;
            height:117px;
            margin-left:89px;
            
        }
        .box3 li a{
            
            font-size:14px;
            margin-top:30px;
            margin-left:680px;
            color:blue;
            list-style-type:none;
            float: left;
            margin-left:30px;
            margin-top: -15px;
            
            
            
        }
        .box3 li{
            margin-bottom: 0px;
            text-align: center;
            margin-left: 350px;
            
        }

        .header_2 li span{color: #999999;}

        .header_2 li span:hover{color: #F10215;}

        .header ul .bg:hover{background: #fff;}
        
        #wrapper {
			width: 960px;
			height: 400px;
			margin: 50px auto;
        }
        #registerText {
            font-size: 20px;
            height: 43px;
            width: 134px;
            margin-top: -416px;
			color: darkgray;
            color: black;
            float: left;
            margin-left: 1187px;
            font-size: 15px;
        }
        #zi{
            font-size: 30px;
            margin-left: 239px;
            float: left;
            margin-top: -80px;
        }
		.search {
			width: 494px;
			height: 30px;
			border: 3px solid #E4393C;
            position: relative;
            margin-left: 382px;
            margin-top: -69px;
		}
		.search input {
			float: left;
            border: 0;
            margin-top: -66px;
		}
		input:focus {
			outline: 0;
		}
		.text {
			float: left;
			width: 406px;
			padding: 5px;
			height: 20px;
			line-height: 20px;
			font-family: arial,"\5b8b\4f53";
		}
		.text:focus {
			background-color: #FCFCFC;
			-webkit-box-shadow: 2px 2px 3px #D2D2D2 inset;
			-moz-box-shadow: 2px 2px 3px #D2D2D2 inset;
			box-shadow: 2px 2px 3px #D2D2D2 inset;
		}
		.button {
			width: 78px;
			height: 30px;
			font-size: 14px;
			font-weight: 700;
			color: white;
			background-color: #E4393C;
			display: inline-block;
			text-align: center;
            cursor: pointer;
            margin-left: 418px;
            margin-top: -116px;
		}
    </style>

</head>

<body>

    <div class="header">

        <ul class="header_1">

            <li class="bg"><i class="fa fa-map-marker" style="color: red;font-size: 16px;margin-right: 3px;"></i><span>北京</span></li>

        </ul>

        <ul class="header_2">

            <li><a href="" ><span class="aa">你好,请登录&nbsp;</span><span  style="color: #F10215">免费注册&nbsp;</span></a></li>

            <li><a href=""><span class="aa" style="color: #F10215">&nbsp;</span></a></li>

            <li>|</li>

            <li><a href=""><span>&nbsp;我的订单&nbsp;</span></a></li>

            <li>|</li>

            <li class="bg"><a href=""><span>&nbsp;我的京东&nbsp;</span></a><i class="fa fa-angle-down"></i></li>

            <li>|</li>

            <li><a href=""><span>&nbsp;京东会员&nbsp;</span></a></li>

            <li>|</li>

            <li class="bg"><a href=""><span style="color: #F10215">&nbsp;企业采购&nbsp;</span></a><i class="fa fa-angle-down"></i></li>

            <li>|</li>

            <li class="bg">&nbsp;客户服务&nbsp;<i class="fa fa-angle-down"></i></li>

            <li>|</li>

            <li class="bg">&nbsp;网站导航&nbsp;<i class="fa fa-angle-down"></i></li>

            <li>|</li>

            <li class="bg">&nbsp;手机京东&nbsp;</i></li>

        </ul>

    </div>

    <div class="clear"></div>
    <div id="wrapper">
        <div class="box6">
            <div class="box"> 
                <a href="http://www.baidu.com"><img src="images/che.png" alt=""></a>
            </div>
            <ul>
                <li><a href=""><span  id="zi" style="color: #F10215"><b><i>有好货&nbsp;</b></i></span></a></li> 
                
            </ul>
        </div>
        <div class="search">
            <input class="text" type="text" />
            <input class="button" type="button" placeholder="请输入搜索内容..." value="搜索" />
        </div>
        <div class="box3">
            <ul>
                <li><a href=""><span  style="color: #F10215">优惠首发&nbsp;</span></a></li>
                <li><a href="">亿元优惠</a></li>
                <li><a href="">9.9元团购</a></li>
                <li><a href="">满99减30</a></li>
                <li><a href="">办公用品</a></li>
                <li><a href="">电脑</a></li>
                <li><a href="">通信</a></li>
            </ul>
        </div>
        
    </div>
    <div class="aa3">
        <p>

            <input id="registerText" type="submit" value="我的购物车>"/>
            
        </p>
        
        
    </div>

</body>

</html>

在这里插入图片描述

weixin_49881997
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
京东购物网页端顶部栏代码.rar
01-29
京东购物网页端顶部导航下拉代码
京东导航条.zip csshtml练习
07-28
在“京东导航条”这个练习中，我们需要用CSS来实现以下几点： 1. **布局**：使用`display`属性（如`flex`或`grid`）来实现水平排列的导航项，确保它们在不同屏幕尺寸下都能正确对齐。 2. **颜色和背景**：通过设置`...
35、京东导航条
MoonNight608的博客
07-20 316
文章目录京东导航条 京东导航条 <html lang="en"> <head> <meta charset="UTF-8"> <title>meta</title> 引入重置样式表 引入图标字体 </head> <style> body{ font-size:12px; } clearfix::before, clearfix::after{ content:"",
制作京东购物车导航栏，包含html+css完整代码
最新发布
m0_74937643的博客
05-18 235
css样式完整代码，布局用到display：flex。效果图，所有下拉列表均可显示。
Font Awesome 图标
记录学习编程的日常
02-17 580
Font Awesome 是一套绝佳的图标字体库和CSS框架。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 要使用Font Awesome图标，请在HTML页面的head部分中添加以下行： 1、国内推荐 CDN： <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> 2、海外推荐 CDN
前端基础学习-（1）京东顶部导航条
YYLOVEYY520的博客
01-29 1373
前端基础学习-（1）京东顶部导航条 作为前端学习的小白，个人在学习过程中认知：京东导航条使用到了浮动(float)、定位(position)、垂直居中、图标引用等知识。 实现效果 代码实现 html代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
京东网页端顶部导航HTML代码
ygz10483903的博客
01-31 7143
京东网页端顶部导航样式： 要实现的功能样式如下： 以下是代码片段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东购物头部代码&lt...
【京东商城首页实战2】导航条制作（1）
热门推荐
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
05-01 1万+
接下来，开始制作京东的导航条。效果如下图： 图1业务分析： 1.通栏盒子，并且有背景颜色 2.有版心。 3.版心里面包含左右浮动的两个盒子。 4.有下拉效果的盒子后面，有三角形标志。 5.右边的盒子里面包含几个li标签。分析完之后，对整个头部的构架和要实现的功能都有简单的了解，下面就是开始一步一步实现这些业务。1.制作一个通栏的盒子，并设置背景颜色。html代码：<body> <
模仿京东首页顶部导航条涉及到的图标
12-18
本项目涉及的是模仿京东首页顶部导航条所使用的图标，这是一个关于前端设计与CSS技术实践的课题。首先，我们需要了解如何从阿里巴巴Iconfont网站获取和使用图标。 阿里巴巴Iconfont是中国最大的图标库之一，它提供...
京东页面JS效果实现，js实现导航条控制，很完整
03-26
"京东页面JS效果实现，js实现导航条控制"这个主题聚焦于如何使用JavaScript来创建类似京东网站的导航条交互效果。下面将详细介绍这个知识点，并提供一个具体的实例——"360buyleftmenu_jb51net"。 1. **JavaScript...
06_京东顶部导航条.html
05-17
06_京东顶部导航条.html
精美的京东商城商品分类导航菜单代码
11-21
精美的京东商城商品分类导航菜单代码 精美的京东商城商品分类导航菜单代码 精美的京东商城商品分类导航菜单代码 精美的京东商城商品分类导航菜单代码
京东装修导航代码
05-07
京东装修必备导航 完美交互 实现鼠标指向变幻 增加客户点击率
京东新版商品分类导航代码
05-01
京东新版商品分类导航代码是一款基于jQuery技术，模仿京东网上商城新版侧栏商品分类导航代码，适合用于电子商务类网站或栏目较多的网站使用。兼容目前主流浏览器。
仿京东导航栏
07-24
仿京东导航栏,仿京东导航栏,仿京东导航栏仿京东导航栏
Jquery京东导航菜单
11-21
Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单 Jquery京东导航菜单
jQuery京东浮动网站楼层导航特效代码
03-20
【jQuery京东浮动网站楼层导航特效代码】是一种基于JavaScript库jQuery实现的网页交互效果，它主要用于增强网站用户体验，特别是在电商网站中。此特效模仿了京东商城的网页设计，旨在实现左侧栏的楼层导航随着用户...
写一个京东最顶部的导航条
qq_42999126的博客
07-18 2537
效果图 如下： 下拉框的效果： 鼠标移入以后会有一个框显示出来 结构代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东顶部
web前端——京东顶部导航条的练习
JLY19970726的博客
01-02 471
【代码】web前端——京东顶部导航条的练习。
写一个仿照京东购物网站官网的导航条
05-31
以下是一个简单的仿照京东购物网站官网的导航条的 HTML 和 CSS 代码示例： HTML 代码： ```html <li><a href="#">首页</a></li> <li><a href="#">手机</a></li> <li><a href="#">电脑</a></li> <li><a href...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值