仿照京东导航条html+css

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>仿京东导航条</title>
</head>
<style>*{margin: 0;padding: 0;}.box{width: 100%;height: 25px;background-color: #f1f1f1;}ul{width: 70%;height: 25px;margin-left: 25%;list-style: none;}ul li{display: inline-block;line-height: 25px;}li a{text-decoration: none;font-style: 30px;color: #666666;padding: 0 5px;}.register{color: red;}.line{width: 1px;height: 11px;background-color:rgb(163, 159, 159); }.phone{background: url(../img/p.png) no-repeat 0px 0px;padding-left: 15px;}a:hover{color: red;}.phone:hover{background: url(../img/p2.png) no-repeat 0px -14px;}
</style>
<body><div class="box"><ul><li><a href="">您好，请登入</a><a href="" class="register">免费注册</a></li><li class="line"></li><li><a href="">我的订单</a></li><li class="line"></li><li><a href="">我的京东</a></li><li class="line"></li><li><a href="">京东会员</a></li><li class="line"></li><li><a href="">企业采购</a></li><li class="line"></li><li class="phone"><a href="">手机京东</a></li><li class="line"></li><li><a href="">关注京东</a></li><li class="line"></li><li><a href="">客户服务</a></li></ul></div>
</body>
</html>

效果如下：

素材图：

仿照京东导航条html+css相关推荐

CSS盒子模型总结（小练习网易新闻列表和京东导航条）
css盒子模型边框(border) 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style border-width 默认值为3px 可以用 ...
html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片第二步: 在网页区添加样式定义 [code] /* = ...
[CSS]30种时尚的CSS网站导航条
[原文地址]:http://coolshell.cn/?p=562 我想,大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计.这些导航条基本上来说都是用CSS来做的.这里,我们将向你介绍几种 ...
CSS导航条以及简单下拉菜单实现
以京东导航条来练习,导航条的制作可以采用浮动或者弹性布局,这里采用浮动,要注意高度塌陷的问题.这里简单仿写一下下面实现鼠标移动到江苏实现下拉菜单的实现,首先要有一个下拉菜单,设置好宽高,把他隐藏起来 ...
【荐】DIV+CSS仿360buy京东商城导航条
代码简介: [荐]DIV+CSS仿360buy京东商城导航条 ,很棒的,赶快来试试. 代码内容: <html xmlns="http://www.w3.org/1999/xhtml&q ...
前端学习-CSS京东导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
练习（京东图片，导航左侧，网易列表，3school导航条，京东轮播图/电影卡片）
图片列表 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...

仿照京东导航条html+css

仿照京东导航条html+css相关推荐

最新文章

热门文章