WEB front-end millet mall page production

Language 2023-06-25 01:29:16 views: null

Xiaomi Mall page frame:

<!DOCTYPE html>
<html>
<head><title>小米商城</title></head>

<body>
<div class="box">
   <div class="header">
        <div class="header_menu"> 
            <ul class="header_left"> </ul>
            <div class="header_right"> </div> 
       </div> 
   </div>
     
    <div class="content">
            <div class="content_menu">   </div>
            <div class="content-form">   </div>
            <div class="content_pic">    </div>
            <div class="content_pic_img"></div>
            <div class="content-picli">   </div>
    </div>

    <div class="footer-top"> </div>
</div>

 html

<!DOCTYPE html>
<html>
<head>
    <title>小米商城</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="img/footlogo.png" />
    <link rel="stylesheet" type="text/css" href="css/mi.css">
    <link rel="stylesheet" type="text/css" href="css/content.css">
    <link rel="stylesheet" type="text/css" href="css/footer.css">
</head>
<body>
<div class="box">
    <!-- 头部 -->
    <div class="header">
        <div class="header_menu">
            <ul class="header_left">
                <li><a>小米商城</a><span>|</span></li>
                <li><a>MIUI</a><span>|</span></li>
                <li><a>IOT</a><span>|</span></li>
                <li><a>云服务</a><span>|</span></li>
                <li><a>小爱分享平台</a><span>|</span></li>
                <li><a>金融</a><span>|</span></li>
                <li><a>有品</a><span>|</span></li>
                <li><a>企业服务</a><span>|</span></li>
                <li><a>SelectRegion</a></li>
            </ul>
            <div class="header_right">
                <ul>
                <li><a>登录</a><span>|</span></li>
                <li><a>注册</a><span>|</span></li>
                <li><a>消息通知</a></li>
               <li class="header_right_li"><i class="fa fa-shopping-cart" ></i>&nbsp; 购物车 ( 0 )
					<div>购物车中还没有商品，赶紧选购吧！</div>
				</li>
            </ul>
            </div>  
        </div> 
    </div>
    <!--   主体内容上半部分   -->
    <div class="content-top">
        <div class="content">
            <div class="content_menu">
                <div class="content_menu_pic">
                <img src="img/footlogo.png" class="content_menu_img"style="margin: 5px 0px;margin-right: 10px;">
                <img src="img/logoAD.gif" >
                </div>
            <div class="content_menu_ul">
                <ul>
					<li>小米手机</li>			
					<li>红米</li>
					<li>电视</li>
					<li>笔记本</li>
					<li>盒子</li>
					<li>新品</li>
					<li>路由器</li>
					<li>智能硬件</li>
					<li>服务</li>
					<li>社区</li>
				</ul>
            </div>
            <div class="content-form">
                <form>
                    <input type="text" name="">
                    <div class="content-form-a"><a href="">电视新品</a>   <a href="">618预热</a></div>
                    <div class="botton"><i class=" fa fa-search"></i></div>
                
                </form>
            </div>
            <div class="clear"></div>
        </div>
           <div class="content_pic">
				<div class="content_pic_menu">
					<ul class="content_pic_ul">
						<li><a href="">手机 电话卡 </a><i class="fa fa-angle-right"></i>
							
						</li>
						<li><a href="">电视机 盒子</a><i class="fa fa-angle-right"></i></li>
						<li><a href="">笔记本 </a><i class="fa fa-angle-right"></i>
							
						</li>
						<li><a href="">智能 家电 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">健康 家居 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">出行 儿童 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">路由器 手机配件 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">移动电源 插线板</a><i class="fa fa-angle-right"></i></li>
						<li><a href="">耳机 音箱 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">生活 米兔</a> <i class="fa fa-angle-right"></i></li>
					</ul>	
				</div>
				<div class="content_pic_img"></div>
	        <div class="clear"></div>
			</div>
<!-- 以下部分样式见  外部样式 content.css		 -->	

<!--xin start-->
            <!--一个小导航+三个小广告-->
            <div class="content-picli">
                <div class="content-picli_1">
                    <ul>
                        <li><span class="fa fa-mobile-phone fa-2x"></span>选购手机</li>
                        <li><span class="fa fa-gift fa-2x"></span>企业团购</li>
                        <li><span class="fa fa-facebook fa-2x"></span>F码通道</li>
                        <li><span class="fa fa-file-text fa-2x"></span>米粉卡</li>
                        <li><span class="fa fa-refresh fa-2x"></span>以旧换新</li>
                        <li><span class="fa fa-credit-card fa-2x"></span>话费充值</li>
                    </ul>
                </div>
                <div class="content-picli_2"></div>
                <div class="content-picli_3"></div>
                <div class="content-picli_4"></div>
            </div>
            <div class="clear"></div>
            <!--小米闪购-->
            <div class="content-picshop">
                <h2 class="content-picshop1">小米闪购</h2>
                <div class="content-picshop2">
                    <div class="content-picshop3">
                        <div class="time">18:00 场</div>
                        <div class="flash fa fa-flash fa-4x" style="color: #ef3a3b;"></div>
                        <div class="detail">距离开始还有</div>
                        <div class="clock">
                            <span class="hour">00</span>
                            <span class="maohao">:</span>
                            <span class="minute">00</span>
                            <span class="maohao">:</span>
                            <span class="second">00</span>
                        </div>
                        <div class="bg"></div>
                    </div>
                    <div class="content-picshop4">
                        <img class="picshopImg" src="./img/flashbuy/flashbuy1.jpg" alt="">
                        <h3 class="picshopTitle">米家空气净化器Pro 白色</h3>
                        <p class="picshopDesc">大空间，快循环</p>
                        <p class="picshopPrice">
                            <span style="color:#ff6709">1399 元</span>&nbsp;&nbsp;
                            <del>1499元</del>
                        </p>
                        <div class="bg"></div>
                    </div>
                    <div class="content-picshop5">
                        <img class="picshopImg" src="./img/flashbuy/flashbuy2.jpg" alt="">
                        <h3 class="picshopTitle">小米手环 2 黑色</h3>
                        <p class="picshopDesc">OLED 显示屏，触摸操作</p>
                        <p class="picshopPrice">
                            <span style="color:#ff6709">142 元</span>&nbsp;&nbsp;
                            <del>149元</del>
                        </p>
                        <div class="bg"></div>
                    </div>
                    <div class="content-picshop6">
                        <img class="picshopImg" src="./img/flashbuy/flashbuy3.jpg" alt="">
                        <h3 class="picshopTitle">90分金属旅行箱 20寸 银色</h3>
                        <p class="picshopDesc">航空系铝镁合金</p>
                        <p class="picshopPrice">
                            <span style="color:#ff6709">1709 元</span>&nbsp;&nbsp;
                            <del>1799元</del>
                        </p>
                        <div class="bg"></div>
                    </div>
                    <div class="content-picshop7">
                        <img class="picshopImg" src="./img/flashbuy/flashbuy4.jpg" alt="">
                        <h3 class="picshopTitle">小米体脂秤 白色</h3>
                        <p class="picshopDesc">简约纤薄精准掌握身体数据</p>
                        <p class="picshopPrice">
                            <span style="color:#ff6709">189 元</span>&nbsp;&nbsp;
                            <del>199元</del>
                        </p>
                        <div class="bg"></div>
                    </div>
                </div>
            </div>
            <div class="content-pic"></div>
        </div>
    </div>

    <!--   网页底部   -->
    <div class="footer-top">
        <div class="footer-top_li">
            <div class="footer-top_li_1">
                <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
                <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span>
                <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
                <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
                <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
            </div>
            <span class="separate"></span>
            <div class="footer-top_li_2">
                <div class="footer-top_li_a">
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="">账户管理</a></dd>
                        <dd><a href="">购物指南</a></dd>
                        <dd><a href="">订单操作</a></dd>
                    </dl>
                    <dl>
                        <dt>服务支持</dt>
                        <dd><a href="">售后政策</a></dd>
                        <dd><a href="">自助服务</a></dd>
                        <dd><a href="">相关下载</a></dd>
                    </dl>
                    <dl>
                        <dt>线下门店</dt>
                        <dd><a href="">小米之家</a></dd>
                        <dd><a href="">服务网点</a></dd>
                        <dd><a href="">授权体验店</a></dd>
                    </dl>
                    <dl>
                        <dt>关于小米</dt>
                        <dd><a href="">了解小米</a></dd>
                        <dd><a href="">加入小米</a></dd>
                        <dd><a href="">投资者关系</a></dd>
                    </dl>
                    <dl>
                        <dt>关注我们</dt>
                        <dd><a href="">新浪微博</a></dd>
                        <dd><a href="">官网微博</a></dd>
                        <dd><a href="">联系我们</a></dd>
                    </dl>
                    <dl>
                        <dt>特色服务</dt>
                        <dd><a href="">F码通道</a></dd>
                        <dd><a href="">礼物码</a></dd>
                        <dd><a href="">防伪查询</a></dd>
                    </dl>
                    <div class="connect">
                        <p class="telephone">Feir-520-1314</p>
                        <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>
                        <button><span class="fa fa-commenting "></span> 联系客服</button>
                    </div>
                </div>
                <div class="footer-top_li_b"></div>
            </div>
        </div>

    </div>
    <div class="footer-bottom">
        <div class="footer-bottom_li">
            <div class="footer-bottom_li_1">
                <img src="./img/footlogo.png" alt="" class="logoBottom">
            </div>
            <div class="footer-bottom_li_2">
                <div class="footer-bottom_li_a">
                    <ul>
                        <li>小米商城<span></span></li>
                        <li>MIUI<span></span></li>
                        <li>米家<span></span></li>
                        <li>米聊<span></span></li>
                        <li>多看<span></span></li>
                        <li>游戏<span></span></li>
                        <li>路由器<span></span></li>
                        <li>米粉卡<span></span></li>
                        <li>政企服务<span></span></li>
                        <li>小米天猫店<span></span></li>
                        <li>隐私政策<span></span></li>
                        <li>问题反馈<span></span></li>
                        <li>Select Region</li>
                    </ul>
                </div>
                <div class="footer-bottom_li_b">
                    <a href="">©mi.com</a>
                    京ICP证110507号
                    <a href="">京ICP备10046444号</a>
                    <a href="">京公网安备11010802020134号</a>
                    <a href="">京网文[2014]0059-0009号</a>
                    <br>
                    违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </div>
            </div>
            <div class="footer-bottom_li_3">
                <img src="./img/footericon1.png" alt="" class="icon">
                <img src="./img/footericon2.png" alt="" class="icon">
                <img src="./img/footericon3.png" alt="" class="icon">
                <img src="./img/footericon4.png" alt="" class="icon">
                <img src="./img/footericon5.png" alt="" class="icon">
            </div>
            <div class="footer-bottom_li_4">
               探索黑科技，小米为发烧而生！
            </div>   
        </div>  
    </div>
</div>
</body>
</html>

Drop-down menu 

	<div class="mi_phone">
									<div class="mi_phone_div">
										<div class="mi_phone_div_1">
											<div  class="mi_phone1">
												<div class="new">新品</div>
												<div class="mi_phone_shop">
													<img src="img/phone/phone1.png">
													<br>
													<a href="">小米2s</a>
													<br>
													<a href="" style="color:#FF6A00;">3299元</a>
												</div>
												<span></span>
											</div>
											<div  class="mi_phone1">
												<div class="new">新品</div>
												<div class="mi_phone_shop">
													<img src="img/phone/phone2.png">
													<br>
													<a href="">小米2s</a>
													<br>
													<a href="" style="color:#FF6A00;">3299元</a>
												</div>
												<span></span>
										    </div>
											<div  class="mi_phone1">
													<div class="new">新品</div>
													<div class="mi_phone_shop">
														<img src="img/phone/phone3.png">
														<br>
														<a href="">小米2s</a>
														<br>
														<a href="" style="color:#FF6A00;">3299元</a>
													</div>
													<span></span>
											</div>
											<div  class="mi_phone1">
													<div class="new">新品</div>
													<div class="mi_phone_shop">
														<img src="img/phone/phone1.png">
														<br>
														<a href="">小米2s</a>
														<br>
														<a href="" style="color:#FF6A00;">3299元</a>
													</div>
													<span></span>
											</div>
											<div  class="mi_phone1">
													<!-- <div class="new">新品</div> -->
													<div class="mi_phone_shop">
														<img src="img/phone/phone1.png">
														<br>
														<a href="">小米2s</a>
														<br>
														<a href="" style="color:#FF6A00;">3299元</a>
													</div>
													<span></span>
											</div>
											<div  class="mi_phone1">
													<!-- <div class="new">新品</div> -->
													<div class="mi_phone_shop">
														<img src="img/phone/phone1.png">
														<br>
														<a href="">小米2s</a>
														<br>
														<a href="" style="color:#FF6A00;">3299元</a>
													</div>
										   </div>
										   
										   <div class="clear"></div>
										</div>	
								    </div>
								</div>

 Secondary navigation on the left

<div class="content_pic_div">
																<div class="content_div_menu">
																	<div class="content_div_1">
																		<div><img src="img/phone/phone1.png"> <a href="">小米8</a></div>
																		<div><img src="img/phone/phone2.png"> <a href="">小米MIX2</a></div>
																		<div><img src="img/phone/phone6.jpg"> <a href="">移动4G+专区</a></div>
																	</div>
																	<div class="content_div_1">
																		<div><img src="img/phone/phone1.png"> <a href="">小米8</a></div>
																		<div><img src="img/phone/phone2.png"> <a href="">小米MIX2</a></div>
																		<div><img src="img/phone/phone6.jpg"> <a href="">移动4G+专区</a></div>
																	</div>
								                                    <div class="content_div_1">
																		<div><img src="img/phone/phone1.png"> <a href="">小米8</a></div>
																		<div><img src="img/phone/phone2.png"> <a href="">小米MIX2</a></div>
																		<div><img src="img/phone/phone6.jpg"> <a href="">移动4G+专区</a></div>
																	</div>
								                                    <div class="content_div_1">
																		<div><img src="img/phone/phone1.png"> <a href="">小米8</a></div>
																		<div><img src="img/phone/phone2.png"> <a href="">小米MIX2</a></div>
																		<div><img src="img/phone/phone6.jpg"> <a href="">移动4G+专区</a></div>
																	</div>
								                                    <div class="content_div_1">
																		<div><img src="img/phone/phone1.png"> <a href="">小米8</a></div>
																		<div><img src="img/phone/phone2.png"> <a href="">小米MIX2</a></div>
																		<div><img src="img/phone/phone6.jpg"> <a href="">移动4G+专区</a></div>
																	</div> 
								                                    <div class="content_div_1">
																		<div><img src="img/phone/phone1.png"> <a href="">小米8</a></div>
																		<div><img src="img/phone/phone2.png"> <a href="">小米MIX2</a></div>
																		<div><img src="img/phone/phone6.jpg"> <a href="">移动4G+专区</a></div>
																	</div>
																</div>
</div>

css     mi.css

*{margin: 0px;padding: 0px;border: none;}
.clear{clear: both;}
li{list-style: none;}
a{text-decoration: none;color: #fff;}
/*头部*/
.header{height: 40px;width: 100%;background: #333;}
.header_menu{width: 1226px;height: 40px; margin:0px auto;}
.header_menu span{margin: 0px 10px;color: #6C6D69;}
.header_menu li a:hover{color: #FFF;}
.header_left{float: left;line-height: 40px;}
.header_left li{color:#ccc;float: left;font-size: 9px;}
.header_right{float: right;height: 40px;line-height: 40px; }
.header_right li{float: left;height: 40px;}
.header_right li a{color:#aaa;font-size:12px; }
.header_right li a:hover{color: #fff;}
.header_right li span{color:#424242;font-size:12px;margin: 0px 5px; }
.header_right_li{width: 120px;height: 40px; text-align:center;background:#424242;color:#aaa;font-size:12px;position: relative;margin-left:10px;  }
.header_right_li:hover{color:#FF6A00; background: #fff;}
.header_right_li div{width: 300px;height: 90px;background: #fff;position: absolute;right: 0px;display: none;color: #ccc;z-index: 2;}
.header_right_li:hover div{display: block;}
/*主体内容上*/
.content-top{}
.content{width:1226px;margin: 0 auto; }
/*导航*/
.content_menu{width:1226px;height: 66px;margin: 10px 0px;}
/*导航2*/
.content_menu_pic{float: left;}
.content_menu_ul{float: left;height: 66px;line-height:66px; margin-left: 15px;/*position: relative;*/}
.content_menu_ul li{float: left; margin-right: 10px;font-size: 17px;}
.content_menu_ul li:hover{color:#FF6A00;}
.content-form{position: relative; float: right;width: 314px;height: 63px;padding: 6px 0px;}
.content-form input[type="text"]{width: 250px;height: 50px;float: left;border-left: 1px solid #ccc;border-top: 1px solid #ccc;border-bottom:1px solid #ccc;}
.content-form .botton{width: 60px;height: 50px;float: left;border: 1px solid #ccc;}
.content-form .content-form-a{position: absolute;top: 20px;right: 75px; width: 110px;}
.content-form a {color: #aaa;width: 50px;font-size: 7px;background: #EBEBEB;padding: 3px;}
.content-form a:hover {background:#FF6700;color: #fff;}
.content-form i{position: absolute;top: 20px;right: 25px;font-size: 21px;color: #424242;}
.content-form .botton:hover{border: none;width: 62px;height: 52px; background:#FF6700;color:#fff;}
.content-form .botton:hover i{color:#fff;}

/*下拉*/
.mi_phone{width:100%;height:230px;border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;position:absolute;left: 0px;z-index: 2; background: #fff;display: none;}
.content_menu_ul li:hover .mi_phone{display: block;}
.mi_phone_div .mi_phone_shop{width: 120px; height: 160px;margin-top: 30px;line-height: 30px;}
.mi_phone_div{width: 1226px;height: 230px;margin:0px auto;}
.mi_phone_div_1{margin:0px auto;/*border: 1px solid red;*/padding:0px 50px;}
.mi_phone_div a{color: #000;font-size: 9px;/*margin-left: 15px;*/}
.mi_phone_div span{border-right: 1px solid #ccc;margin:0px 30px;margin-top: 30px;height: 80px;width: 0px;float: left;}
.new{width: 60px;height: 18px;font-size: 9px;position: absolute;top:0px;left:25px; border: 1px solid #FF6A00;color:#FF6A00; line-height: 18px;text-align: center;}
.mi_phone_div .mi_phone1{float: left;width: 181px;height:230px; position: relative;text-align: center;}
.mi_phone_shop {float: left}

/*左边导航*/
.content_pic{width: 1226px;height:460px;background:url(../img/mi.jpg) ;}
.content_pic_menu{width: 246px;height:460px; float: left;background: #424242;position: relative; }
.content_pic_img{width: 980px;height:460px;float: right; }
.content_pic_ul{width: 246px;height: 440px; margin:30px 0px;}
.content_pic_ul li{width: 246px;height: 40px;line-height: 40px;font-size:15px;color: #fff;}
.content_pic_ul li i{font-size: 15px;font-weight: bold;float: right;margin-right:20px;margin-top: 13px;}
.content_pic_ul li a{margin-left: 20px;}
.content_pic_ul li:hover{background:#FF6A00; }
.content_pic_div{height: 460px;width:900px;background: #fff;position: absolute;top: 0px; left:235px;display: none;}
.content_pic_ul li:hover .content_pic_div {display: block;}
.content_div_menu{width:880px; height:440px;margin: 10px 10px; }
.content_div_1{width: 880px;height:70px; margin-top: 5px;}
.content_div_1 div{width: 280px;float: left;height:70px;/*border: 1px solid #ccc;*/margin-right: 10px;}
.content_div_1 div img{width:40px;height: 40px;margin: 15px 0px;float: left;}
.content_div_1 div a{color:#000;float: left;margin-top: 17px;}
.content_div_1 div:hover a{color:#FF6A00;}
/*
小米闪购*/
.content-picli{height: 170px;width:1226px;margin-top: 10px;}
.content-picli_1{height: 170px;width: 235px; float: left;background:#5F5750;margin-right: 14.3px;}
.content-picli_2{height: 170px;width: 316px;float: left;background:url(../img/midAD1.jpg);margin-right:14.3px;}
.content-picli_3{height: 170px;width: 316px;float: left;background:url(../img/midAD2.jpg);margin-right: 14.3px;}
.content-picli_4{height: 170px;width: 316px;float: left;background:url(../img/midAD3.jpg);}
.content-picshop1{height: 50px;width:1226px; }
.content-picshop2{height: 340px;width:1226px; }
.content-picshop3{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;}
.content-picshop4{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;}
.content-picshop5{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;}
.content-picshop6{float: left;height: 340px;width:235px; background:#ccc;margin-right:12.7px;}
.content-picshop7{float: left;height: 340px;width:235px; background:#ccc;}
.content-pic{height: 119px;width: 1226px;background: url(../img/longAD1.jpg);margin: 40px 0px;}
/*底部*/
.footer-top{}
.footer-top_li{width: 1226px;margin: 0px auto;}
.footer-top_li_1{width: 1126px;height: 80px;margin: 0px auto;line-height: 80px;}
.footer-top_li_1 a{color:#616161;font-size: 16px; font-weight: 300;}
.footer-top_li_1 a:hover{color:#FF6700;}
.footer-top_li_1 a i{margin-right: 10px;font-size: 20px;}
.footer-top_li_1 span{color:#616161;margin:0 56px;font-size: 20px;border-left: 1px solid #e0e0e0;}
.footer-top_li .separate{display:block;width: 1226px;height:0;border-bottom: 1px solid #e0e0e0;}
.footer-top_li_2 {width: 1226px;height: 100px;border:0;padding:40px 0;}
.footer-top_li_2

.footer-bottom{height:100px; background:#F5F5F5;}
.footer-bottom_li{width: 1226px;margin: 0px auto;}

content.css

ul {  list-style: none;  }

h1, h2, h3, h4, h5, h6 {  margin: 0;  padding: 0;  font-weight: normal; }

/*大导航下面的六个小css块样式*/
.content-picli_1 li       {  width: 33%;  height: 60px;  color: #ccc;  font-size: 14px;  float: left;  text-align: center;  margin-top: 20px;  }
.content-picli_1 li span  {  width: 100%;  height: 30px;  float: left;  text-align: center;  }
.content-picli_1 li:hover {  color: #eee;  }


/*重写二级标题样式,包括小米闪购和下面的一堆二级标题*/
.content-picshop h2,
.content-bottom h2      { height: 56px;  line-height: 50px;  font-size: 22px;  padding-top: 20px;  margin: 0;  font-weight: 300;  }
.content-bottom h2 .tab { float: right;  color: #424242;  font-size: 16px;  font-weight: normal;  line-height: 60px;  }

/*优化长广告         覆盖mi.css*/
.content-bottom2_pic,
.content-bottom3_pic,
.content-bottom7_pic { margin-top: 40px;  }

/*小米闪购*/
/*重写height和padding-top   覆盖mi.css*/
.content-picshop3,
.content-picshop4,
.content-picshop5,
.content-picshop6,
.content-picshop7 { border-top: 1px solid;  padding-top: 40px;  height: 300px;  background-color: #fff;  position: relative;  }

.content-picshop4,
.content-picshop5,
.content-picshop6,
.content-picshop7 { color: #333;  }

/*浅灰色背景*/
.bg {  background-color: rgba(0, 0, 0, 0.02);  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  }

/*闪购倒计时*/
.content-picshop3 {          border-color: #e53935;  background-color: #f1eded;  }
.content-picshop3 div     {  width: 100%;  text-align: center;  }
.content-picshop3 .time   {  font-size: 24px;  color: #ef3a3b;  margin-top: 15px;  }
.content-picshop3 .flash  {  height: 64px;  margin: 25px 0;  }
.content-picshop3 .detail {  line-height: 22px;  color: rgba(0, 0, 0, 0.54);  font-size: 15px;  }
.content-picshop3 .clock  {  color: #605751;  font-size: 24px;  line-height: 46px;  margin-top: 30px;  }

.clock .hour,
.clock .minute,
.clock .second { display: inline-block;  background-color: #605751;  width: 46px;  height: 46px;  color: #fff;  }

/*闪购item*/
.content-picshop4 {  border-color: #ffac13;  }
.content-picshop5 {  border-color: #83c44e;  }
.content-picshop6 {  border-color: #2196f3;  }
.content-picshop7 {  border-color: #e53935;  }
.picshopImg   {   width: 160px; height: 160px; margin: 0 38px 22px;  }
.picshopTitle {   width: 100%; font-size: 14px; margin: 0 3px;  -ms-text-overflow: ellipsis;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  text-align: center;  }
.picshopDesc  {   width: 100%; font-size: 12px; color: #b0b0b0;  text-align: center;  margin: 8px 0 12px;  -ms-text-overflow: ellipsis;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  }
.picshopPrice {   width: 100%; text-align: center;font-size: 13px;  color: #b0b0b0;  }

footer.css

dl,dd,dt{
    list-style: none;
    padding:0;
    margin:0;
}

/*底部top*/
.footer-top_li_a dl{
    display: block;
    float: left;
    width: 160px;
}
.footer-top_li_a dt{
    font-size: 14px;
    line-height:14px;
    color:#424242;
    margin-bottom:26px;
}
.footer-top_li_a dd{
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    margin-top: 10px;
}
.footer-top_li_a dd a{
    color: #757575;
}
.footer-top_li_a dd a:hover{
    color:#ff6700;
}
.footer-top_li_a .connect{
    float: right;
    width:258px;
    height: 112px;
    border-left: 1px solid #e0e0e0;
    text-align: center;
}
.connect .telephone{
    color: #ff6700;
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 22px;
}
.connect .time{
    color:#616161;
    margin:0 0 16px;
    font-size: 12px;
}
.connect button{
    width: 118px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    border:1px solid #ff6700;
    color: #ff6700;
    background-color: #fff;
}
.connect button:hover{
    background-color: #ff6700;
    color: #fff;
}


/*底部bottom*/
.footer-bottom_li_1,.footer-bottom_li_2,.footer-bottom_li_3{
    float: left;
    margin-right: 10px;
}
.footer-bottom_li_4{
    clear: left;
    margin-top: 15px;
    width:1226px;
    text-align: center;
    font-family: "楷体";
    font-size: 24px;
    color: #ccc;
}
.footer-bottom_li_a{
    height:19px;
    width: 640px;
}
.footer-bottom_li_a li{
    height:19px;
    font-size: 12px;
    float: left;
    color: #757575;
}
.footer-bottom_li_a li span{
    width:0px;
    height:10px;
    border-left: 1px solid #b0b0b0;
    margin:3px 3px;
}
.footer-bottom_li_a li:hover{
    color:#ef3a3b;
}

.footer-bottom_li_b{
    width:640px;
    color: #b0b0b0;
    font-size: 12px;
}
.footer-bottom_li_b a{
    color:#b0b0b0;
}
.footer-bottom_li_b a:hover{
    color:#ef3a3b;
}

.footer-bottom_li_3 {
    float: right;
}
.footer-bottom_li_3 img{
    display:block;
    width:83px;
    float: left;
    margin-right: 10px;
}

Guess you like

Origin blog.csdn.net/jinxiaofei8/article/details/124925782
Recommended
Ranking
SpringBoot-integrate redis
[Sword pointing to offer] Interview question 03: Repeated numbers in an array
Arrangement "Offer Penalty for prove safety" string
Browser prevent the automatic generation of fill and Echo have been saved account solutions
Work hard and never slacken——2022 Yinmai Information Year-End Summary
Install jdk7 on Linux system
App common dependency management tools
EduCoder-Web程序设计基础-html5— 给表单组件添加说明-第1关：label标签相关概念
Machine learning - clustering - density clustering algorithm notes
Ant's large model is exposed, AI+ finance enters the "big model" era
Daily
More
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com