今天写了分页面中的基本信息
基本信息
别看内容没多少，但是写css的时候可花了不少的时间。现在发现div真是个好东西，基本上页面上的内容都是他完成的。现在对text-align:center理解又加深了，这句代码说把当前元素的内容，以当前元素的宽度水平居中。vertical-align;top垂直居顶，和上面对齐。
6.2日 20:05更新产品详情
产品详情
写这个页面时，学到了新知识点。伪元素简单的说就是在html里没有这个元素，是通过
css插进去的元素，html里没有这个元素。
用到了:before 和:after两个为元素。他们的作用分别是在当前元素前加入内容和当前元素后加入内容，加入内容也就间接生成了元素。在css中必须写上content: ，指的是加入的内容，如果你不想加入内容，只想生成元素的话。就content: "" 这样内容就为空。
6.4日更新 交互
图片交互
点击下面图片，上面就会出现对应的大图片。这就用到了预加载，在html中，这五张小图片后还有一个div ,不过这个div是隐藏的。在jquery中，在当鼠标经过小图片时，取小图片的URL值，不取src值是因为小图片加载快，而使用大图片只是修改下尺寸的话，相当于有五张大图片，这样加载就没有五张小图片加载的快了。
把上面图片src值修改成当前小图片的URL值。在当大图片加载完时，调用load()函数，在使用each()函数遍历五张小图片元素，然后使用attr()获取当前小图片的URL值，在创造一个图片类，再把图片类的src设置成获取到的URL值。再把图片类调用onload事件，这个事件的意思是当页面加载完成时，触发这个事件，再把图片加到隐藏的div中。
这样没点击一个小图片时，隐藏的div就会增加五个大图片。很显然，应该还可以改改。先设置一个变量为false，在触发load()事件时，增加个一个判断，当变量为真时，退出余下代码。在图片增加到div后，把变量设置为真。这样，点击小图片div就不会增加图片了。jquery代码如下
<script>
$(function(){
var he = false;
$("img.smallImage").mouseenter(function(){
var bigImgURL = $(this).attr("bigImgURL");
$("img.bigImg").attr("src", bigImgURL);
});
$("img.bigImg").load(function(){
if (he)
return;
$("img.smallImage").each(function(){
var bigImgURL = $(this).attr("bigImgURL");
var img = new Image();
img.src = bigImgURL;
img.onload = function(){
$("div.money").append($(img));
};
});
he = true;
});
});
</script>
输入框
当点击上下安按钮时，输入框数字随之增加减少。输入不能大于库存如果大于库存就等于库存，也不能小于库存，小于就等于一。库存是要在服务器取的，这就涉及了后端。现不能实现，所以就设置了一个变量代替库存。首先判读输入框的值不能为非数字和小于0.如果是就等于1.
在点击向上或向下箭头时就增加或减少。如果大于库存或小于0，就等于库存货1.jquery代码如下。
<script>
var stack = 66;
var num = 0;
$(function(){
$("input.inputText").keyup(function(){
var text = $(this).val();
num = parseInt(text);
if (isNaN(num))
num = 1;
if (num > stack)
num = stack;
$("input.inputText").val(num);
});
$("a.shang").click(function(){
num++;
if (num > stack)
num = stack;
$("input.inputText").val(num);
});
$("a.xia").click(function(){
num--;
if (num < 1)
num = 1;;
$("input.inputText").val(num);
});
});
</script>
商品介绍及评价
当鼠标点击商品详情或累计评价时，会显示对应的页面。设置详情和评价大小一样，内外边距也一样。在jquery中，先把评价页面隐藏，在当鼠标点击评价时，把详情隐藏 评价显示。当鼠标点击详情时，则相反。jquery代码如下。
<script>
$(function(){
$("div.parentDiv1").hide();
$("a.evaluation").click(function(){
$("div.parentDiv").hide();
$("div.parentDiv1").show();
});
$("a.productReviewTopPartSelectedLink").click(function(){
$("div.parentDiv").show();
$("div.parentDiv1").hide();
});
});
</script>
