1.练习
基本上除了需要JS才能实现的模块其他全部完成
2.代码
首页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2226582_dki77h4juap.css">
<link rel="shortcut icon " href="../imeges/favicon.ico">
</head>
<body>
<!-- 顶部导航栏 -->
<div class="top-title" id="top-top">
<div class="wrapper clearfix">
<div class="top-title-left">
<ul class="clearfix">
<li><a href="" class="font-size12 >网站导航 </a><i class=" iconfont icon-xiafangxiang "></i></li>
<li><a href="">商家入驻 </a><i class=" iconfont icon-xiafangxiang"></i></li>
<li><a href="">客户服务 </a><i class="iconfont icon-xiafangxiang"></i></li>
<li>
<a href="">
<i class="iconfont icon-weizhi"></i>
北京
<span>
<i class="iconfont icon-lower-triangle"></i>
</span>
</a>
</li>
</ul>
</div>
<div class="top-title-right">
<ul class="clearfix">
<li><a href="">请登录</a></li>
<li><a href="" class="font-orange">注册有礼 </a></li>
<li><a href="">我的订单 </a><i class="iconfont icon-xiafangxiang"></i></li>
<li><a href="">我的易购 </a><i class="iconfont icon-xiafangxiang"></i></li>
<li><a href="">小U会员</a></li>
<li><a href="" class="font-orange"><span>
<i class="iconfont icon-shouye"></i>
</span>购物车 </a><i class="iconfont icon-xiafangxiang font-size12"></i></li>
<li><a href="">易付宝</a></li>
<li><a href="">企业采购</a></li>
<li><a href="">手机小U </a><i class="iconfont icon-xiafangxiang"></i></li>
</ul>
</div>
</div>
</div>
<div class="white-bg">
<div class="wrapper">
<!-- 顶部logo栏 -->
<div class="index-header clearfix">
<div class="logo-box"></div>
<div class="search-box">
<div class="header-search">
<span class="fl"><i class="iconfont icon-sousuo"></i></span>
<div>
<input type="text" class="fl text-case1" placeholder="跨店每300减30">
<input type="submit" class="fr text-case2" value="搜索">
</div>
</div>
<div class="header-list">
<a href="">
<span>白酒</span>
<b class="shu"></b>
<span class="font-orange">抢油烟机免单</span>
<b class="shu"></b>
<span>取暖器</span>
<b class="shu"></b>
<span class="font-orange">牙膏特价</span>
<b class="shu"></b>
<span class="font-orange">抢限量手机券</span>
<b class="shu"></b>
<span>手机</span>
<b class="shu"></b>
<span>冰箱</span>
<b class="shu"></b>
<span>电视</span>
<b class="shu"></b>
<span>ipad</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 全部商品分类栏 -->
<div class="body-top">
<div class="wrapper">
<div class="all-list">
<div class="body-top-left-box">
<span> </span>
<span><i class="iconfont icon-liebiao"></i></span>
<span>全部商品分类</span>
<div class="long-list">
<a href=""><span class="font">手机 </span></a>
<span class="shu"></span>
<a href=""><span class="font">运营商 </span></a>
<span class="shu"></span>
<a href=""><span class="font">智能数码 </span></a>
<br>
<a href=""><span class="font">电视 </span></a>
<span class="shu"></span>
<a href=""><span class="font">冰箱 </span></a>
<span class="shu"></span>
<a href=""><span class="font">洗衣机 </span></a>
<br>
<a href=""><span class="font">家居 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家装 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家纺 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家具 </span></a>
<a href=""><span class="font">家居 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家装 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家纺 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家具 </span></a>
<a href=""><span class="font">家居 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家装 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家纺 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家具 </span></a>
<a href=""><span class="font">家居 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家装 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家纺 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家具 </span></a>
<a href=""><span class="font">家居 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家装 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家纺 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家具 </span></a>
<a href=""><span class="font">家居 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家装 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家纺 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家具 </span></a>
<a href=""><span class="font">家居 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家装 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家纺 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家具 </span></a>
<a href=""><span class="font">家居 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家装 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家纺 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家具 </span></a>
<a href=""><span class="font">家居 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家装 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家纺 </span></a>
<span class="shu"></span>
<a href=""><span class="font">家具 </span></a>
<a href=""><span class="font">医药健康 </span></a>
<span class="shu"></span>
<a href=""><span class="font">计生情趣 </span></a> <br>
<a href=""><span class="font">理财 </span></a>
<span class="shu"></span>
<a href=""><span class="font">分期 </span></a>
<span class="shu"></span>
<a href=""><span class="font">保险 </span></a>
</div>
</div>
<div class="transverse-list">
<a href=""><span>限时抢购</span></a>
<a href=""><span>红孩子</span></a>
<a href=""><span>小U超市</span></a>
<a href=""><span>电器城</span></a>
<a href=""><span> 生活家电</span></a>
<a href=""><span>时尚金融</span></a>
<a href=""><span>金融</span></a>
</div>
</div>
</div>
<div class="big-backgroung">
<div class="wrapper">
<div class="left-triangle"></div>
<div class="right-triangle"></div>
<div class="circle-case">
<div class="circle-box"></div>
<div class="circle-box"></div>
<div class="circle-box"></div>
</div>
<div class="banner-box">
<div class="banner-pic1" style="display:none">
<a href="">
<img src="./imeges/index/banner.webp">
</a>
</div>
<div class="banner-pic2" style="display:none">
<a href="">
<img src="./imeges/index/banner.jpg">
</a>
</div>
<div class="banner-pic3" style="display:block">
<a href="">
<img src="./imeges/index/banner01.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 秒杀界面 -->
<div class="first-skill" id="skill">
<div class="wrapper clearfix">
<!-- 秒杀界面左侧 -->
<div class="first-skill-left clearfix">
<div class="first-skill-left-title">
<span class="red-weight-23">限时抢购</span>
<span>距离下场</span>
<span class="bg-black">03</span>
<span class="bg-black">03</span>
<span class="bg-black">03</span>
<span class="font-black">20:00场-即将开抢</span>
<span class="bg-orange">16:00场-正在疯抢</span>
</div>
<div class="first-skill-pic1 fl">
<div><a href=""><img src="./imeges/index/prouduction-aiCao.png"></a></div>
<a href="">
<div class="font-16">怡宝泡脚足浴包艾草艾</div>
</a>
<span class="orange-font-20">¥7.5</span>
<span class="line-through">¥17.8</span>
<div class="remaining">
<div class="white-case">
<div class="orange-case"></div>
</div>
<span>已抢36%</span>
</div>
</div>
<div class="first-skill-pic1 fl">
<div><a href=""><img src="./imeges/index/prouduction-aiCao.png"></a></div>
<a href="">
<div class="font-16">怡宝泡脚足浴包艾草艾</div>
</a>
<span class="orange-font-20">¥7.5</span>
<span class="line-through">¥17.8</span>
<div class="remaining">
<div class="white-case">
<div class="orange-case"></div>
</div>
<span>已抢36%</span>
</div>
</div>
<div class="first-skill-pic1 fl">
<div><a href=""><img src="./imeges/index/prouduction-aiCao.png"></a></div>
<a href="">
<div class="font-16">怡宝泡脚足浴包艾草艾</div>
</a>
<span class="orange-font-20">¥7.5</span>
<span class="line-through">¥17.8</span>
<div class="remaining">
<div class="white-case">
<div class="orange-case"></div>
</div>
<span>已抢36%</span>
</div>
</div>
<div class="first-skill-pic1 fl">
<div><a href=""><img src="./imeges/index/prouduction-aiCao.png"></a></div>
<a href="">
<div class="font-16">怡宝泡脚足浴包艾草艾</div>
</a>
<span class="orange-font-20">¥7.5</span>
<span class="line-through">¥17.8</span>
<div class="remaining">
<div class="white-case">
<div class="orange-case"></div>
</div>
<span>已抢36%</span>
</div>
</div>
</div>
<!-- 秒杀界面右侧 -->
<div class="first-skill-right clearfix ">
<div class="first-skill-right-title clearfix">
<span class="font-20">大聚会</span>
<a href=""><i class="iconfont icon-gengduo more-than"> </i><span
class="more-than">更多 </span></a>
</div>
<div class="banner01">
<div class="banner01-border">
<div class="banner01-border-font">
<p class="banner01-border-font1">三包抽纸</p>
<p class="banner01-border-font2">满400减200</p>
<p class="banner01-border-font3">仅剩<span class="red-font">1天</span></p>
</div>
</div>
</div>
<div class="three-pic-case">
<div>
<img src="./imeges/index/banner02.jpg" alt="">
<span>满400减280</span>
</div>
<div>
<img src="./imeges/index/banner03.jpg" alt="">
<span>满400减280</span>
</div>
<div class="margin-right0">
<img src="./imeges/index/banner04.jpg" alt="">
<span>满400减280</span>
</div>
</div>
</div>
</div>
</div>
<!-- 排行榜及人气好货 -->
<div class="wrapper clearfix" id="pai-hang">
<!-- 左侧排行榜 -->
<div class="ranking">
<div class="ranking-title clearfix">
<span class="fl shu"></span>
<span class="font-20">排行榜</span>
<a href="">
<i class="iconfont icon-gengduo more-than"> </i>
<span class="more-than">更多 </span>
</a>
</div>
<div class="ranking-list">
<span class="redbg-white">精选</span>
<span>休闲食品</span>
<span>纸品清洁</span>
<span>苏宁生鲜</span>
</div>
<div class="list-commodity">
<div class="commodity-box1"><img src="./imeges/index/list01.jpg" alt=""></div>
<div class="commodity-box2">好时 KISSES好时之吻曲奇奶香白巧克力82g</div>
<div class="commodity-box3">
<span>¥9.90</span>
<span class="bg-pink">休闲食品销量NO1</span>
</div>
</div>
<div class="list-commodity">
<div class="commodity-box1"><img src="./imeges/index/list02.jpg" alt=""></div>
<div class="commodity-box2">蓝月亮 衣领净500g瓶 喷雾头衣领净 衣领清洁剂</div>
<div class="commodity-box3">
<span>¥9.90</span>
<span class="bg-pink">纸品清洁销量NO1</span>
</div>
</div>
<div class="list-commodity">
<div class="commodity-box1"><img src="./imeges/index/list03.jpg" alt=""></div>
<div class="commodity-box2">加加鲜味鲜生抽500ml 酿造生抽酱油 点蘸凉拌菜炒菜调味料调味品</div>
<div class="commodity-box3">
<span>¥9.90</span>
<span class="bg-pink">干货调味销量NO1</span>
</div>
</div>
</div>
<!-- 右侧人气好货 -->
<div class="ranking good-goods">
<div class="ranking-title clearfix ranking-white">
<span class="fl shu"></span>
<span class="font-20">人气好货</span>
<a href=""><i class="iconfont icon-gengduo more-than"> </i><span
class="more-than">更多 </span></a>
</div>
<div class="raking-pic">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic brn">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic bbn">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic bbn">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic bbn">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic bbn brn">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
</div>
</div>
</div>
<!-- 中部图片 -->
<div class="wrapper">
<a href=""><img src="./imeges/index/img1.jpg" class="imges"></a>
<a href=""><img src="./imeges/index/img2.jpg" class="imges"></a>
<a href=""><img src="./imeges/index/img3.jpg" class="imges"></a>
</div>
<div class="wrapper clearfix">
<div class="find-left">
<div class="fing-left1">
<a href="">
<img src="./imeges/index/find02.png">
<div>探索新生活 <i class="iconfont icon-gengduo"></i></div>
</a>
</div>
</div>
<div class="find-suit">
<div class="find-main">
<div class="find-box">
<p>小米 大风量 吹风机</p>
<img src="./imeges/index/k1.webp" alt="">
</div>
<div class="find-box1">
<img src="./imeges/index/k1.webp" alt="">
<p>小米 大风量 吹风机</p>
</div>
<div class="find-box">
<p>小米 大风量 吹风机</p>
<img src="./imeges/index/k1.webp" alt="">
</div>
<div class="find-box1">
<img src="./imeges/index/k1.webp" alt="">
<p>小米 大风量 吹风机</p>
</div>
<div class="find-box">
<p>小米 大风量 吹风机</p>
<img src="./imeges/index/k1.webp" alt="">
</div>
<div class="find-box1">
<img src="./imeges/index/k1.webp" alt="">
<p>小米 大风量 吹风机</p>
</div>
<div class="find-box">
<p>小米 大风量 吹风机</p>
<img src="./imeges/index/k1.webp" alt="">
</div>
<div class="find-box1">
<img src="./imeges/index/k1.webp" alt="">
<p>小米 大风量 吹风机</p>
</div>
<div class="find-box">
<p>小米 大风量 吹风机</p>
<img src="./imeges/index/k1.webp" alt="">
</div>
<div class="find-box1">
<img src="./imeges/index/k1.webp" alt="">
<p>小米 大风量 吹风机</p>
</div>
</div>
</div>
</div>
<div class="wrapper clearfix ">
<!-- 左侧服装配饰 -->
<div class="ranking-1" id="jia-ju1">
<div class="ranking-title1 clearfix ranking-white">
<span class="fl shu"></span>
<span class="font-20">智能家居</span>
<span class="erweima"></span>
<a href="">
<span class="more-than">骆驼鞋靴</span>
<span class="more-than">珠宝年货节</span>
<span class="more-than">洁丽雅</span>
<span class="more-than">海澜之家</span></a>
</div>
<div class="picc-1">
<div class="picc-black">
<p>智能门锁</p>
<span>每1000减200</span>
</div>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1 ">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
</div>
<!-- 右侧服装配饰 -->
<div class="ranking-1" id="jia-ju2">
<div class="ranking-title1 clearfix ranking-white">
<span class="fl shu"></span>
<span class="font-20">智能家居</span>
<span class="erweima"></span>
<a href="">
<span class="more-than">骆驼鞋靴</span>
<span class="more-than">珠宝年货节</span>
<span class="more-than">洁丽雅</span>
<span class="more-than">海澜之家</span></a>
</div>
<div class="picc-1">
<div class="picc-black">
<p>智能门锁</p>
<span>每1000减200</span>
</div>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1 ">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
</div>
<div class="ranking-1">
<div class="ranking-title1 clearfix ranking-white">
<span class="fl shu"></span>
<span class="font-20">智能家居</span>
<span class="erweima"></span>
<a href="">
<span class="more-than">骆驼鞋靴</span>
<span class="more-than">珠宝年货节</span>
<span class="more-than">洁丽雅</span>
<span class="more-than">海澜之家</span></a>
</div>
<div class="picc-1">
<div class="picc-black">
<p>智能门锁</p>
<span>每1000减200</span>
</div>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1 ">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
</div>
<!-- 右侧服装配饰 -->
<div class="ranking-1 good-goods1 ">
<div class="ranking-title1 clearfix ranking-white">
<span class="fl shu"></span>
<span class="font-20">智能家居</span>
<span class="erweima"></span>
<a href="">
<span class="more-than">骆驼鞋靴</span>
<span class="more-than">珠宝年货节</span>
<span class="more-than">洁丽雅</span>
<span class="more-than">海澜之家</span></a>
</div>
<div class="picc-1">
<div class="picc-black">
<p>智能门锁</p>
<span>每1000减200</span>
</div>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
<div class="raking-pic1 ">
<a href="">
<img src="./imeges/index/item1.jpg" alt="">
<p>丫丫</p>
<p class="ping-color">今日特价4.5折起</p>
</a>
</div>
</div>
</div>
<div class="wrapper">
<a href=""><img src="./imeges/index/img1.jpg" class="imges"></a>
<a href=""><img src="./imeges/index/img2.jpg" class="imges"></a>
<a href=""><img src="./imeges/index/img3.jpg" class="imges"></a>
</div>
<!-- 猜你喜欢 -->
<div class="wrapper clearfix" id="like">
<div class="like-title clearfix">
<span class="fl shu"></span>
<span class="font-20"> 猜你喜欢</span>
</div>
<div class="fl clearfix">
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
<div class="img_box fl">
<img src="./imeges/index/list_img01.jpg">
<a href="">
<div>三只松鼠全家桶，味道好极了，休闲娱乐极致享受</div>
</a>
<div class="clearfix">
<span class="small-money">¥</span>
<span class="orange-number">35.90</span>
<a href="">
<div class="orange-font1">找相似</div>
</a>
</div>
<div class="clearfix">
<div class="smmall-border ">
<span class="smmall-border1">补贴</span>
<span class="small-border2">每300-30</span>
</div>
<span class="smmall-border3">领券39-30</span>
</div>
</div>
</div>
</div>
<!-- END -->
<div class="end">
<span>—————</span>
<span>END</span>
<span>—————</span>
</div>
<!-- 底部连接 -->
<div class="bottom-bgd">
<div class="bottom-bgd-box ">
<br>
<div class="bottom-box fl">
<div>购物指南</div>
<a href="">
<p>购物流程</p>
<p>支付方式</p>
<p>配送方式</p>
</a>
</div>
<div class="bottom-box fl">
<div>售后服务</div>
<a href="">
<p>售后政策</p>
<p>价格保护</p>
<p>退款说明</p>
<p>返修/退换货</p>
<p>取消订</p>
</a>
</div>
<div class="bottom-box fl">
<div>配送方式</div>
<a href="">
<p>上门自提</p>
<p>211限时达</p>
<p>配送服务查询</p>
<p>配送收费标准</p>
<p>海外配送</p>
</a>
</div>
<div class="bottom-box fl">
<div>支付方式</div>
<a href="">
<p>网上支付</p>
<p>支付宝支付</p>
<p>邮局汇款</p>
</a>
</div>
<div class="bottom-box fl">
<div>用户帮助</div>
<a href="">
<p>免费注册</p>
<p>找回密码</p>
<p>常见问题</p>
<p>优惠券使用</p>
</a>
</div>
</div>
<div class="hr"></div>
<div class="bottom-font">
<p>Copyright 2010-2016 小U商城 版权所有 保留一切权利</p>
<p>京ICP10218183号 京ICP10218183号 京公安网安备 1101938412983748299239号 出版物经营许可证新出发京批字第130052号</p>
</div>
</div>
<!-- 固定导航栏 -->
<div class="fixed-box">
<a href="#skill">
<p>限时抢购</p>
</a>
<div class="hr"></div>
<a href="#pai-hang">
<p>排行榜</p>
</a>
<div class="hr"></div>
<a href="#jia-ju1">
<p>智能家居</p>
</a>
<div class="hr"></div>
<a href="#jia-ju2">
<p>智能家居</p>
</a>
<div class="hr"></div>
<a href="#like">
<p>猜你喜欢</p>
</a>
<div class="hr"></div>
<div>
<a href="#top-top"><span><i class="iconfont icon-Group"></i></span>
<span class="te">顶部</span></a>
</div>
</div>
</body>
</html>
body{
background-color: #f2f2f2;
}
/* 全部商品分类栏 */
.body-top{
background-color: white;
}
.big-backgroung .wrapper{
position: relative;
}
.left-triangle{
position: absolute;
left: 245px;
top: 200px;
background-color: yellow;
width: 30px;
height: 67px;
background: url(../imeges/sprite.png);
background-position: -82px -145px;
z-index: 99;
}
.right-triangle{
position: absolute;
left: 1100px;
top: 200px;
background-color: yellow;
width: 30px;
height: 67px;
background: url(../imeges/sprite.png);
background-position: -120px -145px;
z-index: 99;
}
.circle-case{
position: absolute;
left: 620px;
top: 400px;
width: 120px;
height: 40px;
}
.circle-box{
float: left;
margin-left: 10px;
width: 19px;
height: 19px;
background-color: #6d6c6b;
border-radius: 50%;
}
.banner-box{
width: 1226px;
height: 460px;
}
.banner-box img{
width: 1226px;
height: 460px;
}
/* 秒杀界面左侧 */
.first-skill{
margin-top: 15px;
}
.first-skill-left{
float: left;
padding-left: 12px;
width: 785px;
height: 330px;
background-color: white;
}
.first-skill-left-title{
z-index: 99;
margin-right: 10px;
height: 40px;
border-bottom: 1px solid #eee;
}
.first-skill-left-title span{
margin-right: 5px;
}
.red-weight-23{
font-size: 23px;
font-weight: 900;
color: #d90c02;
}
.bg-black{
padding-left: 3px;
padding-right: 3px;
margin-right: 5px;
font-size: 18px;
color: white;
background-color: black;
}
.bg-orange{
float: right;
margin-top: 8px;
padding-left: 8px;
padding-right: 8px;
background-color: #ff8000;
border-radius: 20px;
font-size: 15px;
color:#fff;
}
.font-black{
float: right;
margin-top: 10px;
margin-left: 20px;
font-size: 14px;
color:black
}
.first-skill-pic1 img{
margin-top: 15px;
margin-bottom: 4px;
margin-right: 45px;
width: 150px;
}
.font-16{
margin-top: 5px;
margin-bottom: 5px;
font-size: 15px;
}
.orange-font-20{
color: #ff8000;
font-size: 20px;
}
.line-through{
text-decoration: line-through;
font-size: 14px;
color: #aaa;
}
.remaining{
width: 150px;
position: relative;
height: 21px;
font-size:14px;
}
.white-case{
position: absolute;
top: 11px;
width: 90px;
height: 2px;
background-color: rgb(156, 155, 155);
}
.orange-case{
width: 33px;
height: 2px;
background-color: #ff8000;
}
.remaining span{
float: right;
color: #aaa;
line-height: 25px;
}
.first-skill-pic1 a{
color:black;
}
/* 秒杀界面右侧 */
.first-skill-right{
float: right;
width: 390px;
height: 330px;
background-color: white;
}
.first-skill-right-title{
margin-left: 10px;
margin-right: 10px;
height: 40px;
border-bottom: 1px solid #ccc;
}
.font-20{
float: left;
font-size: 20px;
line-height: 40px;
}
.more-than{
margin-top: 8px;
float: right;
font-size: 16px;
}
.banner01{
width: 350px;
position: relative;
margin-top: 18px;
margin-left: 20px;
height: 175px;
background: url(../imeges/index/banner01.jpg) no-repeat;
background-size:350px;
border-radius: 7px;
overflow: hidden;
}
.banner01-border{
position: absolute;
left: 30px;
top: 40px;
width: 150px;
height: 90px;
border: 1px solid white;
border-radius: 10px 25px;
}
.banner01-border-font{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 146px;
height: 86px;
border-radius: 10px 25px;
background-color: white;
}
.banner01-border-font1{
margin: 5px;
text-align: center;
color: #702015;
font-weight: 900;
}
.banner01-border-font2{
margin: 5px;
text-align: center;
color:#2e2a43;
font-size: 16px;
font-weight: 900;
}
.banner01-border-font3{
margin: 5px;
text-align: center;
color:#2e2a43;
font-size: 14px;
}
.red-font{
color: red;
}
.three-pic-case{
margin: 15px auto;
width: 350px;
height: 70px;
}
.three-pic-case div{
width: 108px;
float: left;
margin-right: 10px;
text-align: center;
border: 1px solid rgb(218, 218, 218);
}
.three-pic-case .margin-right0{
margin-right: 0;
}
/* 左侧排行榜 */
.ranking{
float: left;
margin-top: 15px;
margin-right: 4px;
width: 390px;
height: 425px;
background-color: white;
}
.ranking-title{
height: 40px;
background-color: #fcf6f6;
}
.ranking .shu{
margin-top: 10px;
display: inline-block;
width: 4px;
height: 20px;
background-color:#dd574c;
}
.ranking .font-20{
color:#dd574c;
font-weight: 900;
}
.ranking-list{
margin-left: 10px;
margin-right: 10px;
height: 35px;
border-bottom:1px solid #dddddd;
}
.ranking-list span{
margin-right: 21px;
padding-left: 7px;
padding-right: 7px;
font-size: 16px;
color:black;
line-height: 35px;
border-radius: 35px;
}
.ranking-list span:hover{
background-color: #f27072;
color: white;
}
.ranking-list .redbg-white{
background-color: #f27072;
color: white;
}
.list-commodity img{
float: left;
margin-left: 20px;
height: 100px;
}
.list-commodity{
height: 115px;
}
.commodity-box2{
float: left;
width: 220px;
margin-left: 20px;
margin-top: 20px;
}
.commodity-box3{
float: left;
width: 220px;
margin-left: 20px;
margin-top: 30px;
}
.commodity-box3 span{
font-size: 14px;
color: #d15168;
}
.bg-pink{
padding-left: 5px;
padding-right: 5px;
float: right;
background-color: #fae3d5;
border-radius: 25px;
}
/* 右侧人气好货 */
.ranking{
float: left;
margin-top: 15px;
margin-right: 4px;
width: 390px;
height: 425px;
background-color: white;
}
.good-goods{
/* float: left; */
width: 780px;
}
.ranking-white{
background-color: #f8faf9;
}
.ranking-white .font-20 {
color:#129be1;
}
.ranking-white .shu{
background-color:#129be1 ;
}
.raking-pic{
float: left;
width: 185px;
height: 180px;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.bbn{
border-bottom: none;
}
.brn{
border-right: none;
}
.raking-pic img{
margin-left: 37.5px;
width: 110px;
height: 110px;
}
.raking-pic p{
margin-top:10px;
text-align:center;
}
.raking-pic .ping-color{
color: #d75158;
}
/* 中部图片 */
.imges{
margin-top: 20px;
margin-bottom: 20px;
float: left;
height: 99px;
}
.find-left{
float: left;
width: 189px;
height: 260px;
background-image: url(../imeges/index/find01.png);
}
.fing-left1{
margin-left: 15px；
}
.fing-left1 div{
margin-left: 20px;
margin-top: -36px;
color: #ccc;
font-size: 16px;
}
.find-suit{
margin-left: 20px;
float: left;
width: 970px;
height: 260px;
overflow:hidden;
overflow:auto ;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
height:6px;
background-color: #ccc;
border-radius:10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:#666;
}
.find-main{
float: left;
width: 2000px;
height: 254px;
background-color: white;
}
.find-box{
float: left;
margin-top: 45px;
width: 194px;
font-size: 14px;
color:#555
}
.find-box p{
text-align: center;
}
.find-box img{
margin-left: 21px;
}
.find-box1{
float: left;
margin-top: 45px;
width: 194px;
font-size: 14px;
color:#555
}
.find-box1 p{
text-align: center;
}
.find-box1 img{
margin-left: 21px;
}
/* 左侧服装配饰 */
.ranking-1{
float: left;
margin-top: 15px;
margin-right: 4px;
width: 590px;
height: 425px;
background-color: white;
}
.ranking-title1{
height: 40px;
background-color: #fcf6f6;
}
.ranking-white{
background-color: #f8faf9;
}
.ranking-white .font-20 {
color:#129be1;
}
.ranking-title1 .shu{
margin-top: 6px;
width: 4px;
height: 28px;
}
.picc-1{
float: left;
width: 190px;
height: 370px;
background-color: #129be1;
background: url(../imeges/index/b_img1.jpg );
background-size:190px 360px;
}
.raking-pic1{
float: left;
width: 185px;
height: 180px;
}
.raking-pic1 img{
margin-left: 37.5px;
width: 110px;
height: 110px;
}
.raking-pic1 p{
margin-top:10px;
text-align:center;
}
.raking-pic1 .ping-color{
color: #129be1;
}
.ranking-title1 .more-than{
margin-right: 20px;
font-size: 14px;
}
.erweima{
margin-top: 12px;
margin-left: 5px;
display: inline-block;
width: 18px;
height: 18px;
background: url(../imeges/index/code1.png) no-repeat;
}
.picc-black{
margin-top:270px;
padding-left: 15px;
width: 140px;
height: 60px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 0 10px 10px 0;
}
.picc-black p{
font-size: 18px;
color:white;
font-weight:900;
}
.picc-black span{
color:white;
}
/* 猜你喜欢 */
.like-title .shu{
width: 3px;
height: 28px;
background-color: coral;
}
.like-title .font-20{
margin-left: 5px;
line-height: 24px;
font-weight: 900;
}
.img_box{
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
width: 194px;
height: 325px;
background-color: white;
border-right: 1px solid rgb(231, 231, 231);
border-bottom: 1px solid rgb(231, 231, 231);
}
.img_box img{
margin-bottom: 15px;
width: 200px;
height: 200px;
transform: scale(1);
transition: 0.1s linear;
}
.img_box img:hover{
transform: scale(1.1);
}
.small-money{
float: left;
color: #ff8000;
line-height: 25px;
}
.orange-number{
float: left;
font-size: 16px;
color: #ff8000;
}
.orange-font1{
padding-left: 2px;
padding-right: 2px;
float: right;
font-size: 12px;
color: #ff8000;
border: 1px solid #ff8000;
border-radius: 5px;
}
.smmall-border{
float: left;
width: 86px;
height: 18px;
border: 1px solid #ff8000;
border-radius: 5px;
}
.smmall-border1{
display: inline-block;
padding-left: 2px;
padding-right: 2px;
background-color: #ff8000;
color: white;
}
.small-border2{
color: #ff8000;
}
.smmall-border3{
padding-left: 4px;
padding-right: 4px;
float: left;
display: inline-block;
margin-left: 5px;
background-color: #ff8000;
border-radius: 5px;
color: white;
}
/* 固定导航栏 */
.fixed-box{
position: fixed;
left: 20px;
top:200px;
padding-top: 5px;
text-align: center;
line-height: 25px;
font-size: 14px;
width: 60px;
height: 180px;
background-color: white;
}
.fixed-box .hr{
margin-top: 5px;
background-color: #ccc;
}
i,.icon-Group{
color: #ff8000;
font-size: 12px;
font-weight: 900;
}
.te{
color: #ff8000;
font-weight: 900;
}
.fixed-box p:hover{
background-color: #ff8000;
color: white;
}
登录页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登陆页</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/logn.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2226582_dki77h4juap.css">
<link rel="shortcut icon " href="../imeges/favicon.ico">
</head>
<body>
<div class="wrapper">
<!-- 顶部logo栏 -->
<div class="index-header clearfix">
<div class="logo-box ">
<div>欢迎登陆</div>
</div>
</div>
</div>
<div class="logn-bgc">
<div class="logn-main wrapper">
<div class="logn-box">
<div class="title">
登陆
</div>
<form action="../index.html">
<p>
<span class="icon-border"><i class="iconfont icon-xinfeng"></i></span>
<input type="text" name="" placeholder="手机号/会员名/邮箱" class="user">
</p>
<p>
<span class="icon-border"><i class="iconfont icon-suo"></i></span>
<input type="password" name="" placeholder="密码" class="user">
</p>
<p>
<input type="text" name="" placeholder="验证码" class="check">
<em>75368</em>
</p>
<p class="yi-dong">
<input type="image" src="../imeges/logn/Snipaste_2020-11-29_19-26-34.png">
</p>
<p>
<input type="checkbox">
<span class="checkbox-font">自动登陆</span>
<a href="" class="right-move"><span>忘记密码？</span></a>
</p>
</form>
<div class="ft-1">
<a href="">
<span></span> QQ
</a>
<a href="">
<span></span> 微博
</a>
<a href="">
微信
</a>
<p>立即注册</p>
</div>
</div>
</div>
</div>
<!-- 底部友情链接 -->
<div class="bottom-bgd">
<div class="bottom-font">
<p>Copyright 2010-2016 小U商城 版权所有 保留一切权利</p>
<p>京ICP10218183号 京ICP10218183号 京公安网安备 1101938412983748299239号 出版物经营许可证新出发京批字第130052号</p>
</div>
</div>
</body>
</html>
.logo-box{
position: relative;
margin-bottom: 40px;
}
.logo-box div{
position: absolute;
top: 26px;
height: 53px;
padding-left: 10px;
right: -98px;
font-size: 18px;
line-height: 53px;
color: #777;
border-left: 1px solid #ddd;
}
.logn-bgc{
background-color: #a4000b;
}
.logn-main{
height: 450px;
background: url(../imeges/logn/login_banner.jpg) no-repeat -300px 0px;
background-size: auto 450px;
}
.logn-box{
position: relative;
float: right;
margin-top: 50px;
padding-left: 30px;
padding-right: 30px;
width: 290px;
height: 380px;
background-color: white;
border-top: 3px solid #ff8000;
}
.title{
height: 70px;
font-size: 20px;
text-align: center;
line-height: 70px;
}
input::placeholder{
font-size: 16px;
}
.user{
padding-left: 10px;
margin-bottom: 10px;
float: left;
width: 220px;
height: 40px;
border: 1px solid #cccccc;
font-size: 16px;
}
.icon-border{
float: left;
width: 40px;
height: 40px;
border: 1px solid #ccc;
border-right: none;
text-align: center;
line-height: 40px;
color: #ccc;
}
.check{
padding-left: 10px;
margin-bottom: 10px;
float: left;
width: 180px;
height: 40px;
border: 1px solid #cccccc;
font-size: 16px;
}
em{
padding-left: 10px;
color: blue;
font-size: 20px;
font-weight: 900;
line-height: 45px;
}
.yi-dong{
margin-top: 20px;
margin-bottom: 20px;
}
.right-move{
float: right;
font-size: 16px;
}
.checkbox-font{
font-size: 16px;
}
.ft-1{
position: absolute;
margin-top: 10px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
width: 290px;
left: 0px;
border-top: 1px solid #ccc;
}
.ft-1 a{
float: left;
margin-right: 30px;
color: black;
font-size: 16px;
}
.ft-1 span{
position: absolute;
top: 20px;
display: inline-block;
width: 6px;
height: 6px;
background-color: blue;
border-radius: 50%;
}
.ft-1 p{
float: right;
font-size: 16px;
color: #ff8000;
}
body .bottom-bgd{
margin-top: 33px;
height: 90px;
background-color: white;
}
重置代码
···css
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #666666;
}
ul{
list-style: none;
}
.clearfix::after,.clearfix::before{
content: “”;
display: block;
clear: both;
}
.fl{
float: left;
}
.fr{
float: right;
}
img{
vertical-align: middle;
}
input{
border: none;
outline: none;
}
.margin-right0{
margin-right: 0;
}
.bbn{
border-bottom: none;
}
### 公共样式
```css
/* 全局字体默认设置 */
body,td,th{
font: 12px/1.5 "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";
}
/* 外部引用字体样式 */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
/* 设置盒子居中 */
.wrapper {
margin: 0 auto;
width: 1190px;
}
li.font-size12{
font-size: 12px;
}
/* 下方向灰色样式 */
i.icon-xiafangxiang{
vertical-align: middle;
transition: 0.5s linear ;
color: #444;
}
i.icon-liebiao{
color: white;
font-weight: 400;
}
/* 顶部导航栏开始 */
.top-title{
height: 35px;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
line-height: 35px;
}
/* 顶部标题内字体颜色 */
.top-font{
color: #666666;
}
/* 位置样式字体图片 */
.icon-weizhi{
/* margin-right: 4px; */
color:#ffaa00;
}
/* 实体下三角 */
.icon-lower-triangle{
vertical-align: middle;
color: #bbbbbb;
font-size: 12px;
}
li:hover .icon-xiafangxiang{
display: inline-block;
transform: rotate(-180deg);
}
.top-title-left{
width: 360px;
float: left;
}
.top-title-left ul li{
float: left;
margin-right: 23px;
}
.top-title-left ul li:hover a{
color: #ff6600;
}
.top-title-right{
width: 640px;
float: right;
}
.top-title-right ul li{
float: left;
margin-right: 16px;
}
.top-title-right ul li:hover a{
color: #ff6600;
}
.font-orange{
color:#ff6600
}
/* 顶部导航栏结束 */
/* 顶部logo栏开始 */
.white-bg{
background-color: white;
}
.logo-box{
margin-right: 160px;
float: left;
width: 210px;
height: 90px;
background: url(../imeges/index/cart_logo.jpg) no-repeat 0 26px;
line-height: 100px;
}
.search-box{
margin-bottom: 5px;
float: left;
width: 540px;
height: 90px;
}
.header-search{
margin-top: 30px;
margin-bottom: 5px;
width: 540px;
height: 40px;
border: 2px solid #ff8000;
border-radius: 10px;
}
.header-search span{
margin-left: 10px;
margin-right: 5px;
line-height: 40px;
}
.header-search .text-case1{
width: 380px;
line-height: 40px;
font-size: 14px;
}
.header-search .text-case2{
margin-top: -1px;
margin-right: -1px;
width: 120px;
line-height: 42px;
font-size: 18px;
color: white;
font-weight: 900;
background-color: #ff8000;
border-radius: 0 6px 6px 0;
}
.header-list{
width: 540px;
height: 20px;
margin-bottom: 10px;
}
.header-list span{
margin-right: 6px;
}
.header-list span:hover{
color: #ff8000;
}
/* 顶部logo栏结束 */
/* 全部商品分类开始 */
.shu{
display: inline-block;
width: 1px;
height: 14px;
margin-right: 8px;
background-color: #ccc;
vertical-align: middle;
}
.all-list{
position: relative;
height: 35px;
/* background-color: #2bff00; */
}
.body-top-left-box{
position: relative;
width: 162px;
height: 35px;
background-color: #ff8000 ;
line-height: 35px;
color: white;
}
.long-list{
position: absolute;
top: 35px;
width: 162px;
height: 460px;
background-color: #262221;
z-index: 99;
}
.long-list span{
margin-left: 3px;
}
.long-list .shu{
margin-right: 2px;
}
.long-list a{
color: white;
}
.transverse-list{
position: absolute;
left: 162px;
top: 0%;
width: 540px;
height: 35px;
line-height: 35px;
}
.transverse-list span{
margin-left: 23px;
font-size: 15px;
color: black;
font-weight: 900;
}
.big-backgroung{
width: 100%;
height: 460px;
background-color: #f33853;
}
.orange-br{
height: 2px;
background-color: #ff8000;
}
/* 全部商品分类结束 */
/* END 及 底部链接开始 */
.end{
margin: 15px auto;
width: 300px;
height: 20px;
text-align: center;
font-size: 14px;
color: #cfcdcd;
}
.end span{
margin-right: 20px;
}
.bottom-bgd{
height: 338px;
background-color: #333333;
}
.bottom-bgd-box{
margin: 0 auto;
padding-left: 268px;
height: 220px;
}
.bottom-box{
width: 180px;
}
.bottom-box div{
margin-bottom: 10px;
font-size: 20px;
color: #bcbcbc;
}
.bottom-box p{
margin-bottom: 9px;
font-size: 16px;
color: #bcbcbc;
}
.hr{
margin-top: 15px;
width: 100%;
height: 1px;
background-color: #414040;
}
.bottom-font{
margin: 0 auto;
margin-top: 15px;
width: 660px;
height: 77px;
text-align: center;
color: rgb(112, 112, 112);
}
.bottom-font p{
margin-top: 10px;
}
/* END 及 底部链接结束 */
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
