abstract:<div class="focus"> <!-- 小米闪购 --> <div class="focus_shop"> <p
<div class="focus"> <!-- 小米闪购 --> <div class="focus_shop"> <p>小米闪购</p> <!--小米闪购左图1--> <div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(229,57,53);background:RGB(241,237,237)"> <div class="focus_shopTime">18:00 场</div> <div class="focus_shopTitle1 fa fa-flash fa-4x"></div> <div class="focus_shopTitle2">距离开始还有</div> <div class="focus_shopTitle3"> <span class="focus_shopTitle3_1">00</span> <span style="color:RGB(96,87,81)">:</span> <span class="focus_shopTitle3_2">00</span> <span style="color:RGB(96,87,81)">:</span> <span class="focus_shopTitle3_3">00</span> </div> </div> <!--小米闪购右图3--> <div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(255,172,19);"> <img class="focus_shop_1Imag" src="/static/images/flashbuy/flashbuy1.jpg" alt=""> <p class="focus_shop_1P1">米家空气净化器Pro白色</p> <p class="focus_shop_1P2">大空间,快循环</p> <p class="focus_shop_1P3"><span style="color:#ff6700">1399 元</span> <del>1499元</del></p> <div class="bg"></div> </div> <!--小米闪购右图3代码一样,复制即可--> </div> <!--小米闪购CSS样式 /*小米闪购CSS样式*/ .focus_shop p,.main p{ font-size:25px;height:75px; line-height:90px;color:RGB(51,51,51); } .focus_shop_1{ width:237px;height:342px; background:#fff;float: left; text-align: center;line-height:50px;position: relative; } .focus_shop_1 .focus_shopTime{ font-size: 23px; color:RGB(239,58,59); margin:40px 0px 10px 0px; } .focus_shopTitle1{ color:RGB(239,58,59); } .focus_shopTitle2{ color:RGB(205,202,200); } .focus_shopTitle3 span{ color:#fff; font-size: 25px; } .focus_shopTitle3_1,.focus_shopTitle3_2,.focus_shopTitle3_3{ background:RGB(96,87,81);padding:8px 10px; } .focus_shop_1Imag{ width:180px;height:180px; margin-top:20px; } .focus_shop_1 .focus_shop_1P1{ font-size: 14px; height: 23px; line-height: 23px; font-weight: bold; color:RGB(205,202,200); } .focus_shop_1 .focus_shop_1P2{ font-size: 12px;height: 30px;line-height: 35px;color:rgb(158, 152, 152) } .focus_shop_1 .focus_shop_1P3{ font-size: 13px;height: 30px;line-height: 30px; } .focus_shop_1 .bg{ background:rgba(0,0,0,0.02); height:100%;width:100%; position: absolute;top:0px; left:0px; }--> <!-- 产品内容 --> <div class="mains"> <div class="main"> <p>手机</p> <div class="tab"> 查看更多 <span><i class="fa fa-angle-right"></i></span> </div> <!--手机左部图片--> <div class="main_left"></div> <!--手机右部8个图片--> <div class="main_right"> <div style="margin:0px 0px 14px 13px; "> div class="main_r_a">新品</div> <img src="/static/images/buy/手机新1.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色,2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> </div> <!--手机右部8个图片重复代码--> </div> <p>家电</p> <div class="tab"> <ul> <li>热门</li> <li>电视影音</li> <li>电脑</li> <li>家居</li> </ul> </div> <!--家电左边2图片--> <div class="main_left_2"> <div class="main_left_t"style="background-image: url(/static/images/buy/家电AD1.jpg)"></div> <div class="main_left_b"style="background-image: url(/static/images/buy/家电AD2.jpg)" ></div> </div> <!--家电右图片样式1--> <div class="main_right"> <div style="margin:0px 0px 14px 13px; "> <div class="main_r_a">新品</div> <img src="/static/images/buy/家电1.jpg" alt=""> <h3><a href="#">小米8 青春版 4GB+64GB </a></h3> <p class="main_right_p1">潮流镜面渐变色,2400万自拍旗舰</p> <p class="main_right_p2"> <span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del> </p> <!--弹出框--> <div class="main_rightTc"> <p class="main_rightTc_1">速度快!服务好!效率高!师傅辛苦了!师傅辛苦了!</p> <p class="main_rightTc_2"> 来自周星星的评价</p> </div> </div> <!--家电右图片样式2 上下分行--> <div style="margin-left:13px;background:RGB(245,245,245)"> <div class="main_right_F1" > <p>小米净水器...</p> <p style="color:#ff6700">1999元</p> <img src="/static/images/buy/配件1.jpg" alt=""> </div> <div class="main_right_F2"> <p style="font-size:20px;">浏览更多</p> <p style="font-size:12px;">更多</p> <span class="fa fa-arrow-circle-o-right fa-5x" style="color:#ff6700"></span> </div> </div> </div> <div class="clear"></div> <!--广告图片--> <div class="main_img"style="background-image:url(/static/images/longAD3.jpg)"></div> <!--内容部分CSS样式--> <!-- /* 内容部分*/ .mains{ background:RGB(245,245,245); } .main{ width:1226px; margin:0px auto; } .main .tab{ float: right; margin-right: 10px; margin-top:-40px; } .main .tab span{ display: inline-block; width: 20px;height: 20px;background:#ccc;color:#fff; border-radius: 10px;line-height:20px; text-align: center; } .main .tab:hover{ color:#ff6700; } .main .tab ul li{ float: left; margin-left:15px; height:25px; } .main .tab ul li:hover{ color:#ff6700;border-bottom:2px solid #ff6700; } /*手机左部1图片*/ .main_left{ width:234px; height:614px; background-image: url(/static/images/buy/手机AD.jpg); float: left; } /*左部两2图片*/ .main_left_2{ width:234px;height:614px;float: left; } .main_left_t{ width:234px;height:300px; margin-bottom:14px;background-repeat:round; } .main_left_b{ width:234px; height:300px; background-repeat:round; } .main_left:hover,.main_left_2 div:hover{ box-shadow: -3px 8px 10px RGB(225,225,225); position: relative;bottom:5px; } /*右部产品区域*/ .main_right div{ width:235px; height:300px; float: left; background:RGB(255,255,255); position: relative; } .main_right div:hover{ box-shadow: -3px 8px 10px RGB(225,225,225); position: relative;bottom:5px; } /*右部产品内容*/ .main_right div .main_r_a{ width:65px;height:20px; background:RGB(131,196,78);font-size:13px; color:#fff;line-height:20px; text-align: center; position: absolute; left:85px; } .main_right div .main_r_b{ width:65px;height:20px; background:RGB(229,57,53);font-size:13px; color:#fff;line-height:20px; text-align: center;position: absolute; left:85px; } .main_right div img{ height: 160px;width: 160px; position: absolute; top:20px; left:37.5px; } .main_right div h3{ position: absolute;top:190px; width:235px;text-align: center; } .main_right div h3 a{ color:RGB(51,51,51);font-size: 14px; font-weight: 500; } .main_right div .main_right_p1{ width:235px;height:30px; font-size: 12px;line-height: 30px; text-align: center;color:RGB(176,176,176); position: absolute;top:210px; } .main_right div .main_right_p2{ width:235px; position: absolute;top:210px; color:RGB(176,176,176); text-align: center; font-size: 14px; } /*评价弹窗*/ .main_right div .main_rightTc{ background:#ff6700; height:80px; position: absolute; bottom:0px;display:none; } .main_rightTc .main_rightTc_1,.main_rightTc .main_rightTc_2{ height:40px; line-height: 20px; font-size:13px; padding: 0px 20px; margin-top:8px; color:#fff; } .main_right div:hover .main_rightTc{ display:block;-webkit-animation: upmove 1s ease; -o-animation: upmove 1s ease; animation: upmove 1s ease; } @keyframes upmove { from { top: 265px; opacity: 0; } to { top: 245px;opacity: 1; } } .main_right div .main_right_F1{ width:235px;height:145px;margin-bottom:10px; } .main_right div .main_right_F1 img{ width:100px;height:100px; margin-left:80px; } .main_right div .main_right_F1 p{ font-size:14px; height: 30px;margin-left:25px; } .main_right div .main_right_F2{ width:235px;height:145px; position: relative; } .main_right_F2 p{ height:25px;margin-left:25px; } .main_right_F2 span{ font-size:60px; position: absolute;top:30px;left:130px; } --> <!--视频部分--> <p>视频</p> <div class="main_6"> <div class="main_6_a" style="margin-right:14px;"> <img src="/static/images/buy/视频2.jpg" alt=""> <p>一团火</p> <p style="color:RGB(176,176,176);font-size:12px;">小米创业8年内部纪录片(手机篇)</p> <span class="fa fa-play"></span> </div> <!--视频部分后面代码重复--> </div> <div class="clear"></div> </div> </div> <!--视频部分CSS代码 /*内容视频部分*/ .main_6 .main_6_a{ width: 296px;height:285px; background:#fff;float: left; margin-bottom:58px; text-align: center; position: relative; } .main_6 .main_6_a img{ width:296px;height:180px; } .main_6 .main_6_a p{ font-size: 14px; height: 25px; line-height: 60px; } .main_6 .main_6_a span{ color:#fff;border:2px solid#fff; border-radius: 30px;width:40px; height:26px;line-height:26px; position: absolute;top:140px; left:20px; } .main_6 .main_6_a span:hover{ background:#ff6700; border:none; } --> 老师您好,麻烦问下咱们作业代码最多上传多少条,之前的作业上传后只能显示部分的代码,大部分代码显示上传成功, 但是每次也就成功上传300-400条代码量,还有就是这个作业的地方代码格式只能复制粘贴用空格调整么,有没有快捷 排版的方式,谢谢!
Correcting teacher:灭绝师太Correction time:2019-02-22 09:31:00
Teacher's summary:有字符数限制,大型案例可以提交作业完成图片及作业思路哦