仿京东导航栏CSS练习

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

<link rel="stylesheet" href="./source/fontImg/css/font-awesome.css" />

<style>

body {

font-size: 14px;

}

*{

margin:0px;

padding: 0px;

}

/* 将list样式取消 */

li {

list-style: none;

}

/* 设置外部容器 */

.top-bar-wrapper {

width: 100%;

height:30px;

/* 设置行高 */

line-height: 30px;

/* 设置底部边线 */

border-bottom: 1px solid #ddd;

/* 设置背景颜色 */

background-color: #e3e4e5;

}

/* 设置内部容器 */

.top-bar {

/* 设置固定宽度 */

width: 900px;

/* 设置水平居中 */

margin: 0 auto;

/* 开启相对定位 */

position: relative;

}

/* 解决float塌陷方案 */

.clearfix::after {

content: "";

display: block;

clear: both;

}

/* 设置左侧 */

.location {

float: left;

}

/* 设置右侧浮动 */

.shortcut {

float: right;

}

/* 设置右侧内容浮动 */

.shortcut li {

float: left;

}

.top-bar a,

.top-bar i,

.top-bar span {

color: #999;

text-decoration: none;

}

/* 为地图图标设置颜色 */

.location .fa {

color: #f01205;

}

/* 为超链接设置悬浮效果 */

.top-bar a:hover,

.top-bar .heighlight {

color: #f01205;

}

/* 分割线设置 */

.shortcut .line {

width: 1px;

height: 10px;

background-color: #999;

margin: 10px 12px;

}

/* 设置城市下拉列表的块元素 */

.location .city-list {

display: none;

width: 320px;

height: 426px;

background-color: white;

border: 1px solid rgb(204, 204, 204);

/* 脱离文档流 */

position:absolute;

top:31px;

/* 防止别的层级元素将其覆盖 */

z-index: 999;

box-shadow: 0 2px 2px rgba(0,0,0,.3);

}

/* 设置元素悬浮效果 */

.location:hover .city-list{

display: block;

}

/* 设置内边距 */

.current-city{

padding: 0 10px;

/* 为保持布局一致,不滑动 */

border: 1px solid transparent;

border-bottom: none;

}

/* 设置悬浮效果 */

.location:hover .current-city{

background-color: white;

border: 1px solid rgb(204, 204, 204);

border-bottom: none;

padding-bottom: 1px;

/* 开启定位提高元素层级 */

position: relative;

z-index: 9999;

}

/* 在我的订单下面设置块 */

.myIndent .indentblock{

display: none;

width: 300px;

height:300px;

background-color:white;

border: 1px solid rgb(204, 204, 204);

box-shadow: 0 0 10px rgba(0,0,0,.3);

position: absolute;

top:30px;

z-index: 99;

}

.myIndent:hover .indentblock{

display: block;

}

.myIndent .indent{

/* 为保持布局一致,不滑动 */

border: 1px solid transparent;

padding:7px 10px;

border-bottom: none;

}

.myIndent:hover .indent{

border:1px solid rgb(204, 204, 204);

border-bottom: none;

background-color: white;

padding:7px 10px;

position: relative;

z-index: 9999;

}

</style>

</head>

<body>

<!-- 外层容器 -->

<div class="top-bar-wrapper">

<!-- 内层容器 -->

<div class="top-bar clearfix">

<!-- 左侧菜单 -->

<div class="location">

<li class="current-city">

<span class="fa  fa-map-marker"></span>

<a href="javascript:;">北京</a>

</li>

<div class="city-list"></div>

</div>

<!-- 右侧菜单-->

<ul class="shortcut clearfix">

<li>

<a href="javascript:;">你好,请登录</a>

<a href="javascript:;" class="heighlight">免费注册</a>

</li>

<!-- 分割线 -->

<li class="line"></li>

<li class="myIndent">

<a href="javascript:;" class="indent">我的订单</a>

<div class="indentblock"></div>

</li>

<!-- 分割线 -->

<li class="line"></li>

<li>

<a href="javascript:;" class="heighlight">我的京东</a>

<i class="fa fa-angle-down"></i>

</li>

<!-- 分割线 -->

<li class="line"></li>

<li><a href="javascript:;">京东会员</a></li>

<!-- 分割线 -->

<li class="line"></li>

<li>

<a href="javascript:;">企业采购</a>

<i class="fa fa-angle-down"></i>

</li>

</ul>

</div>

</div>

</body>

</html>

原文地址:https://www.cnblogs.com/kukai/p/12303081.html

时间: 2024-10-15 03:35:07

仿京东导航栏CSS练习的相关文章

由浅入深学习导航栏CSS样式

一篇很浅显易懂,详细的导航栏CSS样式教程献给朋友们: 原文地址:http://wenboxz.com/archives/navi-bar-demo-01.html/

网易首页模仿心得---导航栏CSS篇

不仅是CSS方面学习到很多技法,而且由于自己也懂一些SEO,对网易的一些CSS+SEO优化方法,也收获颇多!(本人也是平面设计师,很喜欢网易这类简约型的网页) 好了,在此之前强烈推荐大家可以尝试一下sublime text3 这款编辑器,之前用的editplus,感觉前者真的非常强大,很多插件会让网页开发的速度快很多,很多!! 我首先看了网易的重置CSS样式表和mata标签,其中mata标签中有一行 <meta name="robots" content="index,

侧边导航栏css示例

效果展示: html: <div class="sidebar"> <ul> <li>优先级 <ul> <li><aonclick=""class="sidebar-selected">全部</a></li> <li><aonclick="">P1</a></li> <li>

简单仿京东导航下拉菜单 javascript

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script><script type=&quo

关于Javaweb分页处理以及导航栏实现小记

对于搜索功能结果展示的分页处理,首先应该明确的是目前页,每页显示数据的条数,以及总的数据数目. 接下来,通过这些数据来计算出总的显示页数,以及数据库语句limit查询的范围. Object result:是分页显示的数据,这里设置为Object的目的是为了方便通过JSON传输. 1 public class PageBean { 2 private int pageNum; // 当前页,从请求那边传过来 3 private int pageSize; // 每页显示的数据条数 4 privat

微信小程序--仿京东UI样式顶部导航栏

我们先来看看京东的效果 分析 上端导航栏可以放置多个分类,可滑动 点击导航栏最右端按钮可以查看所有分类,同时背景模糊 内容部分右拉跳转到另外的分类 点击分类时导航栏的滑动部分自动滑动到合适的位置 我的实现 代码展示: js /** * categoryView.js - 分类页面 */ var fakeData = require('../../common/fakeData.js') Page( { data: { categories: ['全部'], currentTab: 0, scro

Html+Css新手简单快速仿京东商品分类导航

看一看最终的效果: 下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果,学会了之后,会发现大多数电商都是用这样的效果的. 我们先从把结构写好:一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位,这个div分成左边:小分类列表,右边图片广告) 因为我是用 纯css+html写的, 所以它的文件有:京东导航.html,main.css,cssreset.css(css文件放在css这个目录下面).

web 模板 类似京东左侧的导航栏

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

仿京东商城左侧的一个导航条特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ