完整的首页产品列表是在
模仿天猫首页 中，每个分类有5种首页推荐产品，一共17种分类。 为了讲解的便利性，只选取了其中的2个分类来分析样式。
如果屏幕分辨率比较小的话，会看到5个产品换行了，这是因为为了演示实际效果，放在了步骤栏里，压缩了宽度。 相同的代码，放在整个页面就不会换行了。
");
window.frames["iframe_show3203"].document.write(decodeHtml($("textarea#stepcodeTextarea3203").val()));
window.frames["iframe_show3203"].document.close();
$(window.frames["iframe_show3203"]).load(function(){
$("#iframe_show3203").height($("#iframe_show3203").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3203").height($("#iframe_show3203").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.homepageCategoryProducts{
background-color: #F5F5F5;
padding: 50px 10px 50px 10px;
margin: 10px auto;
max-width: 1013px;
}
div.productItem{
width: 189px;
height: 285px;
border: 1px solid white;
background-color: white;
margin: 8px 4px;
float: left;
cursor: pointer;
}
div.productItem span.productItemDesc{
font-size: 12px;
color: #666666;
display: block;
padding: 16px;
}
div.productItem span.productPrice{
font-size: 16px;
color: #FF003A;
display: block;
padding-left: 16px;
margin-top: -10px;
}
div.productItem img{
width: 187px;
height: 190px;
}
div.productItem img:hover{
opacity: 0.7;
filter: alpha(opacity = 70);
}
div.eachHomepageCategoryProducts{
margin: 0px 0px 40px 0px;
}
a.productItemDescLink{
display: inline-block;
height: 66px;
text-decoration:none;
}
span.categoryTitle{
font-size: 16px;
margin-left: 30px;
color: #646464;
font-weight: bold;
}
div.left-mark{
display: inline-block;
height: 20px;
vertical-align: top;
width: 5px;
background-color: #19C8A9;
}
img.endpng{
display: block;
width: 82px;
margin: 0 auto;
}
</style>
<div class="homepageCategoryProducts">
<div class="eachHomepageCategoryProducts">
<div class="left-mark"></div>
<span class="categoryTitle">太阳镜</span>
<br>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9543.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
好先生同款墨镜孙红雷偏光男士太阳镜韩明星
</span>
</a>
<span class="productPrice">
97.50
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9532.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
陌森太阳眼镜男女2016偏光定制驾驶近视
</span>
</a>
<span class="productPrice">
518.70
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9521.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
</span>
</a>
<span class="productPrice">
624.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9510.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
变色眼镜男女款半框太阳镜大框潮流防辐射防
</span>
</a>
<span class="productPrice">
170.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9499.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
新款男士偏光太阳镜日夜两用墨镜潮运动开车
</span>
</a>
<span class="productPrice">
551.00
</span>
</div>
<div style="clear:both"></div>
</div>
<div class="eachHomepageCategoryProducts">
<div class="left-mark"></div>
<span class="categoryTitle">安全座椅</span>
<br>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10192.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
新生儿婴儿提篮式安全座椅汽车用车载儿童安
</span>
</a>
<span class="productPrice">
882.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10181.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
REEBABY汽车儿童安全座椅ISOFI
</span>
</a>
<span class="productPrice">
1,344.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10170.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
REEBABY儿童安全座椅9个月-12岁
</span>
</a>
<span class="productPrice">
1,216.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10159.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
好孩子汽车儿童安全座椅goodbaby9
</span>
</a>
<span class="productPrice">
1,199.40
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10148.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
惠尔顿儿童安全座椅isofix硬接口汽车
</span>
</a>
<span class="productPrice">
1,993.60
</span>
</div>
<div style="clear:both"></div>
</div>
<img src="http://127.0.0.1/tmall../../../img/site/end.png" class="endpng" id="endpng">
</div>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.homepageCategoryProducts{
background-color: #F5F5F5;
padding: 50px 10px 50px 10px;
margin: 10px auto;
max-width: 1013px;
}
div.productItem{
width: 189px;
height: 285px;
border: 1px solid white;
background-color: white;
margin: 8px 4px;
float: left;
cursor: pointer;
}
div.productItem span.productItemDesc{
font-size: 12px;
color: #666666;
display: block;
padding: 16px;
}
div.productItem span.productPrice{
font-size: 16px;
color: #FF003A;
display: block;
padding-left: 16px;
margin-top: -10px;
}
div.productItem img{
width: 187px;
height: 190px;
}
div.productItem img:hover{
opacity: 0.7;
filter: alpha(opacity = 70);
}
div.eachHomepageCategoryProducts{
margin: 0px 0px 40px 0px;
}
a.productItemDescLink{
display: inline-block;
height: 66px;
text-decoration:none;
}
span.categoryTitle{
font-size: 16px;
margin-left: 30px;
color: #646464;
font-weight: bold;
}
div.left-mark{
display: inline-block;
height: 20px;
vertical-align: top;
width: 5px;
background-color: #19C8A9;
}
img.endpng{
display: block;
width: 82px;
margin: 0 auto;
}
</style>
<div class="homepageCategoryProducts">
<div class="eachHomepageCategoryProducts">
<div class="left-mark"></div>
<span class="categoryTitle">太阳镜</span>
<br>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9543.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
好先生同款墨镜孙红雷偏光男士太阳镜韩明星
</span>
</a>
<span class="productPrice">
97.50
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9532.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
陌森太阳眼镜男女2016偏光定制驾驶近视
</span>
</a>
<span class="productPrice">
518.70
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9521.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
</span>
</a>
<span class="productPrice">
624.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9510.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
变色眼镜男女款半框太阳镜大框潮流防辐射防
</span>
</a>
<span class="productPrice">
170.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/9499.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
新款男士偏光太阳镜日夜两用墨镜潮运动开车
</span>
</a>
<span class="productPrice">
551.00
</span>
</div>
<div style="clear:both"></div>
</div>
<div class="eachHomepageCategoryProducts">
<div class="left-mark"></div>
<span class="categoryTitle">安全座椅</span>
<br>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10192.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
新生儿婴儿提篮式安全座椅汽车用车载儿童安
</span>
</a>
<span class="productPrice">
882.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10181.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
REEBABY汽车儿童安全座椅ISOFI
</span>
</a>
<span class="productPrice">
1,344.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10170.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
REEBABY儿童安全座椅9个月-12岁
</span>
</a>
<span class="productPrice">
1,216.00
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10159.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
好孩子汽车儿童安全座椅goodbaby9
</span>
</a>
<span class="productPrice">
1,199.40
</span>
</div>
<div class="productItem">
<a href="#nowhere"><img width="100px" src="http://127.0.0.1/tmall/img/productSingle_middle/10148.jpg"></a>
<a href="#nowhere" class="productItemDescLink">
<span class="productItemDesc">[热销]
惠尔顿儿童安全座椅isofix硬接口汽车
</span>
</a>
<span class="productPrice">
1,993.60
</span>
</div>
<div style="clear:both"></div>
</div>
<img src="http://127.0.0.1/tmall../../../img/site/end.png" class="endpng" id="endpng">
</div>
");
window.frames["iframe3203"].document.write(decodeHtml(code3203));
window.frames["iframe3203"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3203"]).load(function(){
$("#iframe3203").height($("#iframe3203").contents().find("body").height()+showittryitheight);
});
$("#iframe3203").height($("#iframe3203").contents().find("body").height()+showittryitheight);
alreadyWriteCode3203 = code3203;
$("#rendering3203").hide();
$("#rendered3203").show();
}
var tRereshRetry2DemoPanel3203 = setInterval(rereshRetry2DemoPanel3203,1000);
var binded3203 = false;
$("textarea#stepcodeTextarea3203").keyup(function(){
if(!binded3203){
$(window).bind('beforeunload',function(){
binded3203 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3203 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3203!=newCode){
// window.frames["iframe3203"].document.write("
");
// window.frames["iframe3203"].document.write(decodeHtml($("textarea#stepcodeTextarea3203").val()));
// window.frames["iframe3203"].document.close();
// $(window.frames["iframe3203"]).load(function(){
// $("#iframe3203").height($("#iframe3203").contents().find("body").height()+showittryitheight);
// });
// code3203 = newCode;
// }
});
$(".tryButton3203").click(function(){
$("#tryDiv3203").show();
$("#stepcodeTextarea3203").focus();
$("#stepcodeTextarea3203").height(200);
$("#iframe3203").height(0);
window.frames["iframe3203"].document.write("
");
window.frames["iframe3203"].document.write(decodeHtml($("textarea#stepcodeTextarea3203").val()));
window.frames["iframe3203"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3203"]).load(function(){
$("#iframe3203").height($("#iframe3203").contents().find("body").height()+showittryitheight);
});
$("#iframe3203").height($("#iframe3203").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3203.focus();
editor3203.setSize(null, "250");
$("#rendering3203").hide();
$("#rendered3203").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor3203 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3203"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor3203.on("change",function(doc){
if(!binded3203){
$(window).bind('beforeunload',function(){
binded3203 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3203 = newCode;
$("textarea#stepcodeTextarea3203").val(newCode);
if(alreadyWriteCode3203!=code3203){
lastModifedTime3203 = new Date().getTime();
$("#rendering3203").show();
$("#rendered3203").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3203 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3203.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3203").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
