Jquery学习笔记(7)--京东导航菜单
主要是几个模块的浮动和定位不好处理,另外还缺少右侧导航,及幻灯片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
*{
margin: 0;
}
#head img{
position: absolute;
left: 50%;
margin-left:-595px;
}
#head{
position: relative;
width: 100%;
height: 80px;
background-color: #f00;
}
.clear{
clear: both;
}
#nav li{
list-style: none;
float: left;
border: 1px solid #000;
font-family: 微软雅黑;
font-weight: bold;
cursor: pointer;
margin-left: 10px; }
#nav{
margin-left: 200px;
}
#left li{
list-style: none;
margin-top: 0px;
border: 1px solid #000;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
font-family: 微软雅黑;
color: #fff;
} #left ul{
background-color: #888;
width: 190px;
height: 480px;
margin-left: 50px;
margin-top: 10px;
padding-top: 10px;
padding-left: 0px;
}
#left span{
cursor: pointer;
}
#left{
float: left;
position: relative; }
#images{
margin-left: 10px;
float: left;
position: relative; }
#largeImg{
/*margin-left: 10px;*/
margin-top: 10px;
}
#smallImg{
margin-top: 10px;
/*margin-left: 10px;*/ }
#welcom{
width: 190px;
height: 480px;
background-color: #00f;
margin-top: 10px;
margin-left: 10px;
float: left;
position: relative; }
#main{
position: relative;
/*position: absolute;*/
left: 50%;
margin-left: -595px; }
</style>
</head>
<body>
<!-- 广告 -->
<div id="head"><img src="head.jpg"></div>
<!-- main把三个div合到一起 -->
<div id="main">
<!-- 上侧导航 -->
<div id="nav">
<ul>
<li>秒杀</li>
<li>优惠券</li>
<li>闪购</li>
<li>拍卖</li>
</ul>
</div>
<div class="clear"></div>
<!-- 左侧导航 -->
<div id="left">
<ul>
<li><span>家用电器</span></li>
<li><span>手机/数码</span></li>
<li><span>男装/女装</span></li>
<li><span>电脑/办公</span></li>
</ul>
</div>
<!-- 右侧广告 -->
<div id="images">
<div id="largeImg">
<img src="1.jpg" alt="">
</div>
<!-- <div class="clear"></div> -->
<div id="smallImg">
<img src="4.jpg" alt="">
<img src="5.jpg" alt="">
</div>
</div>
<!-- 最右侧充话费 -->
<div id="welcom">
<div>注册</div>
<div>登录</div>
</div>
</div> </body>
<script>
$('#nav li').hover(
function(){
$(this).css({"color":"#f00"});
},
function(){
$(this).css({"color":"#000"});
}
);
$('#left li').hover(
function(){
$(this).css({"background-color":"#ddd"});
},
function(){
$(this).css({"background-color":"#888"}); }
);
$('#left span').hover(
function(){
$(this).css({"color":"#f00"}); },
function(){
$(this).css({"color":"#fff"}); }
); </script>
</html>
Jquery学习笔记(7)--京东导航菜单的更多相关文章
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery ui背景色动态渐变导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery漂亮图标的垂直导航菜单
效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
随机推荐
- WCF和Socket
WCF的全称是:Windows Communication Foundation.它是建立在Web Service架构上的一个全新的通信平台.它使用相同的基础结构和 API 来创建应用程序,这些应用程 ...
- SQL Compare 10.4.8.87 Edition 数据库比较工具 完全破解+使用教程
一.使用教程 SQL Compare是编程人员常用的比较两个数据库之间差异的工具.可以用来比较数据库里面的对象.比如存储过程,数据库中的数据,表的结构. 下面我就简单介绍一下如何使用 1.选择要比较的 ...
- XmlRpc with C#/Java【转】
最近看了几个项目都是用xmlrpc协作完成的,就做了几个测试客户端和服务器端和大家一起分享.希望能对入门的同学有帮助 关于xmlrpc的介绍和规范参考http://www.xml-rpc.net/ 下 ...
- Cocos2d-x3.0游戏实例之《别救我》第七篇——物理世界的碰撞检測
事实上我也非常吃惊-居然写到第七篇了,我估计也就是四篇的内容,感觉非常奇妙,我也不会非常唠叨什么吖); // 0001 ); // 0001 ); // 0001 这样我们才干监听到它们的碰 ...
- hue启用ldap
[desktop] [[auth]] …… …… backend=desktop.auth.backend.LdapBackend .….. http://gethue.com/ldap-or-pam ...
- 使用git-svn迁移SVN至GitLab
使用git-svn迁移SVN至GitLab 1.安装git和git-svn 后面的步骤中对git版本有一定要求,通过yum安装的git版本较低,这里进行编译安装 [root@DevTest ~]# y ...
- Cannot call sendError() after the response has been committed(filter问题)
就是因为执行了filter的dofilter方法中 chain.doFilter(request,response)了 执行了两遍 if(){}else{chain.doFilter(request, ...
- git使用 ——转
转自:http://blog.csdn.net/jamesmf/article/details/17483787
- PHP #2003 - 服务器没有响应怎么办
1 出现这个问题的时候,首先可以肯定Apache服务器没有问题,因为如果Apache服务器有问题,则根本登不上phpMyadmin,如果你能登上localhost则说明Apache服务器没问题. 2 ...
- ztree3.5.02选中结点时报错
ztree3.5.02选中结点时报错 更新jquery版本后,使用jquery1.1.1,左键点击Tree里的节点的时候报错,虽然不影响显示,但是在chrome控制台显示报错 Uncaught Typ ...