根据设计师设计的页面写出前端网页代码：
1页面基本布局、默认样式重置、页面背景
规划整个页面布局header、nav、content、header等；
清除某些标签（body、ul/ol/li、img、h1-h6、a、p、dl/dd等）默认样式；
背景：通过PS截取1px的颜色渐变的png-24（一般使用字节小的格式）图片，再将图片进行平铺。
body{
margin:0;
background:url('../imgs/bg.png') repeat-x;
}
2页面头部
头部菜单使用ul li 里面使用a标签；
圆点（尽量使用图片，自带的li样式圆点不同浏览器下样式不一样）；list-style: none;
帮助信息（电话、帮助信息等），国旗图片可以切换语言；
选择器尽量简短能唯一作用到即可（不一定所有层级都涉及到）；
将小图标抠图抠下来（可以直接复制某个图层，选择要复制到的文件，可以将多个图标放在一张图例（需要测量好位置，拉好辅助线通过margin获取到要的图片位置）），最后保存时使用图像、裁切（注意复制时不要背景色）；
抠图时可以将原图以100%截屏，然后再另存为后进行扣；
图片一般存为PNG24（IE6下PNG24不认，需要通过JS解决）；
<!--[if IE 7]-->
<!-- 解决IE6下PNG24图片兼容性问题 -->
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('*');
</script>
<!--[endif]-->
样式太多，尽量一个标签的样式写到一行；
调试页面可以加上背景颜色或者边框；
alt图片占位符，当由于网络原因图片没有加载出来时，可以通过alt显示出某些文字说明的占位等；
title是图片说明文字；
<img src="imgs/products/pop.gif" alt="pop" title="pop"></img>
一般padding margin等都设置双数或者左右相加，上下相加为双数；
开启显示参考线Ctrl+;
font复合样式没有color;
3购物、标题
扣字母图片，先选中区域，选择图像——》裁剪，再去掉背景图层即可（必须通过历史记录撤销以上操作恢复原本图片）；
可以将多个图片合并起来以便管理：取最宽的一张图片的宽度，在图片1上点击图像——画布大小增加高宽（宽=最宽图片宽；高=两图片高之和），再在另一张图片2窗口处右击，点击移动到新窗口，窗口变小后，将图片拖进图片1；
可以横着排，也可以竖着排，通过background的position定位left right top bottom来得到固
定部分。
示例：
<div id="shopping">
<p>0 items in your bag</p>
<a href="#">Check Out</a>
</div>
#shopping{width:278px;height:98px;background:url(../imgs/shopping_checkout_bg.png) no-repeat left 6px;float:left;}
a{display:inline-block;width:114px;height:24px;position:absolute;left:104px;top:64px;background:url(../imgs/shopping_checkout_bg.png) no-repeat left -92px;color:#ffc200;text-align:center;}
图片尽量左右空白间距一致好设置居中；
a和p标签不支持宽高，需设置display：inline-block;
想要位置绝对准确可使用position，但是元素父级也需要设置相对定位；
#header{width:960px;height:98px;margin:0 auto;background:url(../imgs/halo_bg.png) no-repeat;position:relative;}
#header h1{display:inline-block;width:234px;height:94px;background:url(../imgs/title_bg.png) no-repeat;position:absolute;left:362px;top:4px;}
光晕切图：需要把不相关的图片去掉；
4搜索框、导航栏
两个搜索框基本相同（背景图片、功能、提交相同，位置不同），通过父级-》子级不同的定位不同的搜索框；
#content .search{left:666px;top:604px;}
#header .search{left:666px;top:34px;}
.search{width:292px;height:32px;background:url(../imgs/search_bg.png) no-repeat;position:absolute;}
.search .searchTxt{width:230px;height:32px;line-height:32px;padding-left:20px;position:absolute;left:0;top:0;background:none;outline:none;font:13px/32px Arial;color:#666666;}
.search #subtn{width:42px;height:32px;position:absolute;left:250px;top:0;background:none;outline:none;}
两处样式可以同时设置：
输入框要使用自定义的背景需要设置原来text和submit的背景为background:none;
一般尽量使用绝对定位，尽量少使用float，浮动在IE6下会有很多兼容问题；
outline属性:点中时标签的边框样式， 设置 4 个边框的样式，所有浏览器都支持;
导航栏一般使用三层嵌套设置背景（导航栏自适应宽度的背景）：
<a><strong><span>HOME</span></strong></a>。strong定义加粗的被强调的文本；
注意群组选择器的使用：此处使用 .active a .active strong .active span获取到选择器
<li class="active"><a><strong><span>HOME</span></strong></a></li>；
示例：
/* 活动单元格和鼠标悬停样式 */
#nav .active a,#nav li a:hover{float:left;height:26px;background:url(../imgs/nav_bg.png) repeat-x 0 -28px;}
#nav .active strong,#nav a:hover strong{float:left;height:26px;background:url(../imgs/nav_bg.png) no-repeat;font-weight: normal;font-size:16px;color:#fff;}
#nav .active span,#nav a:hover span{float:left;height:26px;background:url(../imgs/nav_bg.png) no-repeat right -56px;padding:0 16px;}
5内容区域
阴影高度随内容高度自适应，底部渐变（也使用div标签三层嵌套）；
整个大背景有三个背景：头部椭圆形背景（弧度），中间渐变背景，底部渐变消失背景。中间多余的内容平铺成白色即可。要是背景自适应需要使用三张图片拼接，使中间图片平铺；
填充某一块区域颜色：编辑——》填充——》颜色
圆角背景一般做淡入淡入，其他动作视觉效果会有点问题；
使用ul放多张图片（广告区域）；
标题、文字区域、背景区域；
banner图片单独放进一个文件夹，且要做出淡入淡出（多个li通过JS做）；
黑色半透明背景：使用滤镜，IE下，filter:alpha(opacity:80);标准浏览器下opacity:0.8；
ul和li为什么也要定位？ul和li需要被背景盖住，且层级不一样，h2和p的层级高于背景；
让背景居中可以使用margin:0 auto 也可以使用相对定位的top left去居中；
文字需要先确定行高，再确定margin和padding;
6内容区侧边栏menu
测量总宽高及左右分别宽高；
设置浮动后需要清除浮动；
左侧栏结构：使用dl的话圆角不好处理，所以使用div;
标题使用三层嵌套（自适应宽度）；
图片平铺：竖着平铺多张图横着合并，横着平铺多张图片竖着合并；
strong\span是内联元素需要设置display:block才可以设置宽高；
7join Now、PayPal、头部下拉框
背景：上下圆角中间平铺（使用三层嵌套div）
PS中新打开图片想直接更改：图像模式设置成RGB模式即可；
渐变图层不能直接抠图，可以将源图以100%比例打开，先截图到另外一个文件后，再进行抠图
Paypal:
如果没有特殊要求，直接放图片在上面即可；
头部下拉框：
下拉框样式：想要做到自定义效果就不能使用原来的select标签，可以使用dl dd dt来实现；
给文字加span，方便之后加点击动作；
text-indent文本缩进；
下拉框小图标变化，使用a链接，并定位，然后通过背景图进行改变；
一左一右浮动，清浮动（父级设置高即可）；
ul一般都是相对定位；
8our products
鼠标移入，边框变化；
li多个元素想要显示在一行，但是子级li宽不够会显示到第二行。此时如果想要一行显示，可以设置子级宽一点，尽可能使各个边框显示完全，再在父级中使用overflow:hidden隐藏多余部分；
#our_pdts { width:706px; overflow:hidden;}
#our_pdts ul { border:1px solid red;width:730px;}
三角符号：使用宋体；
底部1px的边框线；
CSS选择器选择到某个标签的最后一个子元素：p:last-child；
<a href="#" class="active">1</a>这种只能通过.active定位到，不能通过a .active定位到；
9 featured products
图片展示区可滚动显示；
绝对定位必须要设置宽高才能显示出来；
.prev, .next {width:36px;height:42px;position:absolute;top:74px;}
.prev {left:0;background:url('../imgs/products/scroll_bg.png') no-repeat;}
.next {right:0;background:url('../imgs/products/scroll_bg.png') no-repeat right -42px;}
10兼容性问题
firefox、IE7及以上、Chrome、IE6
IE6下问题：
1.PNG24图片不兼容；
解决：引入外部JS文件，及JS引入html中
<!--[if IE 6]-->
这段代码只有IE下能看到
<!--[endif]-->
一般在html最后引入的DD_belatedPNG_0.0.8a.js文件，且只有在IE6下能看到。即使用<!--[if IE 6]-->注释起来。调用JS文件中的DD_belatedPNG. (‘div,p,img’)即那个地方用到PNG图片就写上此标签；也可以使用*；
<!--[if IE 6]-->
<!-- 解决IE6下PNG24图片兼容性问题 -->
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG('*');
</script>
<!--[endif]-->
有时候即使使用了PNG24兼容JS后，还是会有1个或者0.5个像素图片兼容问题；所以此时还是使用gif格式的图片比较好。且宽高最好使用偶数，否则会出现问题。
2.图片整体靠上显示；
解决：IE6下行高line-hight不能针对图片进行设置并让其居中。
可以单独设置一个样式处理IE6下的该问题。
/* 解决IE6下图片不能使用line-height进行设置居中显示的问题:先让其变成块，加上浮动再加上相对定位即可 */
/* 解决IE6下兼容问题的原则：坚决不用CSS的HACK，向后扩展性不好 */
.img_center img { float:left;position:relative;top:10px;}
3.input中text不居中而是靠上
解决：让行高line-height和height一样高
#searchTxt{width:230px;height:32px;line-height:32px; }
4.超链接没有小手的样式
解决：设置光标的cursor:pointer即可；
a { text-decoration: none;cursor:pointer;}
a:hover { text-decoration: none;cursor:pointer;}
5超链接鼠标移入时下划线仍然显示；
解决：将移入时的下划线也去掉即可
a:hover { text-decoration: none;cursor:pointer;}
11JS效果
所有JS功能：
- form的input框鼠标移入时，value消失，移出时value显示；
- banner滚动；
- 下拉菜单，点击屏幕任何页面，下拉菜单隐藏；
- 最下面图片无限切换；
如何在一个页面写JS：
- JS的分层（功能）：JS类库（jquery等JS工具）、组件（UI：拖拽、弹窗等）、应用（app）、mvc(backboneJS)；
- JS的规划（管理）：避免全局变量和方法（命名空间、闭包、面向对象等）、模块化（seaJS
、requireJS）；
输入框：移入移出都有条件，移入时，文字为Search website时，设置为空；移出时，文字为空时才设置为默认值Search website；这个效果可以看做是共用的效果，其他输入框可以通用；
banner淡入淡出：
建立两个透明层控制翻页按钮的显示与否，并通过class获取到两个透明层;
//要想让所有浏览器都支持通过class获取元素，必须封装成一个方法；
sale.tools.getByClass = function (oParent,sClass){
var eles = oParent.getElementsByTagName('*');
var arr = [];
for(var i = 0;i < eles.length;i++){
//如果传入的className == 此className则将获取到的元素放进arr中
if(eles[i].className == sClass){
arr.push(eles[i]);
}
}
return arr;
};
var prevSpan = sale.tools.getByClass(adDiv,'prev_bg')[0];
var nextSpan = sale.tools.getByClass(adDiv,'next_bg')[0];
获取所有的li；
三个li，第一个li的透明度为100%，后两个li透明度为0，当切换时，第一个li透明度从100变为0，再次切换时第三个li从0变为100，其他两个都变成0；
通过id获取到banner所在的整体div的；
让banner图片3秒切换一次setInterval(auto,3000)（自动播放并重复播放）。每次调用定时器时要清除上一次设置的定时器，所以要给此定时器命名；
timer = setInterval(auto, 3000);
function auto(){
//li循环累加标识
//当循环到最后一张banner图片时，重置播放次数count
if(curBanner == lis.length-1){
curBanner = 0;
}else{
curBanner++;
}
//循环让所有li淡出
for(var i = 0;i<lis.length;i++){
sale.ui.fadeOut(lis[i]);
}
//然后让当前li淡入（将淡入淡出提取出功能）
sale.ui.fadeIn(lis[curBanner]);
}
li循环原理：第一次让所有的li淡出，让第二个li淡入，下一次让所有li淡出，然第三个li淡入，一直循环知道鼠标移入（累加的过程）；
淡入淡出很多地方都会用到，所以写成组件；
淡入：从0开始，并且事先清除定时器。速度每次递增5。当value为100时即透明度显示时，累加速度并且opacity/100(opacity是从0到100)；
淡出：和淡入相反；
<ul>
<li>
<a href="#"><img src="imgs/banner/banner1.png" alt="adviertisement" title="adviertisement"></img></a>
</li>
<li>
<a href="#"><img src="imgs/banner/banner2.gif" alt="desert" title="desert"></img></a>
</li>
<li>
<a href="#"><img src="imgs/banner/banner3.gif" alt="jellyfish" title="jellyfish"></img></a>
</li>
<li>
<a href="#"><img src="imgs/banner/banner4.gif" alt="lighthouse" title="lighthouse"></img></a>
</li>
</ul>
window.onload = function(){
sale.app.toTip();
sale.app.changeBanner();
};
//分层书写
var sale = {};//命名空间
sale.ui = {};
//淡入淡出
sale.ui.fadeIn = function(obj){
//淡入：opacity从0渐变到100
var opacityVal = 0;
//为防止多次点击时会有加入过程，需要事先清理已存在的定时器
clearInterval(obj.timer);
//需要清理已存在的定时器，否则有可能fadeIn会执行多次
obj.timer = setInterval(function(){
//设置渐入渐出的速度
var iSpeed = 5;
//如果透明度达到100则显示图片并清除定时器
if(opacityVal == 100){
clearInterval(obj.timer);
}else{
//将每次渐入进行累加，并赋值给当前元素的透明度
opacityVal += iSpeed;
obj.style.opacity = opacityVal/100;
obj.style.filter = 'alpha(opacity='+opacityVal+')';//兼容IE浏览器
}
}, 30);
};
sale.ui.fadeOut = function(obj){
//淡出：opacity从100渐变到0
var opacityVal = 100;
//为防止多次点击时会有加入过程，需要事先清理已存在的定时器
clearInterval(obj.timer);
//需要清理已存在的定时器，否则有可能fadeIn会执行多次
obj.timer = setInterval(function(){
//设置渐入渐出的速度
var iSpeed = -5;
//如果透明度达到100则显示图片并清除定时器
if(opacityVal == 0){
clearInterval(obj.timer);
}else{
//将每次渐入进行累加，并赋值给当前元素的透明度
opacityVal += iSpeed;
obj.style.opacity = opacityVal/100;
obj.style.filter = 'alpha(opacity='+opacityVal+')';//兼容IE浏览器
}
}, 30);
};
sale.ui.getByClass = function (classN){
};
sale.app = {};
//淡入淡出可能会重用，所以写成组件
sale.app.changeBanner = function(){
//循环所有li,三个li，第一个li的透明度为100%，后两个li透明度为0，当切换时，第一个li透明度从100变为0，再次切换时第三个li从0变为100，其他两个都变成0；
//banner淡入淡出，第一个li100%，后两个透明度0，再从0 到100%
//获取整个div
var adDiv = document.getElementById("ad");
//获取到整个div上所有的li
var lis = adDiv.getElementsByTagName("li");
//设置li上的定时器
var timer = setInterval(auto, 3000);
var curBanner = 0;
//定时器，li淡入淡出循环原理：先让所有图片淡出，再将需要显示的图片淡入。即第一次让所有的li淡出，让第二个li淡入；下一次让所有li淡出，然第三个li淡入，一直循环知道鼠标移入（累加的过程）；
function auto(){
//li循环累加标识
//当循环到最后一张banner图片时，重置播放次数count
if(curBanner == lis.length-1){
curBanner = 0;
}else{
curBanner++;
}
//循环让所有li淡出
for(var i = 0;i<lis.length;i++){
sale.ui.fadeOut(lis[i]);
}
//然后让当前li淡入（将淡入淡出提取出功能）
sale.ui.fadeIn(lis[curBanner]);
}
鼠标移入时，要显示对应的icon（display:block），并且定时器要停下来。获取到两个icon所在的span，需要提取成功能便于通用；
要想让所有浏览器都支持通过class获取元素，必须封装成一个方法；
鼠标移动到icon上时图片抖动（因为span和a是分离的，只需要给a标签同样加上display:block即可），且清除移入时定时器的自动播放；
点击icon时切换（加点击事件）；
var timer = setInterval(auto, 3000);
var curBanner = 0;
//定时器，li淡入淡出循环原理：先让所有图片淡出，再将需要显示的图片淡入。即第一次让所有的li淡出，让第二个li淡入；下一次让所有li淡出，然第三个li淡入，一直循环知道鼠标移入（累加的过程）；
function auto(){
//li循环累加标识
//当循环到最后一张banner图片时，重置播放次数count
if(curBanner == lis.length-1){
curBanner = 0;
}else{
curBanner++;
}
//循环让所有li淡出
for(var i = 0;i<lis.length;i++){
sale.ui.fadeOut(lis[i]);
}
//然后让当前li淡入（将淡入淡出提取出功能）
sale.ui.fadeIn(lis[curBanner]);
}
//往前翻页
function autoPrev(){
//li循环累减标识
//当循环到最后一张banner图片时，重置播放次数count
if(curBanner == 0){
curBanner = lis.length-1;
}else{
curBanner--;
}
//循环让所有li淡出
for(var i = 0;i<lis.length;i++){
sale.ui.fadeOut(lis[i]);
}
//然后让当前li淡入（将淡入淡出提取出功能）
sale.ui.fadeIn(lis[curBanner]);
}
//鼠标悬浮后停止轮播，并显示翻页图标，点击图标可以进行翻页
//获取能让翻页按钮显示的鼠标悬浮区域span
var prevSpan = sale.tools.getByClass(adDiv,'prev_bg')[0];
var nextSpan = sale.tools.getByClass(adDiv,'next_bg')[0];
//通过class形式获取到需要显示的a标签图片icon
var prevA = sale.tools.getByClass(adDiv,'prevA')[0];
var nextA = sale.tools.getByClass(adDiv,'nextA')[0];
//给两个span加鼠标移入移出事件即可
prevSpan.onmouseover = prevA.onmouseover = function(){
prevA.style.display = 'block';
//鼠标移入后要停止轮播定时任务
clearInterval(timer);
};
prevSpan.onmouseout = prevA.onmouseout = function(){
prevA.style.display = 'none';
timer = setInterval(auto, 3000);
};
nextSpan.onmouseover = nextA.onmouseover = function(){
nextA.style.display = 'block';
clearInterval(timer);
};
nextSpan.onmouseout = nextA.onmouseout = function(){
nextA.style.display = 'none';
timer = setInterval(auto, 3000);//不能写成var timer = setInterval(auto, 3000);或者setInterval(auto, 3000);这样会重新写一个定时器
};
//点击翻页按钮时翻页，next可以直接使用auto自动翻页，prev时和next想反，可以重写方法
prevA.onclick = function(){
autoPrev();
};
nextA.onclick = function(){
auto();
};
12下拉框和滚动播放
11中淡入淡出存在bug：让所有的li一起淡入，一起淡出，但是所有的li中，并不是全部的li的透明度都统一为0或者统一为100，所以必须设置到opacity为0时就不需要淡出，opacity为100时就不需要淡入了。解决：写个方法获取当前DOM最终样式；
sale.tools.getStyle = function(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
};
淡入时：
var curOp = sale.tools.getStyle(obj,'opacity');
if(curOp == 100){
return false;
}
淡出时：
var curOp = sale.tools.getStyle(obj,'opacity');
if(curOp == 0){
return false;
}
下拉框：
获取到所有的dd即下拉框；
将所有的dd加点击事件和索引；
将所有的dl显示出来：首先让所有的先隐藏，再让当前的li打开；
当点击屏幕任意位置时就隐藏li;
阻止冒泡：var ev = ev || ev.event;
通过JS给dl添加鼠标移入移出样式（复用组件可以封装函数，可以直接采用闭包的写法）；
闭包写法：(function(ul){方法体})(aul[i]);
点击时，让点击的value替换h2文本框的值（通过ul的索引找到h2,通过parentNode）；
点击完之后，隐藏li层(也要阻止冒泡，不能影响到父级点击事件效果);
点击左右箭头滚动播放：
原理：图片时通过绝对定位设置的，切换时只要更改left的值即可；
无缝切换：把ul赋值一份，当走到一半时，再复制到当前ul处。通过uls.innerHTML+=uls.innerHTML;
设置ul的总长度：lis.length * lis[0].offsetWidth +‘px’;这样就能将复制好的ul排在前一个的后面；
每次点击按钮，长度都成倍增长到下一个，可以设置标识，然后给按钮加点击事件，点击next时，li往左运动的运动效果，最好把此方法封装成公用组件方法；
运动方法：首先需要清除定时器。参数，obj,当前值，变化后的值。
var isSpeed = (now-old)/10;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(now == old){
clearInterval(obj.timer);
}else{
old +=iSpeed;
obj.style.left = old+“px”;
}
判断标识为ali.length/2时，就需要将标识和length还原为0，这样就能无缝衔接；
有padding或者margin等设置后有可能测量的li 的width和要移动的长度产生问题；
14最后代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XHTML+CSS整站布局实战</title>
<link href="css/XHTML+CSS2.css" rel="stylesheet" type="text/css" />
<script src="js/XHTML+CSS.js"></script>
</head>
<body>
<div id="top">
<ul class="top_bar">
<li><a href="#">Account Sign In</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Buyers Guide</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="no_icon"><a href="#">Contact</a></li>
</ul>
<ul class="contact_bar">
<li class="contact">123.456.7890</li>
<li class="help"><a href="#">Live Help</a></li>
<li class="canada img_center"><a href="#"><img src="imgs/Canada.png" alt="加拿大" title="加拿大"></img></a></li>
<li class="american img_center"><a href="#"><img src="imgs/American.png" alt="美国" title="美国"></img></a></li>
</ul>
</div>
<div id="header">
<div id="shopping">
<p>0 items in your bag</p>
<a href="#">Check Out</a>
</div>
<h1 id="Ecommerce Website"></h1>
<div class="search">
<form id="searchForm" action="">
<input type="text" id="searchTxt2" class="searchTxt" value="Search website"/>
<input type="submit" id="subtn" value=""/>
</form>
</div>
</div>
<ul id="nav">
<li class="active"><a><strong><span>HOME</span></strong></a></li>
<li><a><strong><span>LATEST ARRIVALS\</span></strong></a></li>
<li><a><strong><span>MEN'S</span></strong></a></li>
<li><a><strong><span>WOMEN'S</span></strong></a></li>
<li><a><strong><span>KIDS</span></strong></a></li>
<li><a><strong><span>BRANDS</span></strong></a></li>
<li><a><strong><span>SALE</span></strong></a></li>
<li><a><strong><span>GIFT CARDS</span></strong></a></li>
<li><a><strong><span>FREEBIES</span></strong></a></li>
</ul>
<div id="content">
<div id="content_top">
<div id="content_bottom">
<div id="ad">
<a href="javascript:;" class="prevA"><img src="imgs/prev.png" alt="prev" title="prev"></img></a>
<a href="javascript:;" class="nextA"><img src="imgs/next.png" alt="next" title="next"></img></a>
<!-- 建立两个透明层，移入移出时分别显示不同按钮 -->
<span class="prev_bg"></span>
<span class="next_bg"></span>
<ul>
<li>
<a href="#"><img src="imgs/banner/banner1.png" alt="adviertisement" title="adviertisement"></img></a>
</li>
<li>
<a href="#"><img src="imgs/banner/banner2.gif" alt="desert" title="desert"></img></a>
</li>
<li>
<a href="#"><img src="imgs/banner/banner3.gif" alt="jellyfish" title="jellyfish"></img></a>
</li>
<li>
<a href="#"><img src="imgs/banner/banner4.gif" alt="lighthouse" title="lighthouse"></img></a>
</li>
</ul>
<h2>PRODUCT TITLE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit lacus dapibus ante mattis in adipiscing nibh placerat. Cras bibendum porta diam, non dignissim sapien malesuada vitae.</p>
<div class="bg"></div>
</div>
<div id="module_menu" class="clearfloat">
<div id="menu">
<div id="menu_h2"><h2><strong><span>Browse Categories</span></strong></h2></div>
<div id="list">
<strong><span><ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Amet consectetur</a></li>
<li><a href="#">Adipiscin elit</a></li>
<li><a href="#">Cras suscipit lacus</a></li>
<li><a href="#">Dapibus ante mattis</a></li>
<li><a href="#">Adipiscing nibh placerat</a></li>
<li><a href="#">Cras bibendum</a></li>
<li><a href="#">Porta diam elit</a></li>
<li><a href="#">Adipiscing nibh placerat</a></li>
<li><a href="#">Cras bibendum</a></li>
<li><a href="#">Porta diam elit</a></li>
</ul></span></strong>
</div>
<div id="join_now">
<div id="join_now_top">
<div id="join_now_bottom">
<p>Join our newsletter list to get the latest updates</p>
<form action="" method="post">
<input type="text" class="joinnow_txt"/>
<input type="submit" class="joinnow_btn" value="Join Now"/>
</form>
<ul>
<li class="height1">Follow us on Twitter</li>
<li class="height2">Become our fan on Facebook</li>
<li class="height3">Connect with us on LinkedIn</li>
<li class="height4">Send us your email enquiries</li>
</ul>
</div>
</div>
</div>
<div id="paypal"></div>
</div>
<div id="wrap">
<div id="sort" class="clearfloat">
<p>Sort by:</p>
<dl>
<dd>
<h2>Ascending</h2><a href="javascript:void(0);"></a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</dd>
</dl>
<dl>
<dd>
<h2>Product Name</h2><a href="javascript:void(0);"></a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</dd>
</dl>
<dl>
<dd>
<h2>Brand Name</h2><a href="javascript:void(0);"></a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</dd>
</dl>
<div id="per_page"><p>Items per page: <span>12</span> / <span>20</span> / <span class="color_style">30</span> / <span class="color_style">50</span></p></div>
</div>
<div id="our_pdts">
<h2>OUR PRODUCTS</h2>
<ul class="clearfloat">
<li>
<img src="imgs/products/1.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
<li>
<img src="imgs/products/2.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
<li>
<img src="imgs/products/3.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
<li>
<img src="imgs/products/4.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
</ul>
<ul class="clearfloat">
<li>
<img src="imgs/products/1.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
<li>
<img src="imgs/products/2.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
<li>
<img src="imgs/products/3.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
<li>
<img src="imgs/products/4.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
</ul>
<ul class="clearfloat">
<li>
<img src="imgs/products/1.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
<li>
<img src="imgs/products/2.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
<li>
<img src="imgs/products/3.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
<li>
<img src="imgs/products/4.gif"></img>
<p>Product Name</p>
<p>Price: <span class="color_style">$12.99</span></p>
</li>
</ul>
<div id="pager">
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">NEXT ></a>
<a href="#">LAST >></a>
</div>
</div>
<div id="featured_pdts">
<h2>FEATURED PRODUCTS</h2>
<div id="featured">
<div id="featured_left">
<div id="featured_right">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
<div id="scroll_pdts">
<ul class="clearfloat">
<li>
<a href="javascript:;"><img src="imgs/products/mp3.gif" alt="mp3" title="mp3"></img></a>
<p>Elegant MP3 player skin PSD download</p>
</li>
<li>
<a href="javascript:;"><img src="imgs/products/shopping_bag.gif" alt="bag" title="bag"></img></a>
<p>Download shopping bag & icons (PSD & PNG)</p>
</li>
<li>
<a href="javascript:;"><img src="imgs/products/pop.gif" alt="pop" title="pop"></img></a>
<p>High resolution abstract bokeh background</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_info">
<div id="promise1">Shop online with us safely & securely</div>
<div id="promise2">We ship your orders anywhere!</div>
<div class="search">
<form id="searchForm" action="">
<input type="text" id="searchTxt1" class="searchTxt" value="Search website"/>
<input type="submit" id="subtn" value=""/>
</form>
</div>
</div>
<div id="footer_link">
<table id="foot_link_info">
<tr>
<th>Company</th>
<th>Categories</th>
<th>Information</th>
<th>Social Network</th>
<th>Contact Us</th>
</tr>
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Lorem ipsum dolor sit</a></td>
<td><a href="#">My Account</a></td>
<td><a href="#">My Account</a></td>
<td>Phone: 1.234.567.8901</td>
</tr>
<tr>
<td><a href="#">About Us</a></td>
<td><a href="#">Amet consectetur</a></td>
<td><a href="#">Rewards</a></td>
<td><a href="#">Rewards</a></td>
<td>Toll-Free: 1.234.567.8901</td>
</tr>
<tr>
<td><a href="#">Blog</a></td>
<td><a href="#">Adipiscin elit</a></td>
<td><a href="#">Terms & Conditions</a></td>
<td><a href="#">Terms & Conditions</a></td>
<td>Fax: 1.234.567.8901</td>
</tr>
<tr>
<td><a href="#">Latest News</a></td>
<td><a href="#">Cras suscipit lacus</a></td>
<td><a href="#">Buying Guide</a></td>
<td><a href="#">Buying Guide</a></td>
<td>Email: <a href="#"><span class="email">Send us an email</span></a></td>
</tr>
<tr>
<td><a href="#">Login</a></td>
<td><a href="#">Dapibus ante mattis</a></td>
<td><a href="#">FAQ</a></td>
<td><a href="#">FAQ</a></td>
<td><a href="#"></a></td>
</tr>
<tr>
<td><a href="#">Join Us</a></td>
<td><a href="#">Adipiscing nibh placerat</a></td>
<td></td>
<td></td>
<td>MON - SAT 9am to 7:30pm</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Sundays, holidays closed</td>
</tr>
</table>
</div>
</div>
<!--[if IE 7]-->
<!-- 解决IE6下PNG24图片兼容性问题 -->
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('*');
</script>
<!--[endif]-->
</body>
</html>JS:
/*如何在一个页面写JS
JS的分层（功能）：JS类库（jquery等JS工具）、组件库（UI：拖拽、弹窗等）；
JS的规划（管理）；避免全局变量和方法（命名空间、闭包、面向对象等）、模块化（seaJS
、requireJS）；*/
window.onload = function(){
sale.app.toTip();
sale.app.changeBanner();
sale.app.toSelect();
sale.app.toScroll();
};
//分层书写
var sale = {};//命名空间
sale.tools = {};
//要想让所有浏览器都支持通过class获取元素，必须封装成一个方法；
sale.tools.getByClass = function (oParent,sClass){
var eles = oParent.getElementsByTagName('*');
var arr = [];
for(var i = 0;i < eles.length;i++){
//如果传入的className == 此className则将获取到的元素放进arr中
if(eles[i].className == sClass){
arr.push(eles[i]);
}
}
return arr;
};
//获取最终样式
sale.tools.getStyle = function(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
};
sale.ui = {};
sale.ui.textChange = function (obj,str){
obj.onfocus = function(){
if(this.value == str){
this.value = '';
}
};
obj.onblur = function(){
if(this.value == ''){
this.value = str;
}
};
};
//淡入淡出
sale.ui.fadeIn = function(obj){
var curOp = sale.tools.getStyle(obj,'opacity');
if(curOp == 100){
return false;
}
//淡入：opacity从0渐变到100
var opacityVal = 0;
//为防止多次点击时会有加入过程，需要事先清理已存在的定时器
clearInterval(obj.timer);
//需要清理已存在的定时器，否则有可能fadeIn会执行多次
obj.timer = setInterval(function(){
//设置渐入渐出的速度
var iSpeed = 5;
//如果透明度达到100则显示图片并清除定时器
if(opacityVal == 100){
clearInterval(obj.timer);
}else{
//将每次渐入进行累加，并赋值给当前元素的透明度
opacityVal += iSpeed;
obj.style.opacity = opacityVal/100;
obj.style.filter = 'alpha(opacity='+opacityVal+')';//兼容IE浏览器
}
}, 30);
};
sale.ui.fadeOut = function(obj){
var curOp = sale.tools.getStyle(obj,'opacity');
if(curOp == 0){
return false;
}
//淡出：opacity从100渐变到0
var opacityVal = 100;
//为防止多次点击时会有加入过程，需要事先清理已存在的定时器
clearInterval(obj.timer);
//需要清理已存在的定时器，否则有可能fadeIn会执行多次
obj.timer = setInterval(function(){
//设置渐入渐出的速度
var iSpeed = -5;
//如果透明度达到100则显示图片并清除定时器
if(opacityVal == 0){
clearInterval(obj.timer);
}else{
//将每次渐入进行累加，并赋值给当前元素的透明度
opacityVal += iSpeed;
obj.style.opacity = opacityVal/100;
obj.style.filter = 'alpha(opacity='+opacityVal+')';//兼容IE浏览器
}
}, 30);
};
//滚动右移
sale.ui.moveRight = function(obj,old,now){
//首先清除定时器
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var iSpeed = (now-old)/10;
//ceil向上取整 floor向下取整 使其居正
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(now == old){
clearInterval(obj.timer);
}else{
old +=iSpeed;
obj.style.left = old+'px';
}
},30);
};
//滚动左移
sale.ui.moveLeft = function(obj,old,now){
//首先清除定时器
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var iSpeed = (now-old)/10;
//ceil向上取整 floor向下取整 使其居正
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(now == old){
clearInterval(obj.timer);
}else{
old +=iSpeed;
obj.style.left = old+'px';
}
},30);
};
sale.app = {};
sale.app.toTip = function(){
//输入框：移入移出都有条件，移入时，文字为Search website时，设置为空；移出时，文字为空时才设置为默认值Search website
var searchTxt1 = document.getElementById('searchTxt1');
var searchTxt2 = document.getElementById('searchTxt2');
sale.ui.textChange(searchTxt1,'Search website');
sale.ui.textChange(searchTxt2,'Search website');
};
//淡入淡出可能会重用，所以写成组件
sale.app.changeBanner = function(){
//循环所有li,三个li，第一个li的透明度为100%，后两个li透明度为0，当切换时，第一个li透明度从100变为0，再次切换时第三个li从0变为100，其他两个都变成0；
//banner淡入淡出，第一个li100%，后两个透明度0，再从0 到100%
//获取整个div
var adDiv = document.getElementById("ad");
//获取到整个div上所有的li
var lis = adDiv.getElementsByTagName("li");
//设置li上的定时器
var timer = setInterval(auto, 3000);
var curBanner = 0;
//定时器，li淡入淡出循环原理：先让所有图片淡出，再将需要显示的图片淡入。即第一次让所有的li淡出，让第二个li淡入；下一次让所有li淡出，然第三个li淡入，一直循环知道鼠标移入（累加的过程）；
function auto(){
//li循环累加标识
//当循环到最后一张banner图片时，重置播放次数count
if(curBanner == lis.length-1){
curBanner = 0;
}else{
curBanner++;
}
//循环让所有li淡出
for(var i = 0;i<lis.length;i++){
sale.ui.fadeOut(lis[i]);
}
//然后让当前li淡入（将淡入淡出提取出功能）
sale.ui.fadeIn(lis[curBanner]);
}
//往前翻页
function autoPrev(){
//li循环累减标识
//当循环到最后一张banner图片时，重置播放次数count
if(curBanner == 0){
curBanner = lis.length-1;
}else{
curBanner--;
}
//循环让所有li淡出
for(var i = 0;i<lis.length;i++){
sale.ui.fadeOut(lis[i]);
}
//然后让当前li淡入（将淡入淡出提取出功能）
sale.ui.fadeIn(lis[curBanner]);
}
//鼠标悬浮后停止轮播，并显示翻页图标，点击图标可以进行翻页
//获取能让翻页按钮显示的鼠标悬浮区域span
var prevSpan = sale.tools.getByClass(adDiv,'prev_bg')[0];
var nextSpan = sale.tools.getByClass(adDiv,'next_bg')[0];
//通过class形式获取到需要显示的a标签图片icon
var prevA = sale.tools.getByClass(adDiv,'prevA')[0];
var nextA = sale.tools.getByClass(adDiv,'nextA')[0];
//给两个span加鼠标移入移出事件即可
prevSpan.onmouseover = prevA.onmouseover = function(){
prevA.style.display = 'block';
//鼠标移入后要停止轮播定时任务
clearInterval(timer);
};
prevSpan.onmouseout = prevA.onmouseout = function(){
prevA.style.display = 'none';
timer = setInterval(auto, 3000);
};
nextSpan.onmouseover = nextA.onmouseover = function(){
nextA.style.display = 'block';
clearInterval(timer);
};
nextSpan.onmouseout = nextA.onmouseout = function(){
nextA.style.display = 'none';
timer = setInterval(auto, 3000);//不能写成var timer = setInterval(auto, 3000);或者setInterval(auto, 3000);这样会重新写一个定时器
};
//点击翻页按钮时翻页，next可以直接使用auto自动翻页，prev时和next想反，可以重写方法
prevA.onclick = function(){
autoPrev();
};
nextA.onclick = function(){
auto();
};
};
//下拉框
sale.app.toSelect = function(){
//获取到下拉框所在的div
var sortDiv = document.getElementById("sort");
//获取到下拉框所在的div下的所有dd
var dds = sortDiv.getElementsByTagName("dd");
//获取到需要展开的ul
var uls = sortDiv.getElementsByTagName("ul");
var h2s = sortDiv.getElementsByTagName("h2");
//给dd设置点击事件
for(var i = 0;i<dds.length;i++){
//给每一个dd加上索引
dds[i].index = i;
dds[i].onclick = function(ev){
//为了让点击屏幕任意位置，ul全部隐藏，需要对父级dd的点击事件进行阻止冒泡
var ev = ev || window.event;
//循环隐藏所有的ul，打开指定ul
var This = this;
for(var j = 0;j<uls.length;j++){
uls[j].style.display = "none";
uls[This.index].style.display = "block";
}
//点击屏幕任意位置，ul全部隐藏
document.onclick = function(){
uls[This.index].style.display = "none";
};
//在任何位置阻止冒泡即可
ev.cancelBubble = true;
};
}
for(var i = 0;i<uls.length;i++){
//给ul加上索引，通过ul的索引获得对应h2标签的值
uls[i].index = i;
//采用闭包写法即封装函数
(function(ul){
//获取到每个ul下面对应的li
var lis = sortDiv.getElementsByTagName("li");
for(var j = 0;j<lis.length;j++){
lis[j].onmouseover = function(){
this.className = "activeLi";
};
lis[j].onmouseout = function(){
this.className = "";
};
//点击li时点击的文字替换文本还h2的内容
lis[j].onclick = function(){
var ev = ev || window.event;
h2s[this.parentNode.index].innerHTML = this.innerHTML;
ev.cancelBubble = true;
//点击完后隐藏ul层
this.parentNode.style.display = 'none';
};
}
})(uls[i]);
}
};
sale.app.toScroll = function(){
//获取到整个div,div下的前后翻滚按钮，及li
//获取到下拉框所在的div
var featuredDiv = document.getElementById("featured");
//获取到下拉框所在的div下的所有a标签
var prev = sale.tools.getByClass(featuredDiv,'prev')[0];//注意通过class获取到的是数组
var next = sale.tools.getByClass(featuredDiv,'next')[0];
//获取到需要展开的li
var uls = featuredDiv.getElementsByTagName("ul")[0];//注意ul是数组
var lis = uls.getElementsByTagName("li");
//把ul赋值一份，当走到一半时，再复制到当前ul处
uls.innerHTML += uls.innerHTML;
uls.style.width = lis.length * lis[0].offsetWidth + 'px';
//定义标识，标识点击按钮后成倍位移
var isNow = 0;
//给按钮添加点击事件
prev.onclick = function(){
if(isNow == 0){
isNow = lis.length/2;
uls.style.left = lis.length/2;
}
//定义标识，标识点击按钮后成倍位移
sale.ui.moveRight(uls,-isNow*lis[0].offsetWidth,-(isNow-1)*lis[0].offsetWidth);
isNow--;
};
next.onclick = function(){
if(isNow == lis.length/2){
isNow = 0;
uls.style.left = 0;
}
//定义标识，标识点击按钮后成倍位移
sale.ui.moveLeft(uls,-isNow*lis[0].offsetWidth,-(isNow+1)*lis[0].offsetWidth);
isNow++;
};
};
CSS:
@CHARSET "UTF-8";
/* 初始化所有标签默认值 */
body{margin:0;background:url(../imgs/bg.png) repeat-x;}
dl,dt,dd,tr,td,th,input,ul,li{margin:0;padding:0;}
ul,ul li{list-style: none;}
p,h1,h2{margin:0;}
a,a:hover { text-decoration: none;cursor:pointer;}
img,input{border:none;}
table {border-collapse: collapse;}
/* 头部样式:menu+联系及帮助信息 */
#top{width:960px; margin:0 auto; height:30px;}
.top_bar{width:478px;float:left;}
.top_bar li{float:left;background: url(../imgs/top_icon.png) no-repeat right 13px;padding-right:15px;padding-left:13px;}
.top_bar li a{font:13px/30px Arial; color:#c0c0c0;}
.top_bar .no_icon{background:none;padding:0 0 0 14px;}
.contact_bar{width:320px;float:left;margin-left:155px;}
.contact_bar li{float:left;}
.contact_bar li,.contact_bar li a{font:bold 13px/30px Arial; color:#ffffff;}
.contact_bar .contact{background: url(../imgs/top_icon.png) no-repeat left -17px; padding-left:27px;}
.contact_bar .help{background: url(../imgs/top_icon.png) no-repeat left -46px;margin-left:38px;}
.contact_bar .help a{padding-left:38px;}
.canada{margin-left:29px;}
.american{margin-left:10px;}
/* 解决IE6下图片不能使用line-height进行设置居中显示的问题:先让其变成块，加上浮动再加上相对定位即可 */
/* 解决IE6下兼容问题的原则：坚决不用CSS的HACK，向后扩展性不好 */
.img_center img { float:left;position:relative;top:10px;}
/* 搜索及标题栏 */
#header{width:960px;height:98px;margin:0 auto;background:url(../imgs/halo_bg.png) no-repeat;position:relative;}
#shopping{width:278px;height:98px;background:url(../imgs/shopping_checkout_bg.png) no-repeat left 6px;float:left;}
#shopping p{display:inline-block;width:170px;height:20px;margin:32px 0 0 84px;font:20px/20px Arial;color:#f7f7f7;}
#shopping a{display:inline-block;width:114px;height:24px;position:absolute;left:104px;top:64px;background:url(../imgs/shopping_checkout_bg.png) no-repeat left -92px;color:#ffc200;text-align:center;}
#shopping a:hover{color:#ffe502;}
/* 搜索及标题栏:大标题 */
#header h1{display:inline-block;width:234px;height:94px;background:url(../imgs/title_bg.png) no-repeat;position:absolute;left:362px;top:4px;}
/* 搜索及标题栏:搜索框 */
#header .search{left:666px;top:34px;}
.search{width:292px;height:32px;background:url(../imgs/search_bg.png) no-repeat;position:absolute;}
.search .searchTxt{width:230px;height:32px;line-height:32px;padding-left:20px;position:absolute;left:0;top:0;background:none;outline:none;font:13px/32px Arial;color:#666666;}
.search #subtn{width:42px;height:32px;position:absolute;left:250px;top:0;background:none;outline:none;}
/* 导航栏 */
#nav{width:960px;height:36px;margin:0 auto;}
#nav li{float:left;height:26px;padding:8px 0px 8px 4px;}
#nav li a{float:left;height:26px;}
#nav li strong{float:left;height:26px;font-weight: normal;font-size:16px;color:#fff;}
#nav li span{float:left;height:26px;padding:0 16px;}
/* 活动单元格和鼠标悬停样式 */
#nav .active a,#nav li a:hover{float:left;height:26px;background:url(../imgs/nav_bg.png) repeat-x 0 -28px;}
#nav .active strong,#nav a:hover strong{float:left;height:26px;background:url(../imgs/nav_bg.png) no-repeat;font-weight: normal;font-size:16px;color:#fff;}
#nav .active span,#nav a:hover span{float:left;height:26px;background:url(../imgs/nav_bg.png) no-repeat right -56px;padding:0 16px;}
/* 正文内容 */
#content{width:1000px;margin:24px auto 0;background:url(../imgs/content_bg.png) repeat-y -1000px 0;}
#content_top{width:1000px;background:url(../imgs/content_bg.png) no-repeat;}
#content_bottom{width:1000px;background:url(../imgs/content_bg.png) no-repeat -2000px bottom;padding-top:10px;}/* 父级padding-top为10px;否则会整个div往下 */
#ad {width:940px;height:300px;margin:0 auto;position:relative;}
#ad ul,#ad li,#ad h2,#ad p,#ad .bg,#ad .prevA,#ad .nextA,#ad .prev_bg,#ad .next_bg{position:absolute;}
#ad ul{top:0;left:0;z-index:1;}
#ad ul li{top:0;left:0;}
/* banner左右翻页 */
#ad .prevA{top:74px;left:0;display:none; z-index:3;}
#ad .nextA{top:74px;right:0;display:none; z-index:3;}
/* banner透明层控制左右按钮显示与否 */
#ad .prev_bg {top:0;left:0;width:470px;height:300px;z-index:2;display:block;}
#ad .next_bg {top:0;right:0;width:470px;height:300px;z-index:2;display:block;}
#ad h2{left:0;bottom:8px;z-index:3;width:268px;color:#ffc600;text-align:center; line-height:32px;font-size:25px;font-weight:bold;}
#ad p{left:268px;bottom:8px;z-index:3;width:630px;font-size: 13px;color:#ffcccc;line-height:18px;}
/* 将半透明的区域定位到左下角bottom:0;right:0 */
#ad .bg{left:0;bottom:0;width:940px;height:52px;background: #000;filter:alpha(opacity:80);opacity:0.8;z-index:2;}
/* 内容区第一块menu */
#module_menu{width:942px;margin:30px auto 0;}
#module_menu #menu{ width:210px;heigth:390px;float:left;}
/* #module_menu #wrap{width:706px;height:390px;float:left;} */
/* 设置浮动后必须在父级清除浮动 */
.clearfloat{zoom:1;}
.clearfloat:after{content:'';display: block;clear:both;}
#menu #menu_h2 h2{display:block;height:30px;background:url('../imgs/menu_h2.gif') repeat-x 0 -60px;margin-bottom:1px;}
#menu #menu_h2 strong{display:block;height:30px;background:url('../imgs/menu_h2.gif') no-repeat;}
#menu #menu_h2 span{display:block;height:30px;background:url('../imgs/menu_h2.gif') no-repeat right -30px;color:#ffffff;line-height:30px;font-weight: bold;font-size: 15px;text-align: center;}
#list{width:210px;}
#list strong{display:block;width:210px;background:url('../imgs/menu_list.png') repeat-y right -209px;}
#list span{display:block;width:210px;background:url('../imgs/menu_list.png') no-repeat left bottom;}
#list ul{display:block;padding:18px 8px 16px 8px;}
#list ul li a{display:block;height:29px;line-height:29px;font-size:12px;font-weight:blod;color:#434343;padding-left:32px;border-bottom:1px solid #ffffff;}
#list ul li a:hover{background-color:#ffee99;color:#b20e00;border-bottom:1px solid #b20e00;}
/* 内容区Join Now */
#join_now{width:210px;background:url('../imgs/join_now_bg.gif') repeat-y right -420px;margin-top:8px;}
#join_now #join_now_top{width:210px;background:url('../imgs/join_now_bg.gif') no-repeat;}
#join_now #join_now_bottom{width:210px;background:url('../imgs/join_now_bg.gif') no-repeat -210px bottom;}
#join_now p{display:inline-block;inline-height:20px;margin:8px 16px 12px 16px;font-size:15px;color:#666666;}
#join_now .joinnow_txt{display:inline-block;width:176px;height:26px;border:1px solid #fff;border-top:1px solid #9c9c9c;border-left:1px solid #c0c0c0;margin:0 16px;color:#666666;}
#join_now .joinnow_btn{display:block;width:88px;height:25px;color:#fff;font-size:15px;font-weight:bold;line-height:25px;margin:8px auto 12px auto;background:url('../imgs/join_now_btn.png') no-repeat;}
#join_now ul{padding:0 8px 6px 8px;}
#join_now ul li{border-top:1px solid #fff;}
.height1{height:45px;line-height:45px;font-size:13px;color:#434343;background:url('../imgs/join_now_icon.gif') no-repeat 10px 0;padding-left:62px;}
.height2{height:48px;line-height:22px;font-size:13px;color:#434343;background:url('../imgs/join_now_icon.gif') no-repeat 10px -46px;padding-left:62px;}
.height3{height:50px;line-height:24px;font-size:13px;color:#434343;background:url('../imgs/join_now_icon.gif') no-repeat 10px -93px;padding-left:62px;}
.height4{height:45px;line-height:21px;font-size:13px;color:#434343;background:url('../imgs/join_now_icon.gif') no-repeat 10px -142px;padding-left:62px;}
/* 支付区域 */
#paypal { width:182px;height:174px;background:url('../imgs/PayPal.gif') no-repeat; margin:32px 10px 20px 18px; }
/* 正文内容下拉框、页码 */
#module_menu #wrap { width:706px; height:940px; margin:0 0 20px 26px; float:left; }
#wrap #sort { width:706px;height:20px;position:relative;}
#wrap #sort p { float:left;font-size:12px;font-weight:normal;color:#747474;margin-right:4px;}
#wrap #sort dl { float:left;width:114px;margin-right:12px;}
#wrap #sort dl dd { display:block;width:114px;height:20px;padding:0;border:1px solid #cccccc;font-size:12px;font-weight:normal;color:#747474;}
#wrap #sort dd h2 { text-indent: 5px;height:20px;float:left;font-size:12px;font-weight:normal;color:#747474;padding-right:5px;cursor: pointer;}
#wrap #sort dd a { display:block;width:20px;height:20px;float:right;background:url('../imgs/select_btn.png') no-repeat left;}
#wrap #sort a:hover { background:url('../imgs/select_btn.png') no-repeat right;}
#wrap #sort ul {display:none;padding-top:20px;width:112px;height:60px;border:1px solid #cccccc;}
#wrap #sort ul li { text-indent: 5px;line-height:20px;cursor: pointer;}
#wrap #sort #per_page {font-size:12px;font-weight:normal;color:#747474;position:absolute;right:0;}
.color_style {color:#b20e00;}
#wrap #sort .activeLi {background:#f5f5f2;}
/* 内容区域，产品列表 */
#our_pdts { border-bottom:1px solid #cdcdc8;width:706px;margin:26px 10px 0 0;overflow:hidden;}
#our_pdts h2 {font-size:18px;font-weight:bold;color:#666666;height:34px;line-height:24px;}
#our_pdts ul { width:730px;margin-bottom:44px;}
#our_pdts ul li { float:left;margin:0 26px 0 0;}
#our_pdts ul img { border:1px solid #c6c6c6;}
#our_pdts ul img:hover { border:1px solid #b20e00;}
#our_pdts ul li p {height:20px;line-height:20px;font-size:15px;font-weight:blod;color:#666666;}
#our_pdts ul li p:last-child {height:16px;line-height:16px;font-size:13px;font-weight:normal;color:#333333;}
/* 分页按钮 */
#pager { width:706px;height:32px;line-height:32px;text-align: center;}
#pager a { display:inline-block;height:24px;line-height:24px;color:#b20e00;padding:0 8px;}
#pager a:hover,#pager .active{ background-color:#b20e00;color:#fff;}
/* 内容区FEATURED PRODUCTS */
#featured_pdts { width:706px;overflow:hidden;}
#featured { width:706px;height:198px;background:url('../imgs/products/scroll_bg.png') repeat-x 0 -484px;}
#featured #featured_left { width:706px;height:198px;background:url('../imgs/products/scroll_bg.png') no-repeat 0 -84px;}
#featured #featured_right { width:706px;height:198px;background:url('../imgs/products/scroll_bg.png') no-repeat right -284px;position:relative;}
#featured_pdts h2 { font-size:18px;color:#666666;margin-top:20px;height:22px;line-height:22px;}
.prev, .next {width:36px;height:42px;position:absolute;top:74px;z-index:2;}
.prev {left:0;background:url('../imgs/products/scroll_bg.png') no-repeat;}
.next {right:0;background:url('../imgs/products/scroll_bg.png') no-repeat right -42px;}
/* #scroll_pdts { overflow: hidden;width: 678px;position:absolute;top:0;left:0;z-index:1;}
#scroll_pdts ul { position:relative;left:72px;top:36px;padding-left:72px;padding-top:36px;width:706px;height:198px;z-index:2;}
#scroll_pdts ul li {width:146px;float:left;padding-right:60px;}
#scroll_pdts ul li img { border:1px solid #c6c6c6;}
#scroll_pdts ul li img:hover { border:1px solid #b20e00;}
#scroll_pdts ul li p {display:inline-block;font-size:12px;color:#660000;} */
#scroll_pdts { width: 615px;height:150px;padding-top:32px;margin:0 auto;z-index:1;position:relative;overflow:hidden;}
#scroll_pdts ul { height:150px;position:absolute;z-index:2;}
#scroll_pdts ul li {width:205px;float:left;}
#scroll_pdts ul li a,#scroll_pdts ul li p { width:145px;margin:0 auto;}
#scroll_pdts ul li a { display:block;height:100px;}
#scroll_pdts ul li p {line-height:14px;padding-top:10px; font-size:12px;color:#660000;text-align:center;}
/* 页脚信息和链接 */
#footer { width:100%;background:url('../imgs/foot_bg.png') repeat-x;margin-top:10px;}
#footer #footer_info,#footer #promise1,#footer #promise2 { position:absolute;}
#footer #footer_info { width:100%;height:60px;position:relative;overflow:hidden;}
#footer #promise1 ,#footer #promise2 { height:60px;top:0;color:#cbcbcb;font-size:14px;font-weight:bold;padding-top:20px;line-height:18px;overflow:hidden;}
#footer #promise1 {width:350px;left:320px;background:url('../imgs/secured_icon.gif') no-repeat 6px 6px;padding-left:74px;}
#footer #promise2 { width:310px;left:670px;background:url('../imgs/orders_icon.gif') no-repeat 0 14px;padding-left:50px;}
#footer .search{left:990px;top:16px;}
/* 页脚链接 */
#footer #footer_link { width:952px;height:244px; margin:0 auto;}
#foot_link_info th { height:74px;font-size:15px;font-weight:bold;color:#ffffff;text-align:left;padding-right:60px;}
#foot_link_info td { font-size:13px;color:#cfcfcf;height:20px;line-height:20px;padding-right:60px; }
#foot_link_info a { display:inline-block;font-size:13px;color:#cfcfcf;height:20px;line-height:20px;}
#foot_link_info a:hover { color:#8b8b8b;}
#foot_link_info span {display:inline-block;}
#foot_link_info .email { color:#ffcc00!important;}
#foot_link_info span:hover {color:#fff107!important;}