发表于： 2019-12-19 23:01:27
1 1101
今天完成的事情：写完了任务十的主体
明天计划的事情：写响应式部分
遇到的问题：模拟表格花费较长时间
收获：先上效果图
主体部分基本写完，具体代码
<ul class="nav nav-pills nav-justified pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">在线定制</a></li>
<li><a href="#">标准箱</a></li>
<li><a href="#">品质保障</a></li>
</ul>
</div>
<div class="Flowchart">
<div class="Flowchartpart1">
<div class="tophalf">
<div class="bothsides">
</div>
<div class="between">
4
</div>
<div class="bothsides">
</div>
</div>
<div class="bottomhalf">
4,确认下单
</div>
</div>
<div class="Flowchartpart1">
<div class="tophalf">
<div class="bothsides">
</div>
<div class="between">
3
</div>
<div class="bothsides">
</div>
</div>
<div class="bottomhalf">
3,上传附件
</div>
</div>
<div class="Flowchartpart1">
<div class="tophalf">
<div class="bothsides">
</div>
<div class="between">
2
</div>
<div class="bothsides">
</div>
</div>
<div class="bottomhalf">
2,选择数量
</div>
</div>
<div class="Flowchartpart1">
<div class="tophalf">
<div class="bothsides">
</div>
<div class="between">
1
</div>
<div class="bothsides">
</div>
</div>
<div class="bottomhalf">
1,定制纸箱
</div>
</div>
</div>
<div class="main">
<div class="table-caption">
请您按照以下步骤来定制您的纸箱
</div>
<div class="tablepart1">
<img src="./9/1.jpg" alt="">
选择箱型
</div>
<div class="tablepart2">
<div class="tablepart2left">
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 对口箱
</div>
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 飞机盒
</div>
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 天地盖
</div>
</div>
<div class="tablepart2right">
<select class="selection">
<option value="html">查看详情</option>
<option value="css">对口箱</option>
<option value="JavaScript">飞机盒</option>
<option value="php">天地盖</option>
</select>
</div>
</div>
<div class="tablepart1">
<img src="./9/2.jpg" alt="">
确定尺寸
</div>
<div class="tablepart2 Derivation1">
<div class="tablepart2leftfather">
<div class="tablepart2left" style="margin-bottom: 20px;">
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 对口箱
</div>
<div class="long">
长<input type="text">mm
</div>
<div class="long">
宽<input type="text">mm
</div>
<div class="long">
高<input type="text">mm
</div>
</div>
<div class="tablepart2left">
<div class="tablepart2wrap" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 对口箱
</div>
<div class="long">
长<input type="text">mm
</div>
<div class="long">
宽<input type="text">mm
</div>
<div class="long">
高<input type="text">mm
</div>
</div>
</div>
<div class="tablepart2right">
<select class="selection">
<option value="html">查看详情</option>
<option value="css">对口箱</option>
<option value="JavaScript">飞机盒</option>
<option value="php">天地盖</option>
</select>
</div>
</div>
<div class="tablepart1">
<img src="./9/3.jpg" alt="">
选择材质
</div>
<div class="tablepart2">
<div class="tablepart2left">
<div class="tablepart2wrap-2" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 三层A瓦优质
</div>
<div class="tablepart2wrap-2" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 三层A瓦优质
</div>
<div class="tablepart2wrap-2" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 三层A瓦优质
</div>
<div class="tablepart2wrap-2" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 三层A瓦优质
</div>
<div class="tablepart2wrap-2" tabindex="1">
<div class="Matryoshka">
<div class="Matryoshka1"></div>
</div> 三层A瓦优质
</div>
</div>
<div class="tablepart2right">
<select class="selection">
<option value="html">查看详情</option>
<option value="css">对口箱</option>
<option value="JavaScript">飞机盒</option>
<option value="php">天地盖</option>
</select>
</div>
</div>
<div class="nextwrap">
<div class="nextstep">
下一步
</div>
</div>
重复的就不贴了，明天继续
返回列表
评论