【推荐理由】赠运费险
【优惠券】20 【券后价】59.00
【下单链接】18￥ CZ0001 G5fHdEqOsnB￥
今天小结一下，这个星期工作中涉及到的手机网站建设应用的css3+html5。本章由温州网站建设拾图网，为了给手机做上下滑动是响应切换，需要响应touchstart、touchmove、touchend事件；所以要添加zepto.js js库，关于zepto大家可以去百度一下，下载一个自己熟悉的版本；本章用到的是zepto_v1_1_6版本；另一个是在切换后显示的动画可以使用animate.min.css这个css3库来设置。
下面直接上代码：
js文件：
//全局变量，触摸开始位置
var startX = 0, startY = 0;
var win_w,win_h,size,zwidth,pid=0,zPid=0;
var curID,prevID,nextID;
var p_cx,p_cx_now,p_cy,p_cy_now,p_mar,p_move,p_marY,p_moveY;
//touchstart事件
function touchSatrtFunc(evt)
{
try
{
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
//var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
//document.getElementById("result").innerHTML = text;
var b=evt.touches[0];
p_cx=b.clientX;//获取初始坐标
p_cy=b.clientY;
//alert(p_cy);
p_mar=parseInt($(".main").css("left"));//获得初始top值
p_marY=parseInt($(".warp").css("top"));//获得初始top值
}
catch (e)
{
alert('touchSatrtFunc：' + e.message);
}
}
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
try
{
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
//判断滑动方向
if (x - startX != 0) {
text += '<br/>左右滑动';
}
if (y - startY != 0) {
text += '<br/>上下滑动';
}
//document.getElementById("result").innerHTML = text;
evt.preventDefault();//锁定系统活动
var b=evt.touches[0];
p_cx_now=b.clientX;//获取活动纵坐标
p_cy_now=b.clientY;
//alert(p_cy_now);
p_move=p_cx_now-p_cx;//计算移动距离
p_moveY=p_cy_now-p_cy;
$(".main").css({"left":p_mar+p_move});
$(".warp").css({"margin-top":p_marY+p_moveY});
}
catch (e) {
alert('touchMoveFunc：' + e.message);
}
}
//touchend事件
function touchEndFunc(evt)
{
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动
var text = 'TouchEnd事件触发';
//document.getElementById("result").innerHTML = text;
//----------------------------------------------------------------横向---滑动距离大于五分之一是开始
if(p_move>win_w/5)
{
//向右移动
pid=pid-1;
if(pid<0)
{
pid=size-1;//最多上翻到第一页
}
}
else if(p_move<-win_w/5)
{
//向左移动
pid=pid+1;
if(pid>size-1)
{
pid=0; //最多下翻到最后一页
}
}
else
{
pid=pid;//不翻页
}
$(".ahrefStrpage a").removeClass("cur");
$("#aprodlistLi"+(pid+1)).addClass("cur");
//size1=$(".ahrefStrpage a").size();
//$("#prodlist1 .main").css({"width":(size1-1)*win_w});
//alert(pid);
$(".main").animate({"left":-win_w*pid},100);
//alert("[href='#prodlistLi"+ pid +"']");
p_move=0;//重置移动距离
//--------------------------------------------------纵向移动设置
if(p_moveY>win_h/3)
{
//向上移动
zPid=zPid-1;
if(zPid<0)
{
zPid=zCounts-1;//最多上翻到第一页
}
}
else if(p_moveY<-win_h/3)
{
//向下移动
zPid=zPid+1;
if(zPid>zCounts-1)
{
zPid=0; //最多下翻到最后一页
}
}
else
{
zPid=zPid;//不翻页
}
//$(".warp #"+curID).fadeOut("slow");
if(p_moveY>win_h/3 || p_moveY<-win_h/3 )
{
$(".warp").animate({"margin-top":-win_h*zPid},100);
/*alert("zPid:"+zPid+",zCounts:"+zCounts);
if(zPid==0)
{
$("#prodlist1 .main").animate({"left":"0px"},100);
}*/
$(".main").animate({"left":"0px"},100);
}
//alert(p_moveY);
p_moveY=0;//重置移动距
//内置动画设置
if(zPid>0)
{
//var curObj=$("#prodlist"+zPid);
curZpid=zPid+1;
//$(".main li").css({"width":win_w,"height":"100%"});
$("#prodlist"+curZpid+" .productUl .prodlistLi h2").addClass("animated bounceInLeft");
$("#prodlist"+curZpid+" .productUl .prodlistLi .imgDiv").addClass("animated fadeInDown");
$("#prodlist"+curZpid+" .productUl .prodlistLi .titleDiv").addClass("animated fadeInDown");
$("#prodlist"+curZpid+" .productUl .prodlistLi .pageDiv").addClass("animated fadeInUp");
setTimeout(function(){
$("#prodlist"+curZpid+" .productUl .prodlistLi h2").removeClass("animated bounceInLeft");
$("#prodlist"+curZpid+" .productUl .prodlistLi .imgDiv").removeClass("animated fadeInDown");
$("#prodlist"+curZpid+" .productUl .prodlistLi .titleDiv").removeClass("animated fadeInDown");
$("#prodlist"+curZpid+" .productUl .prodlistLi .pageDiv").removeClass("animated fadeInUp");
},2000);
//横向设置
size=$("#prodlist"+curZpid+" .main li").size();
zwidth=win_w*size;
$("#prodlist"+curZpid+" .main").css({"width":zwidth});
$("#prodlist"+curZpid+" .productUl").css({"width":zwidth,"height":win_h});
}
else
{
$(".main li").css({"width":win_w,"height":"90%"});
$(".productUl li").css({"width":win_w,"height":"100%"});
//$("#prodlistLi"+(pid+1)+" dl dd").addClass("animated bounceInRight");
setTimeout(removeClass=function()
{
$("#prodlistLi"+(pid+1)+" dl dd").removeClass("animated bounceInRight");
}, 2000);
//pid=0;
//$("#prodlistLi"+(pid+1)+" dl dd a.awhite").focus();
}
//内置动画设置结束
}
catch (e)
{
alert('touchEndFunc：' + e.message);
}
}
//绑定事件
function bindEvent()
{
win_w=$(window).width();
win_h=$(window).height();
//横向设置
curID=$(" .main li").parent(".main").parent().attr("rel");
size=$("#"+ curID +" .main li").size();
//alert("size:"+size);
$(".prodlistDiv").css({"width":win_w,"height":win_h});
$(".main li").css({"width":win_w});
$(".productUl li").css({"width":win_w,"height":win_h});
zwidth=win_w*size;
$(".main").css({"width":zwidth});
$(".productUl").css({"width":zwidth,"height":win_h});
//纵向设置
zCounts=$(" .prodlistDiv").size();
zheight=win_h*zCounts;
$(".warp").css({"height":zheight});
//预加载百分比
$("#loading").css({"width":win_w,"height":win_h});
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
//判断是否支持触摸事件
function isTouchDevice()
{
//document.getElementById("version").innerHTML = navigator.appVersion;
try {
document.createEvent("TouchEvent");
//alert("支持TouchEvent事件！");
bindEvent(); //绑定事件
}
catch (e) {
alert("不支持TouchEvent事件！" + e.message);
}
}
function rechange(rel)
{
var zProdlist=$("[data-ahref='"+rel+"']").attr("data-id");
if(zProdlist!=undefined && zProdlist!="")
{
size=$("#prodlist"+zProdlist+" .main li").size();
zwidth=win_w*size;
$("#prodlist"+zProdlist+" .main").css({"width":zwidth});
$("#prodlist"+zProdlist+" .productUl").css({"width":zwidth,"height":win_h});
$("#prodlist"+zProdlist+" .productUl .prodlistLi h2").addClass("animated bounceInLeft");
$("#prodlist"+zProdlist+" .productUl .prodlistLi .imgDiv").addClass("animated fadeInDown");
$("#prodlist"+curZpid+" .productUl .prodlistLi .titleDiv").addClass("animated fadeInDown");
$("#prodlist"+zProdlist+" .productUl .prodlistLi .pageDiv").addClass("animated fadeInUp");
setTimeout(function(){
$("#prodlist"+zProdlist+" .productUl .prodlistLi h2").removeClass("animated bounceInLeft");
$("#prodlist"+zProdlist+" .productUl .prodlistLi .imgDiv").removeClass("animated fadeInDown");
$("#prodlist"+zProdlist+" .productUl .prodlistLi .titleDiv").removeClass("animated fadeInDown");
$("#prodlist"+zProdlist+" .productUl .prodlistLi .pageDiv").removeClass("animated fadeInUp");
},2000);
$(".warp").animate({"margin-top":-win_h*(zProdlist-1)},500);
}
else
{
alert("暂无内容！");
}
}
/*function aprodlistLi(rel)
{
//var rel=$(this).attr("rel");
$(".ahrefStrpage a").removeClass("cur");
$("#aprodlistLi"+(rel)).addClass("cur");
$("#prodlist1 .main").animate({"left":-win_w*(rel-1)},1000);
$("#prodlist1 .main li dl dd").removeClass("animated bounceInRight");
}
function pageDivFun()
{
$(".warp").animate({"margin-top":-win_h*0},500);
}*/
$("#prodlist1 a.awhite").click(function(){
var rel=$(this).attr("rel");
var zProdlist=$("[data-ahref='"+rel+"']").attr("data-id");
if(zProdlist!=undefined && zProdlist!="")
{
$(".warp").animate({"margin-top":-win_h*(zProdlist-1)},500);
}
});
$(".ahrefStrpage a").click(function(){
var rel=$(this).attr("rel");
//pid=rel;
//alert(rel);
$(".ahrefStrpage a").removeClass("cur");
$("#aprodlistLi"+(rel)).addClass("cur");
$("#prodlist1 .main").animate({"left":-win_w*(rel-1)},1000);
$("#prodlistLi"+ rel +" dl dd").addClass("animated bounceInRight");
setTimeout(removeClass=function()
{
$("#prodlistLi"+rel+" dl dd").removeClass("animated bounceInRight");
}, 2000);
//$("#prodlist1 .main li dl dd").removeClass("animated bounceInRight");
});
$(".pageDiv .aleft").click(function(){
$(".main").animate({"left":"0px"},0);
$(".warp").animate({"margin-top":-win_h*0},500);
$("#prodlistLi1 dl dd").addClass("animated bounceInRight");
setTimeout(removeClass=function()
{
$("#prodlistLi1 dl dd").removeClass("animated bounceInRight");
}, 2000);
//重置初始化
size=$("#prodlist1 .main li").size();
});
window.onload = isTouchDevice;asp的前台内容：
<!--#include file="Include/Const.Asp" -->
<!--#include file="Include/NoSQL.Asp" -->
<!--#include file="Include/PageClass.Asp" -->
<!--#include file="Include/ConnSiteData.Asp" -->
<%
Call SiteInfo()
If ISHTML = 1 Then
Response.expires = 0
Response.expiresabsolute = Now() - 1
Response.addHeader "pragma", "no-cache"
Response.addHeader "cache-control", "private"
Response.CacheControl = "no-cache"
End If
SortId = trim(request.QueryString("SortId"))
If SortId = "" Then
SeoTitle = "产品中心"
SortId="93"
end if
If Not IsNumeric(SortId) Then
SeoTitle = "参数错误"
ElseIf conn.Execute("select * from Qianbo_ProductSort Where ID="&SortId).EOF Then
SeoTitle = "参数错误"
Else
Set rs = server.CreateObject("adodb.recordset")
sql = "select * from Qianbo_ProductSort where ID="&SortId
rs.Open sql, conn, 1, 1
if "产品中心"=trim(rs("SortName")) then
SeoTitle = rs("SortName")
else
SeoTitle = rs("SortName")
end if
SortPath = rs("SortPath")
ParentId = rs("ParentId")
infor=rs("infor")
if infor="no" or infor="No" or infor="NO" or inofr="nO" then
infor=""
end if
rs.Close
Set rs = Nothing
End If
nindex = 4
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title><% =ComName %>|<% =SeoTitle %></title>
<meta name="keywords" content="<% =ComName %>|<% =SeoTitle %>" />
<meta name="description" content="<% =ComName %>|<% =SeoTitle %>" />
<link rel="stylesheet" type="text/css" href="animate.min.css">
<link rel="stylesheet" type="text/css" href="tshinet.com.css">
<style>
.arrow{
display: block;
height:10px;
width:10px;
position:absolute;
left: 50%;
margin-left: -10px;
bottom:0px;
border:3px solid transparent;
border-left-color: #fff;
border-top-color: #fff;
z-index: 99;
opacity: .8;
/*transfrom div*/
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
/*animation div*/
animation:arrowAnimate 2s infinite ease-in-out;
-webkit-animation:arrowAnimate 2s infinite ease-in-out;
}
@keyframes arrowAnimate{
0%{
opacity: 0.3;
transform:translate(0,0px) rotate(45deg),
-webkit-transform:translate(0,0px) rotate(45deg);
-ms-transform:translate(0,0px) rotate(45deg);
-moz-transform:translate(0,0px) rotate(45deg);
-o-transform:translate(0,0px) rotate(45deg)
}
50%{
opacity: 1;
transform:translate(0,-5px) rotate(45deg),
-webkit-transform:translate(0,-5px) rotate(45deg);
-ms-transform:translate(0,-5px) rotate(45deg);
-moz-transform:translate(0,-5px) rotate(45deg);
-o-transform:translate(0,-5px) rotate(45deg)
}
100%{
opacity: 0.3;
transform:translate(0,-15px) rotate(45deg),
-webkit-transform:translate(0,-15px) rotate(45deg);
-ms-transform:translate(0,-15px) rotate(45deg);
-moz-transform:translate(0,-15px) rotate(45deg);
-o-transform:translate(0,-15px) rotate(45deg)
}
}
.sk-fading-circle { margin: 40px auto; margin-bottom:10px; margin-top:60%; width: 40px; height: 40px; position: relative; }
.sk-fading-circle img{ width:40px; margin:0px auto;}
.loading_text{ width:100%; text-align:center; color:#fff; line-height:30px;}
</style>
</head>
<body>
<div id="version"></div>
<div id="result"></div>
<div class="loading_bg" id="loading">
<div class="sk-fading-circle">
<img src="images/img.gif" />
</div>
<div class="loading_text">0%</div>
</div>
<div class="warp" >
<!--产品目录-->
<div id="prodlist1" class="prodlistDiv" rel="prodlist1" >
<ul class="main">
<!--<li class="prodlistLi" id="prodlistLi1" rel="prodlist1" data-depth="0.00">1-1</li> -->
<%
Psize=9
curId=0
curLi=1
liStr=""
ddStr=""
set rs=server.CreateObject("adodb.recordset")
sql="select * from qianbo_productsort where Instr(sortpath,'0,93,')>0 and parentid=93 and viewflag order by clicknumber asc ,id asc "
rs.open sql,conn,1,1
do while not rs.eof
if curId<Psize then
if curLi=1 then
ddStr=ddStr & "<dd style='animate-delay:"& curId*100 &"ms;-webkit-animation-delay:"& curId*100 &"ms;'><a title='"& rs("sortname") &"' class='atitle'>"& rs("sortname") &"</a><a onclick='rechange("& rs("id") &")' rel='"& rs("id") &"' title='"& rs("sortname") &"' class='awhite'>查看详情</a></dd>"
else
ddStr=ddStr & "<dd style='animate-delay:"& curId*100 &"ms;-webkit-animation-delay:"& curId*100 &"ms;'><a title='"& rs("sortname") &"' class='atitle'>"& rs("sortname") &"</a><a onclick='rechange("& rs("id") &")' rel='"& rs("id") &"' title='"& rs("sortname") &"' class='awhite'>查看详情</a></dd>"
end if
else
liStr=liStr & "<li class='prodlistLi' id='prodlistLi"& curLi &"' rel='prodlist1' ><dl><dt>目录</dt>"& ddStr &"</dl></li>"
curId=0
ddStr=""
curLi=curLi+1
end if
curId=curId+1
rs.movenext
loop
rs.close
'剩余curId不满足10个是再加一页
if ddStr<>"" then
liStr=liStr & "<li class='prodlistLi' id='prodlistLi"& curLi &"' rel='prodlist1' ><dl><dt>目录</dt>"& ddStr &"</dl></li>"
end if
response.Write(liStr)
%>
</ul>
<div class="clear"></div>
<%
'页面设置
for i=1 to curLi
ahrefStr=ahrefStr & "<a id='aprodlistLi"& (i) &"' title='第"& i &"页' rel='"& i &"'>第"& i &"页</a>"
next
ahrefStr="<div class='ahrefStrpage'>"& ahrefStr &"</div>"
response.Write(ahrefStr)
%>
<div class="clear"></div>
<div style="position:relative; height:30px;"><div class="arrow"></div></div>
</div>
<div class="clear"></div>
<!--产品详情-->
<%
divStr=""
prodlistId=2
set trs=server.CreateObject("adodb.recordset")
sql="select * from qianbo_productsort where Instr(sortpath,'0,93,')>0 and parentId=93 and viewflag order by clicknumber asc,id asc"
rs.open sql,conn,1,1
do while not rs.eof
liStr=""
curId=rs("id")
ids=1
sortname=rs("sortname")
tsql="select count(*) as ct from qianbo_products where Instr(sortpath,'0,93,"& curId &",')>0 and viewflag and commandflag "
trs.open tsql,conn,1,1
icount=trs("ct")
trs.close
tsql="select * from qianbo_products where Instr(sortpath,'0,93,"& curId &",')>0 and viewflag and commandflag order by clicknumber asc,id asc "
'response.Write(tsql)
trs.open tsql,conn,1,1
do while not trs.eof
arrayImg=arrayImg & trs("smallpic") & ","
liStr=liStr & " <li class='prodlistLi' id='productLi"& trs("id") &"' rel='prodlist"& prodlistId &"'><h2>"& (prodlistId-1) &"、"& sortname &"</h2><div class='imgDiv'><img src='"& trs("smallpic") &"' /></div><div class='titleDiv'><strong>"& trs("productname") &"</strong><br/><span>("& icount &"产品 左右滑动查看)</span></div><div class='clear'></div><div class='pageDiv'><a href='javascript:void(0);' onclick='pageDivFun()' class='aleft'>返回目录</a><a class='aright'>第"& ids &"页</a></div><div class='leftRightDiv'></div><div class='clear'></div></li>"
ids=ids+1
trs.movenext
loop
trs.close
if liStr<>"" then
divStr=divStr & "<div id='prodlist"& prodlistId &"' class='prodlistDiv productsDiv' rel='prodlist"& prodlistId &"' data-ahref='"& curId &"' data-id='"& prodlistId &"' > <ul class='main productUl'>"& liStr &"</ul><div class='arrow'></div></div><div class='clear'></div>"
prodlistId=prodlistId+1
end if
rs.movenext
loop
rs.close
response.Write(divStr)
%>
<!-- <div id="prodlist2" class="prodlistDiv " rel="prodlist2" >
<ul class="main productUl">
<li class="prodlistLi" id="prodlistLi1" rel="prodlist2">2-1</li>
<li class="prodlistLi" id="prodlistLi2" rel="prodlist2">2-2</li>
<li class="prodlistLi" id="prodlistLi3" rel="prodlist2">2-3</li>
<li class="prodlistLi" id="prodlistLi4" rel="prodlist2">2-4</li>
</ul>
</div> -->
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/zepto_v1_1_6.js"></script>
<script src="js/a102076392.js"></script>
<script>
if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent)))
{
if (window.location.href.indexOf("?mobile") < 0)
{
var curNumber=1;
kaishi=setInterval(function()
{
curNumber=12+curNumber;
if(curNumber<100)
{
$(".loading_text").text((curNumber)+"%");
}
else
{
$(".loading_text").text("100%");
clearInterval(kaishi);
$("#loading").css("display","none");
$("#prodlist1 .main dl dd").addClass("animated bounceInDown");
}
},2000)
//clearInterval(kaishi);
}
}
else
{
// 如果以上都不是，则加载以下样式
alert("此页面只支持手机浏览！");
$(".warp").text("");
}
// 判断完毕后加载样
</script>
</body>
</html>css3文件：
/* CSS Document */
html,body{width:100%; height:100%; margin:0; padding:0; overflow:hidden; font-size:14px; font-family:Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;}
@media only screen and (max-height:479px){
body{font-size:12px;}
}
* {margin:0; padding:0;}
table,td,tr,a{margin:0px; padding:0px; font-size:12px; border:0px; line-height:22px;text-decoration:none;border-spacing:0px; }
h2{ margin:0px; padding:0px ; list-style:none;}
.clear{clear:both;}
#version,#result{ display:none}
/*加载层*/
.loading_bg{position:absolute; width:100%; height:100%; overflow:hidden; background-color:#f08903; left:0; top:0; -webkit-transform-style:preserve-3d; z-index:100}
.loading_wrp{position:absolute; width:100px; height:150px; overflow:hidden; left:50%; top:40%; margin:-50px 0 0 -50px;}
.loading_wrp b{font-weight:normal; position:absolute; display:block; width:100%; font-size:32px; line-height:40px; bottom:0px; color:#fff; text-align:center;}
.loading{position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; overflow:hidden; clip:rect(0 30px 60px 0); -webkit-animation:loading 1.2s linear infinite; -moz-animation:loading 1.2s linear infinite; -o-animation:loading 1.2s linear infinite; -ms-animation:loading 1.2s linear infinite; animation:loading 1.2s linear infinite;}
.loading_bar{position:absolute; left:0; top:0; width:60px; height:60px; border-radius:50px; overflow:hidden; background:#fff; background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,1)),to(rgba(255,255,255,0))); background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0)); background:-ms-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0));}
.loading_bar::before{content:''; position:absolute; width:54px; height:54px; overflow:hidden; border-radius:27px; background-color:#008c23; left:3px; top:3px;}
<!--产品列表-->
.warp{ width:100%; height:100%; margin:0px auto;overflow:hidden; position:relative}
.prodlistDiv{ width:100%; height:100%; margin:0px auto;overflow:hidden; position:relative}
.prodlistDiv ul{ height:90%; position:relative; }
.prodlistDiv ul li{ float:left; height:100%;position:relative; list-style:none; }
.prodlistDiv ul li dl{ width:99%; height:99%; margin:0px auto; margin-top:5px; position:absolute;}
.prodlistDiv ul li dl dt{ width:99%; height:40px;max-height:40px; line-height:40px; border:solid 1px #fff; text-align:left; text-indent:10px; font-size:22px; color:#fff; font-weight:bold;}
.prodlistDiv ul li dl dd{ width:99%; height:40px;max-height:40px; border:solid 1px #fff; border-top:0px; text-align:left; text-indent:10px; font-size:18px; position:relative; }
.prodlistDiv ul li dl dd a.atitle{ font-size:16px; float:left; margin-left:8px; line-height:40px; color:#fff; display:inline-block; height:100%; width:70%; overflow:hidden;}
.prodlistDiv ul li dl dd .awhite{ font-size:14px; float:right; margin-left:8px; margin-right:5px; background-color:#fff; height:30px; line-height:30px; margin-top:5px; display:inline-block; color:#0CF; display:inline-block; width:20%;min-width:70px; position:absolute; overflow:hidden;}
.productsDiv{ background-image:url(images/productbk.jpg); background-size:100%;}
.productUl{ height:100%;}
.productUl li{ height:100%;}
.productUl li h2{ margin-top:10px; height:10%; max-height:40px; line-height:40px; font-size:18px; color:#333; font-family:'微软雅黑','幼圆'; border-bottom:solid 2px #333; width:80%; text-indent:10px; list-style:none; list-style-type:none;}
.productUl li .imgDiv{ width:80%; height:68%; margin:0px auto; margin-top:8%; margin-bottom:5%;}
.productUl li .imgDiv img{width:100%; max-height:100%;}
.productUl li .titleDiv{ width:100%; height:30px; line-height:22px; text-align:center;}
.productUl li .titleDiv strong{font-size:14}
.productUl li .titleDiv span{ font-size:12px; color:red;}
.productUl li .pageDiv{ height:15%; width:100%; margin-top:15px;}
.productUl li .pageDiv a{ display:inline-block; height:100%; max-height:35px!important; width:80px; text-align:center; line-height:35px; background-color:#2a2b2b; color:#fff; font-size:16px; border:solid 1px #ccc; padding:1px; }
.productUl li .pageDiv a.aleft{ margin-left:20%;}
.productUl li .pageDiv a.aright{ margin-right:20%; float:right;}
#prodlist1{ background-color:#000; background-image:url(images/wz_prodlistbk.jpg); background-position:bottom left; background-repeat:no-repeat; background-size:100%;}
.ahrefStrpage{ width:100%; height:30px; position:relative; text-align:center;}
.ahrefStrpage a{font-size:16px; float:left; margin-left:8px; margin-right:5px; background-color:#fff; height:30px; line-height:30px; padding-left:10px; padding-right:10px; display:block; color:#0CF; display:inline-block;}
.ahrefStrpage .cur{ background-color:#2bd9ff;color:#fff;}
<!--小箭头-->以上是自己的实际案例，仅供参考！
