第四章 web前端开发工程师--JavaScript京东商城项目开发 4-2 京东商城导航栏

index.html;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><link rel="Shortcut icon" href="./images/favicon.ico"><link rel="stylesheet" href="./css/base.css" type="text/css"><link rel="stylesheet" href="./css/style.css" type="text/css"><script type="text/javascript" src="./js/style.js"></script>
</head>
<body><!-- 顶部图片 --><div id="header"><div class="top-center"><!-- 顶部图片 --><a href="" id="t-c-z"></a><!-- 关闭按钮 --><img src="./image/qwe.png" id="close"></div></div><!-- 导航栏 --><div id="top"><div id="top_main"><!-- 导航栏左边区域 --><ul class="topu"><li><div class="xing"></div><a href="">收藏京东</a></li><li><div class="erwei"></div><a href="" class="aa">关注京东<div class="erweitu"></div></a></li><li><div class="didian"></div><strong style="padding-left: 15px">北京</strong><a href="" style="padding-left:0px">[更换]</a></li></ul></div></div>
</body>
</html>

style.css

/* 顶部图片 */
#header{width: 100%;height: 80px;background:#FFBC01;
}
.top-center{width: 1190px;height: 80px;margin: 0 auto;background: blue;position: relative;
}
#t-c-z{width: 1190px;height: 80px;display: block;background: url(../image/5919208fN56f65f84.jpg);
}
#close{/* 若不设置父级元素的定位属性，只设置关闭按钮的，会随着窗口的放大而放大，缩小而缩小 */position: absolute;top: 5px;right: 5px;/* 指镇悬浮上去为手指型 */cursor: pointer;
}/* 导航栏*/
#top{width: 100%;height: 30px;background: #f7f7f7;border-bottom: 1px solid #eee;position: relative;z-index: 100;
}
#top #top_main{width: 1210px;height: 30px;margin: 0 auto;border: 1px solid blue;
}
#top #top_main .topu{float: left;border: 1px solid red;
}
#top #top_main .topu li{width: 85px;height: 30px;display: block;float: left;line-height: 30px;font-size: 12px;color: #666666;
}
#top #top_main .topu li .xing{width: 13px;height: 13px;background: url(../images/xing.png) no-repeat;position: absolute;top:8px;
}
#top #top_main .topu li .erwei{width: 13px;height: 13px;background: url(../images/erwei.png) no-repeat;position: absolute;top:9px;
}
#top #top_main .topu li .didian{width: 13px;height: 13px;background: url(../images/didian.png) no-repeat;position: absolute;top:4px;
}
#top #top_main .topu li a{padding-left: 15px;
}
#top #top_main .topu .erweitu{width: 116px;height: 120px;background: url(../images/erwei.png) no-repeat 0px -40px;border: 1px sloid #ccc;position: absolute;z-index: 22;display: none;
}
#top #top_main .topu .aa:hover .erweitu{display: block;
}
#top #top_main .topu .aa{display: block;
}

悬浮出现二维码：

第四章 web前端开发工程师--JavaScript京东商城项目开发 4-2 京东商城导航栏相关推荐

第四章 web前端开发工程师--JavaScript京东商城项目开发 4-1 京东商城顶部图片效果
index.html <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
第四章 web前端开发工程师--JavaScript京东商城项目开发 4-3 京东商城源代码（整个工程）
下载地址: 链接:https://pan.baidu.com/s/1UtjRXO_VQ97GE2GhTvesxw 提取码:m9ds
web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
web前端知识集合——javascript基础篇之常量和变量（二）
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
【面试宝典】软件测试工程师2021烫手精华版（第四章web测试篇）
第四章 Web 测试描述用浏览器访问 www.baidu.com的过程? 先要解析出 baidu.com 对应的ip 地址: • 要先使用 arp 获取默认网关的 mac 地址 • 组织数据发送给默 ...
【JavaScript】------- Web前端研发工程师编程能力飞升之路
转载处:http://www.hicss.net/the-way-of-be-a-expert-web-front-end-developer/ 今天看到这篇文章.写的非常有意思.发现自己还有很长的一 ...
好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...
【转】web 前端研发工程师编程能力飞升之路
[前言] 所谓的天才,只不过是比平常人更快的掌握技能.完成工作罢了:只要你找到了正确的方向,并辅以足够的时间,你一样能够踏上成功彼岸. 本文将 web 前端研发编程能力划分了 8 个等级,每个等级都列 ...
web前端研发工程师编程能力成长之路
2019独角兽企业重金招聘Python工程师标准>>> [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如果你是做了两三年WEB产品前端研发,迷茫找不 ...

第四章 web前端开发工程师--JavaScript京东商城项目开发 4-2 京东商城导航栏

第四章 web前端开发工程师--JavaScript京东商城项目开发 4-2 京东商城导航栏相关推荐

最新文章

热门文章