前端实训demo：
任务：仿淘宝商品浏览页面
实现思路：
1、 导入准备好的data.js2、 想法是通过art-template.js 进行渲染
3、 第一要取到data中的数据才能进行渲染
4、 第二取到后 对数据进行设计和排版
遇到的问题：
1、 在取图片时出现了疑问 放图：
之前学习的时候没有考虑过怎对 对象数组进行取值，之前是对 数组 及 对象进行取值。在这点考虑过长，最后通过对象转换成数组进行取值。 2、取到图片后，对图片的排版调节，着实费脑。也可能是因为代码写少的原因。废话太多，直接上思路~! 我用了li标签 通过循环把取到的图片放了进去 之后在li标签里 嵌套一层div 分别对div和li标签设置样式。非常酸爽，给li标签固定长宽，设置为浮动之后居中。之后里面的div嘛~直接magrin属性 这样就能把图片居中giao~
3、在次同层级div 子级为span标签 进行商品属性的排版 最后再来一个同层div再来两个span标签 对价格和喜好度进行调整 搞定收工
代码实现展示及其作品：
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝商品选择页面</title>
<script src="art-template.js" charset="UTF-8" type="text/javascript"></script>
<script src="data.js" charset="UTF-8" type="text/javascript"></script>
<style type="text/css">
li {
height: 740px;
width: 450px;
border: 1px solid black;
/* 浮动 */
float: left;
list-style: none;
text-align: center;
}
.box1 {
margin: 20px auto 0;
}
img {
width: 90%;
}
.box2 {
height: 52px;
margin: 0 14px 0;
}
.box3 {
font-size: 19px;
background-color: lightgrey;
margin-left: 8px;
float: left;
}
li div:nth-of-type(3) span {
margin-top: 10px;
display: inline-block;
width: 50%;
float: left;
font-size: 25px;
}
li div:nth-of-type(3) span:nth-of-type(1) {
text-align: left;
}
li div:nth-of-type(3) span:nth-of-type(2) {
text-align: right;
}
</style>
</head>
<body>
<!-- 模板使用 -->
<script id="tb" type="text/html">
<ul>
{
{
each list value }}
<li>
<div class="box1">
<img src="{
{value.image}}" >
</div>
<div class="box2">
{
{
each value.props value i}}
<span class="box3">
{
{
value}}
</span>
{
{
/each}}
</div>
<div>
<span> ￥{
{
value.price}}</span>
<span> {
{
value.collectNum}}❤ </span>
</div>
</li>
{
{
/each}}
</ul>
</script>
</body>
<script type="text/javascript">
var htmlStr = template('tb', {
list})
document.body.innerHTML = htmlStr;
</script>
</html>
运行展示：
搞定 @.@ 明儿见 good night
؏؏☝ᖗ乛◡乛ᖘ☝؏؏ 回家~~~