欢迎来到天天文库
浏览记录
ID：9090602
大小：409.50 KB
页数：10页
时间：2018-04-17
《自制jqueydemo教程》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、首先，先说一下我们所要实现导航栏的一个效果既然有人可以这导航那么我们也可以，我也是为了让更多人认识jquery神奇的地方，这也就是现在做网站的主流，我们用淘宝的例子来做吧！如图打开VisualStudio也就是我们所说的VS，名字自己定义，新建一个文件，名字自己定义（如图1）图1添加一个现有项，jquery-1.7文件就是JS（如图2）图2添加一个.aspx文件名字为index.aspx图3打开index.aspx文件，把jquery-1.7.js添加进去图4哦！差点忘记还要新建一个主题图5而menu.css就是我们所要的文件（外观模板）那同样
2、我们的CSS文件同样要添加至index中接下来我们就开始写divcss还有menu.css那么怎么来实现淘宝上的效果呢？怎么样可以下拉，怎么样可以实现这东西呢？这个是我们思考的方向。那好我们接下来慢慢来实现这效果为什么我们要
3、远了，所以我们还是要加油，这就是写网站就是要考虑的问题。这就是一个方向。图6这就是和的效果！那我们已经初步实现了这个效果，那么怎么样能实现当鼠标滑过的时候会下拉菜单呢！那么我们先设置一下menu.css吧！（字体灰色，那么怎么样算出黑色的位置要用到的就是我们高中学过的进制转换先在介绍吧！）可以用一种很简单的方法来计算因为QQ自带截图功能嘛！一般截图工具会自带rgb的值那我看到的是RGB：“102,102,102”那我们就打开系统只带的计算机吧！切换至程序员模式就是吧数字输到10进制的地方去切换为16进制就那么简单还有一种最简单的
4、方法就是用PS来那里不要去算，直接可以看出结果是66还有红色的RGB（255,170,43）255就不用说了肯定是FF的170为AA43是一个很神奇的数字2B结果为#FFAA2B好就先介绍到这我们先设置menu.css设置这就是我们占时需要的东东设计一个类用“.”表示Margin外边框属性Padding边框的空白Font-size元素所需的大小.Taobaomenua就是一个元素用于div那里这里很多人就会有疑问为什么加a和a：hovera和a：hover相当于父子级关系a：hover是鼠标放上去的时候下面是效果图这就出现了想淘宝一样当鼠标到文
5、字上回变成另外一种颜色了。text-decoration是元素文字的下划线，我们设了超连接不是会有下划线所以我们要设为none没有另外要介绍一下这个用class来表示为一个连接Href为连接地址我这里设的是空地址所以用#来表示还有一个要像大家说明一下的一个字12px即是12像素那“我的淘宝”为4个那么就是48px那因为我们要居中的那就是说，我们要多设点像素那就是100px吧！因为“已买到的宝贝”也是要算的那还没有设置那先设置一下边框这些这里重点说明一下text-align：这是文件是什么对齐方式，那我们肯定是要选择居中center
6、的。长宽高，这个我就不说了对于css不懂的同学那要去补习一下怎么样用css这个教程不说明太多现在已经到了这里了，那我们要想一下，能用什么方式来实现当鼠标滑到我的淘宝的时候，会下拉，其他三个项目，那我们要怎么想呢，用两个div还是用一个，那我们只有俩个都要试一试了。那我们只有在原有的dd上面添加一个类就变成这个样子了所以我们囧了。。。。。那么这就不是我们要实现的效果图那我们要怎么样添加成为那种效果呢？那就只有在原来的Taobaoa那里在添加一点东西所以我们只有一种办法了那么我们有什么办法变成两个div呢！可以这样想能不能只要一个
7、可以看一下！这样设置看一下效果！好的，这个方案，可以实现这个效果，但是又来了一点问题了，就是覆盖，怎么样覆盖，好那么我们可以这么解决，能不能把
8、边框消失的东东Position是何许人也它是定位一个元素z-index是什么人呢它是也是定位但又排序功能最终会实现这个效果那还一个问题就是我的淘宝那里
此文档下载收益归作者所有
