本文记录了一个初学者通过实践jQuery和CSS构建购物网站的过程，分享了从理论到实践遇到的问题及解决办法。
大概过了一遍jquery
以为自己差不多问题不大，所以就想找个小实例练一下
做个购物网站 一晚上连个css都没写完 觉得自己笨笨的
尤其是css写出来 然后没有反应的时候
都想哭了。。。
最后找到问题后，发现自己
啊，这都能有问题！！！
哎，不积跬步无以至千里
慢慢来，比较快
今天的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shopping web</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
line-height: 1.7;
}
li{
list-style: none;
}
#content{
width: 800px;
margin: 0 auto;
padding: 20px;
margin-bottom: 20px;
}
#content .item{
padding: 20px;
border: 1px dotted red;
margin-bottom: 30px;
}
#content .item li{
display: inline;
}
#content .item li a img{
width: 230px;
height: 230px;
margin: 10px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">1F 男装</a></li>
<li><a href="#">2F 女装</a></li>
<li><a href="#">3F 美妆</a></li>
<li><a href="#">4F 数码</a></li>
<li><a href="#">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>shopping web</h1>
<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
</ul>
</div>
<div id="item1" class="item">
<h2>2F 女装</h2>
<ul>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
</ul>
</div>
<div id="item1" class="item">
<h2>3F 美妆</h2>
<ul>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
</ul>
</div>
<div id="item1" class="item">
<h2>4F 数码</h2>
<ul>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
</ul>
</div>
<div id="item1" class="item">
<h2>5F 母婴</h2>
<ul>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
</ul>
</div>
</div>
</body>
</html>
注意：
1.html没什么大问题，但是那个ul>li*9那个还没学会 明天安插件吧
2.line-height 行间距 新技能get！
3.我发现
*{
margin: 0;
padding: 0;
}
这真是万能的
有了这个之后，list的样式都没了！
4.今天又感受到了margin的神奇，外框外框
5.那个css选择器太坑爹了 要有空格！！！#content .item空格啊空格
6.我直接用margin: 0 auto;是没有效果的，要先给个宽度width: 800px; 这个要记住啊 直接用没有效果
7.九个图片放上去就不太好看，padding让它们9个距离散开 神奇！
css真的是要多练才能发现问题啊
---------------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------
今天终终终于学完了jquery的第一个实例 哭
理论永远看起来简单~
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var top=$(document).scrollTop();
var menu=$("#menu");
var items=$("#content").find(".item");
var currentId="";
items.each(function(){
var m=$(this);
var itemTop=m.offset().top;
if(top+400>itemTop){
currentId="#"+m.attr("id");
}else{
return false;
}
});
var currentLink=menu.find(".current");
if(currentId&¤tLink.attr("href")!=currentId){
currentLink.removeClass("current");
menu.find("[href="+currentId+"]").addClass("current");
}
});
})
</script>
这一小段代码看似简单，但真的需要想很久呢，用几行代码就能完成很多事情，这或许就是编程的魅力所在吧
注意：
1.scroll是实际的偏移量，而offset是相对偏移量
这里就是获取m.offset().top来获取items的相对偏移量再去比较实际Top与它的大小，来改变id的值，从而达到变换的效果
2.其实效果好像并没有那么高大上，就是removeClass和addClass而已啊 easy！不要害怕
3.大概思路就是：遍历每一个item，比较top与m.offset().top，从而获得currentid，我就知道了当前位置需要哪一个id
然后就要改变item的class，我先看看现在拥有current类的是哪个item，默认是1楼，这里有一些边缘值的考虑：如果不是空，也不是应该有的id，那我就开始改变class。currelink保存了当前拥有current类的代码，我先把currentlink那行代码removeclass，之后给currentid的那行代码addclass就大功告成啦
4.top-400那里是要考虑到用户体验，我希望快到4楼了就换到4楼，而不是顶格写
5.多动手多动手多动手！！！
---------------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------
注意：
1.自己写了一遍，竟然写出来了！！开心
2.卡壳在两个地方：attr竟然写成了att 哭。第二个&&写成了$$我是有多蠢啊啊啊啊
扫一扫
2169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
