优购项目学习
参考：黑马前端pink老师
文章目录
- 优购项目学习
- 前言
- 一、HTML
-
- index.html
- register.html
- list.html
- cart.html
- 二、一般风格css
-
- base.css
- common.css
- 三.页面样式的css
-
- index.css
- register.css
- list.css
- cart.css
- 静态页面效果
-
- 1-首页 index.html
- 2-注册页面-register.html
- 3-手机热卖页面-list.html
- 4-购物车页面 -cart.html
- 四、JS部分
- 五、总结
前言
随便记，代码写得很差
一、HTML
目前完成: index list shop-cart register。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>优质购买-正品低价，质量保证，及时配送，购物方便！</title> <!-- 网站说明 --> <meta name="description" content="优秀的购物中心——专业的综合在线购物中心，为您提供真正的低价购物选择，高质量和方便的服务体验。商品来自世界各地数十万品牌，包括家用电器、手机、电脑、服装、家居、母婴、美容、个人护理、食品、新鲜等丰富类别，以满足各种购物需求。专业的综合在线购物中心，为您提供真正的低价购物选择，高质量和方便的服务体验。"> <!-- 关键字 --> <meta name="keywords" content="网购、网购、网购、家电、手机、电脑、服装、家居、母婴、美容、个人护理、食品"> <link rel="shortcut icon" href="bitbug_favicon.ico" /> <!-- 引入初始风格 --> <link rel="stylesheet" href="../css/base.css" />
<!-- 引用公共样式 -->
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/index.css" />
<!-- 引入动画animate.js -->
<!-- 并且要写在index.js前面 因为index.js依赖于animate.js -->
<script src="../js/animate.js"></script>
<!-- 引入index.js文件 -->
<script src="../js/index.js"></script>
</head>
<body>
<!-- 快捷导航模块 -->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！ </li>
<li>
<a href="#">请登录</a> <a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="arro-ico">我的品优购</li>
<li></li>
<li>品优购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arro-ico">关注品优购</li>
<li></li>
<li class="arro-ico">客户服务</li>
<li></li>
<li class="arro-ico">网站导航</li>
</ul>
</div>
</div>
</section>
<!-- 头部模块-->
<header class="header w">
<!-- logo模块 -->
<div class="logo">
<h1>
<a href="index.html" title="品优购商城"> 品优购商城</a>
</h1>
</div>
<!-- serach模块 -->
<div class="search">
<input type="search" name="" id="" placeholder="语言开发">
<button>搜索</button>
</div>
<!-- 热点词模块 -->
<div class="hotwords">
<a href="#" class="style_red">优惠购首发</a>
<a href="#">亿元优惠</a>
<a href="#">9.9团购</a>
<a href="#">美满99减39</a>
<a href="#">办公用品</a>
<a href="#">电脑</a>
<a href="#">通信</a>
</div>
<!-- 购物车模块 -->
<div class="shopcart">
<a href="cart.html">我的购物车</a>
<i class="count">8</i>
</div>
</header>
<!-- 导航部分 -->
<div class="nav">
<div class="w">
<div class="dropdown">
<div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li><a href="#">家用电器</a> </li>
<li><a href="list.html">手机</a> <a href="#">数码</a> <a href="#">通信</a> </li>
<li><a href="#">电脑</a> <a href="#">办公</a> </li>
<li><a href="#">家居</a> <a href="#">家具</a> <a href="#">家装</a> <a href="#">厨具</a> </li>
<li><a href="#">男装</a> <a href="#">女装</a> <a href="#">童装</a> <a href="#">内衣</a> </li>
<li><a href="#">个护化妆</a> <a href="#">清洁用品</a> <a href="#">宠物</a> </li>
<li><a href="#">鞋靴</a> <a href="#">箱包</a> <a href="#">珠宝</a> <a href="#">奢侈品</a></li>
<li><a href="#">户外运动</a> <a href="#">钟表</a> </li>
<li><a href="#">汽车</a> <a href="#">汽车用品</a> </li>
<li><a href="#">母婴</a> <a href="#">玩具乐器</a> </li>
<li><a href="#">食品</a> <a href="#">酒类</a> <a href="#">生鲜</a> <a href="#">特产</a> </li>
<li><a href="#">医药</a> <a href="#">保健</a> </li>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">电子书</a> </li>
<li><a href="#">旅行</a> <a href="#">彩票</a> <a href="#">充值</a> <a href="#">票务</a> </li>
<li><a href="#">理财</a> <a href="#">众筹</a> <a href="#">白条</a> <a href="#">保险</a> </li>
</ul>
</div>
</div>
<!-- naviteams模块 -->
<div class="navitems">
<ul>
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆</a></li>
<li><a href="#">智传超市</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">有趣</a></li>
</ul>
</div>
</div>
</div>
<!-- nav end -->
<!-- 固定侧边栏 (电梯模块)-->
<div class="fixedtool">
<ul>
<li>
<a href="#">家用电器</a>
</li>
<li>
<a href="#">手机通讯</a>
</li>
<li>
<a href="#">家用电器</a>
</li>
<li>
<a href="#">家用电器</a>
</li>
<li>
<a href="#">家用电器</a>
</li>
<li>
<a href="#">家用电器</a>
</li>
</ul>
</div>
<!-- 固定侧边栏结束 -->
<!-- 首页模块 -->
<div class="w">
<div class="main">
<div class="focus fl">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l">
<
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r">">></a>
<!-- 核心滚动区域 -->
<ul>
<li>
<a href="#"><img src="../upload/focus1.png"></a>
</li>
<li>
<a href="#"><img src="../upload/focus2.png"></a>
</li>
<li>
<a href="#"><img src="../upload/focus3.png" alt=""></a>
</li>
<li>
<a href="#"><img src="../upload/focus4.png" alt=""></a>
</li>
</ul>
<!-- 小圆圈 -->
<ol class="cricle">
<!-- li -->
</ol>
</div>
<!-- 左侧 -->
<div class="newsflash">
<div class="news">
<div class="news_hd">
<h5>品优购快报</h5>
<a href="#" class="more">更多 ">></a>
</div>
<div class="news_bd">
<ul>
<li>
<label>[重磅]</label> 稳稳的幸福
</li>
<li>
<label>[重磅]</label> 我要稳稳的幸福/能抵挡末日的残酷
</li>
<li>
<label>[重磅]</label> 在不安的深夜能有个归宿
</li>
<li>
<label>[重磅]</label> 我要稳稳的幸福/能用双手去碰触
</li>
<li>
<label>[重磅]</label> 每次伸手入怀中有你的温度
</li>
</ul>
</div>
</div>
<!-- 生活服务模块 -->
<div class="lifservice">
<ul>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
<li>
<a href="#"><i></i></a>
<p>话费</p>
</li>
</ul>
</div>
<!-- 生活服务模块 end-->
<!-- 打折模块 -->
<div class="bargain">
<i>
<a href="#"><img src="../upload/bargain.png" title="今日钜惠"></a>
</i>
</div>
<!-- 打折模块end -->
</div>
</div>
<!-- 今日推荐模块 -->
<div class="remore">
<div class="remore-hd">
<i>
<img src="../images/recom.png">
</i>
</div>
<div class="remore-bd">
<ul>
<li>
<a href="#">
<i><img src="../upload/recom1.png"></i>
</a>
</li>
<li>
<a href="#">
<i><img src="../upload/recom2.png"></i>
</a>
</li>
<li>
<a href="#">
<i><img src="../upload/recom3.png"></i>
</a>
</li>
<li>
<a href="#">
<i><img src="../upload/recom4.png"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- 今日推荐模块 end-->
<!-- 楼层模块 -->
<div class="floor w">
<!-- 家电模块 -->
<div class="jiadian">
<div class="jd_hd">
<h3 class="fl">家用电器</h3>
<div class="tab_list">
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">大家电</a></li>
<li><a href="#">生活电器</a></li>
<li><a href="#">厨房电器</a></li>
<li><a href="#">个护健康</a></li>
<li><a href="#">应季电器</a></li>
<li><a href="#">空气/净水</a></li>
<li><a href="#">新奇特</a></li>
<li><a href="#">高端电器</a></li>
</ul>
</div>
</div>
<div class="jd-bd">
<ul>
<li class="w209">
<ul>
<li><a href="#">节能补贴</a></li>
<li><a href="#">4k电视</a></li>
<li><a href="#">空气净化器</a></li>
<li><a href="#">IH电饭煲</a></li>
<li><a href="#">滚筒洗衣机</a></li>
<li><a href="#">电热水器</a></li>
</ul>
<img src="../upload/floor-1-1.png" />
</li>
<li class="w329">
<img src="../upload/floor-1-b01.png" />
<!-- 左箭头 -->
<!-- <a href="#" class="prev"><</a> -->
<!-- 右箭头 -->
<!-- <a href="#" class="next">></a> -->
<!-- 轮播图小圆点 -->
<ul class="promo-nav">
<li class="seleted"></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="w219">
<div class="sale">
<a href="#">
<img src="../upload/floor-1-2.png">
</a>
</div>
<div class="sale">
<a href="#">
<img src="../upload/floor-1-3.png">
</a>
</div>
</li>
<li class="w220">
<div class="sale">
<a href="#">
<img src="../upload/floor-1-4.png">
</a>
</div>
</li>
<li class="w220">
<div class="sale">
<a href="#">
<img src="../upload/floor-1-5.png" alt="">
</a>
</div>
<div class="sale">
<a href="#">
<img src="../upload/floor-1-6.png" alt="">
</a>
</div>
</li>
</ul>
</div>
</div>
<!-- 家电模块结束 -->
<!-- 家电模块 -->
<div class="jiadian">
<div class="jd_hd">
<h3 class="fl">家用电器</h3>
<div class="tab_list">
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">大家电</a></li>
<li><a href="#">生活电器</a></li>
<li><a href="#">厨房电器</a></li>
<li><a href="#">个护健康</a></li>
<li><a href="#">应季电器</a></li>
<li><a href="#">空气/净水</a></li>
<li><a href="#">新奇特</a></li>
<li><a href="#">高端电器</a></li>
</ul>
</div>
</div>
<div class="jd-bd">
<ul>
<li class="w209">
<ul>
<li><a href="#">节能补贴</a></li>
<li><a href="#">4k电视</a></li>
<li><a href="#">空气净化器</a></li>
<li><a href="#">IH电饭煲</a></li>
<li><a href="#">滚筒洗衣机</a></li>
<li><a href="#">电热水器</a></li>
</ul>
<img src="../upload/floor-1-1.png" />
</li>
<li class="w329">
<img src="../upload/floor-1-b01.png" />
<!-- 左箭头 -->
<!-- <a href="#" class="prev"><</a> -->
<!-- 右箭头 -->
<!-- <a href="#" class="next">></a> -->
<!-- 轮播图小圆点 -->
<ul class="promo-nav">
<li class="seleted"></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="w219">
<div class="sale">
<a href="#">
<img src="../upload/floor-1-2.png">
</a>
</div>
<div class="sale">
<a href="#">
<img src="../upload/floor-1-3.png">
</a>
</div>
</li>
<li class="w220">
<div class="sale">
<a href="#">
<img src="../upload/floor-1-4.png">
</a>
</div>
</li>
<li class="w220">
<div class="sale">
<a href="#">
<img src="../upload/floor-1-5.png" alt="">
</a>
</div>
<div class="sale">
<a href="#">
<img src="../upload/floor-1-6.png" alt="">
</a>
</div>
</li>
</ul>
</div>
</div>
<!-- 家电模块结束 -->
</div>
<!-- 楼层模块 end-->
</div>
<!-- 首页模块end -->
<!-- footer模块 -->
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5 class="zheng">图标</h5>
<div class="mod_service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5 class="ji">图标</h5>
<div class="mod_service_txt">
<h4>极速物流</h4>
<p>极速物流，极速送达</p>
</div>
</li>
<li>
<h5 class="wu">图标</h5>
<div class="mod_service_txt">
<h4>无忧售后</h4>
<p>七天无理由退换货</p>
</div>
</li>
<li>
<h5 class="te">图标</h5>
<div class="mod_service_txt">
<h4>特色服务业</h4>
<p>私人订制家电套餐</p>
</div>
</li>
<li>
<h5 class="bang">图标</h5>
<div class="mod_service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_heep">
<!-- 服务指南 -->
<dl>
<dt>服务指南</dt>
<dd>
<a href="#">购物流程</a>
</dd>
<dd>
<a href="#">会员介绍</a>
</dd>
<dd>
<a href="#">生活旅行/团购</a>
</dd>
<dd>
<a href="#">大家电</a>
</dd>
<dd>
<a href="#">联系客服</a>
</dd>
</dl>
<!-- 服务指南end -->
<!-- 配送方式 -->
<dl>
<dt>配送方式</dt>
<dd>
<a href="#">上门自提</a>
</dd>
<dd>
<a href="#">限时送达</a>
</dd>
<dd>
<a href="#">配送服务查询</a>
</dd>
<dd>
<a href="#">配送费收取标准</a>
</dd>
<dd>
<a href="#">海外配送</a>
</dd>
</dl>
<!-- 配送方式end -->
<!-- 支付方式 -->
<dl>
<dt>支付方式</dt>
<dd>
<a href="#">货到付款</a>
</dd>
<dd>
<a href="#">在线支付</a>
</dd>
<dd>
<a href="#">分期付款</a>
</dd>
<dd>
<a href="#">邮局汇款</a>
</dd>
<dd>
<a href="#">公司转账</a>
</dd>
</dl>
<!-- 支付方式end -->
<!-- 售后服务 -->
<dl>
<dt>售后服务</dt>
<dd>
<a href="#">售后政策</a>
</dd>
<dd>
<a href="#">价格保护</a>
</dd>
<dd>
<a href="#">退款说明</a>
</dd>
<dd>
<a href="#">返修/退换货</a>
</dd>
<dd>
<a href="#">取消订单</a>
</dd>
</dl>
<!-- 售后服务end -->
<!-- 特色服务 -->
<dl>
<dt>特色服务</dt>
<dd>
<a href="#">夺积分</a>
</dd>
<dd>
<a href="#">DIY装机</a>
</dd>
<dd>
<a href="#">延保服务</a>
</dd>
<dd>
<a href="#">品优购E卡</a>
</dd>
<dd>
<a href="#">品优购通信</a>
</dd>
</dl>
<!-- 特色服务end -->
<!-- 帮助中心 -->
<dl>
<dt>帮助中心</dt>
<img src="../images/wx.png" />
<p>品优购客户端</p>
</dl>
<!-- 帮助中心 end-->
</div>
<div class="mod_copyright">
<div class="link">
<a href="#">关于我们</a>
<i>|</i>
<a href="#">联系我们</a>
<i>|</i>
<a href="#">联系客服</a>
<i>|</i>
<a href="#">商家入驻</a>
<i>|</i>
<a href="#">营销中心</a>
<i>|</i>
<a href="#">手机品优购</a>
<i>|</i>
<a href="#">友情链接</a>
<i>|</i>
<a href="#">销售联盟</a>
<i>|</i>
<a href="#">品优购社区</a>
<i>|</i>
<a href="#">品优购公益</a>
<i>|</i>
<a href="#">English Site</a>
<i>|</i>
<a href="#">Contact U</a>
</div>
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br />
京ICP备08001421号京公网安备110108007702
</div>
</div>
</footer>
</body>
</html>
register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人注册</title>
<link rel="shortcut icon" href="bitbug_favicon.ico" />
<link rel="stylesheet" href="../css/register.css" />
<link rel="stylesheet" href="../css/base.css" />
</head>
<body>
<div class="w">
<header class="logo">
<a href="index.html">
<img src="../images/logo.png" title="返回首页" />
</a>
</header>
<!-- 注册模块 -->
<div class="register-area">
<h3>
新用户注册
<div class="login">
我有账号，去
<a href="index.html">登录</a>
</div>
</h3>
<!-- 注册信息模块 -->
<div class="reg-form">
<form action="">
<ul>
<li><label for="">手机号：</label> <input type="text" class="inp">
<span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入</span>
</li>
<li><label for="">短信验证码：</label> <input type="text" class="inp">
<span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span>
</li>
<li><label for="">登录密码：</label> <input type="password" class="inp">
<span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span>
</li>
<li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li>
<li><label for="">确认密码：</label> <input type="password" class="inp">
<span class="error"> <i class="error_icon"></i></span>
</li>
<li class="agree"><input type="checkbox" name="" id="">
同意协议并注册 <a href="#">《知晓用户协议》</a>
</li>
<li>
<input type="submit" value="完成注册" class="btn">
</li>
</ul>
</form>
</div>
<!-- 注册信息模块 end-->
</div>
<!-- 注册模块 end-->
<footer>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
品优购公益 | English Site | Contact U
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</div>
</div>
</footer>
</div>
</body>
</html>
list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>品优购-正品低价、品质保障、配送及时、轻松购物！</title>
<link rel="shortcut icon" href="bitbug_favicon.ico" />
<!-- 引入初始化样式 -->
<link rel="stylesheet" href="../css/base.css" />
<!-- 引用公共样式 -->
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/list.css" />
</head>
<body>
<!-- 快捷导航模块 -->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！ </li>
<li>
<a href="#">请登录</a> <a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="arro-ico">我的品优购</li>
<li></li>
<li>品优购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arro-ico">关注品优购</li>
<li></li>
<li class="arro-ico">客户服务</li>
<li></li>
<li class="arro-ico">网站导航</li>
</ul>
</div>
</div>
</section>
<!-- 列表模块 start -->
<!-- 列表页主体 start -->
<!-- 列表页主体 start -->
<div class="sk_container w">
<div class="sk_hd">
<a href="#">
<div>头部图片</div>
</a>
</div>
<div class="sk_bd">
<ul class="clearfix">
<li>
<div class="sk_box">
<img src="../upload/iphone.jpg" alt="">
<h4>Apple苹果iPhone 6s Plus（A1699）</h4>
<p>32G 金色 移动联通电信4G手机</p>
<span class="now">￥6088</span>
<span class="bf">￥6988</span>
<div class="jdt">
已剩<span>87%</span>
<div class="bar">
<div class="bar_in"></div>
</div>
剩余<span>27件</span>
</div>
<a href="#">立即抢购</a>
</div>
</li>
<li>
<div class="sk_box">
<img src="../upload/iphone.jpg" alt="">
<h4>Apple苹果iPhone 6s Plus（A1699）</h4>
<p>32G 金色 移动联通电信4G手机</p>
<span class="now">￥6088</span>
<span class="bf">￥6988</span>
<div class="jdt">
已剩<span>87%</span>
<div class="bar">
<div class="bar_in"></div>
</div>
剩余<span>27件</span>
</div>
<a href="#">立即抢购</a>
</div>
</li>
<li>
<div class="sk_box">
<img src="../upload/iphone.jpg" alt="">
<h4>Apple苹果iPhone 6s Plus（A1699）</h4>
<p>32G 金色 移动联通电信4G手机</p>
<span class="now">￥6088</span>
<span class="bf">￥6988</span>
<div class="jdt">
已剩<span>87%</span>
<div class="bar">
<div class="bar_in"></div>
</div>
剩余<span>27件</span>
</div>
<a href="#">立即抢购</a>
</div>
</li>
<li>
<div class="sk_box">
<img src="../upload/iphone.jpg" alt="">
<h4>Apple苹果iPhone 6s Plus（A1699）</h4>
<p>32G 金色 移动联通电信4G手机</p>
<span class="now">￥6088</span>
<span class="bf">￥6988</span>
<div class="jdt">
已剩<span>87%</span>
<div class="bar">
<div class="bar_in"></div>
</div>
剩余<span>27件</span>
</div>
<a href="#">立即抢购</a>
</div>
</li>
<li>
<div class="sk_box">
<img src="../upload/iphone.jpg" alt="">
<h4>Apple苹果iPhone 6s Plus（A1699）</h4>
<p>32G 金色 移动联通电信4G手机</p>
<span class="now">￥6088</span>
<span class="bf">￥6988</span>
<div class="jdt">
已剩<span>87%</span>
<div class="bar">
<div class="bar_in"></div>
</div>
剩余<span>27件</span>
</div>
<a href="#">立即抢购</a>
</div>
</li>
<li>
<div class="sk_box">
<img src="../upload/iphone.jpg" alt="">
<h4>Apple苹果iPhone 6s Plus（A1699）</h4>
<p>32G 金色 移动联通电信4G手机</p>
<span class="now">￥6088</span>
<span class="bf">￥6988</span>
<div class="jdt">
已剩<span>87%</span>
<div class="bar">
<div class="bar_in"></div>
</div>
剩余<span>27件</span>
</div>
<a href="#">立即抢购</a>
</div>
</li>
<li>
<div class="sk_box">
<img src="../upload/iphone.jpg" alt="">
<h4>Apple苹果iPhone 6s Plus（A1699）</h4>
<p>32G 金色 移动联通电信4G手机</p>
<span class="now">￥6088</span>
<span class="bf">￥6988</span>
<div class="jdt">
已剩<span>87%</span>
<div class="bar">
<div class="bar_in"></div>
</div>
剩余<span>27件</span>
</div>
<a href="#">立即抢购</a>
</div>
</li>
<li>
<div class="sk_box">
<img src="../upload/iphone.jpg" alt="">
<h4>Apple苹果iPhone 6s Plus（A1699）</h4>
<p>32G 金色 移动联通电信4G手机</p>
<span class="now">￥6088</span>
<span class="bf">￥6988</span>
<div class="jdt">
已剩<span>87%</span>
<div class="bar">
<div class="bar_in"></div>
</div>
剩余<span>27件</span>
</div>
<a href="#">立即抢购</a>
</div>
</li>
</ul>
</div>
</div>
<!-- 列表页主体 end -->
<!-- 列表页主体 end -->
<!-- 列表模块 end -->
<!-- footer模块 -->
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5 class="zheng">图标</h5>
<div class="mod_service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5 class="ji">图标</h5>
<div class="mod_service_txt">
<h4>极速物流</h4>
<p>极速物流，极速送达</p>
</div>
</li>
<li>
<h5 class="wu">图标</h5>
<div class="mod_service_txt">
<h4>无忧售后</h4>
<p>七天无理由退换货</p>
</div>
</li>
<li>
<h5 class="te">图标</h5>
<div class="mod_service_txt">
<h4>特色服务业</h4>
<p>私人订制家电套餐</p>
</div>
</li>
<li>
<h5 class="bang">图标</h5>
<div class="mod_service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_heep">
<!-- 服务指南 -->
<dl>
<dt>服务指南</dt>
<dd>
<a href="#">购物流程</a>
</dd>
<dd>
<a href="#">会员介绍</a>
</dd>
<dd>
<a href="#">生活旅行/团购</a>
</dd>
<dd>
<a href="#">大家电</a>
</dd>
<dd>
<a href="#">联系客服</a>
</dd>
</dl>
<!-- 服务指南end -->
<!-- 配送方式 -->
<dl>
<dt>配送方式</dt>
<dd>
<a href="#">上门自提</a>
</dd>
<dd>
<a href="#">限时送达</a>
</dd>
<dd>
<a href="#">配送服务查询</a>
</dd>
<dd>
<a href="#">配送费收取标准</a>
</dd>
<dd>
<a href="#">海外配送</a>
</dd>
</dl>
<!-- 配送方式end -->
<!-- 支付方式 -->
<dl>
<dt>支付方式</dt>
<dd>
<a href="#">货到付款</a>
</dd>
<dd>
<a href="#">在线支付</a>
</dd>
<dd>
<a href="#">分期付款</a>
</dd>
<dd>
<a href="#">邮局汇款</a>
</dd>
<dd>
<a href="#">公司转账</a>
</dd>
</dl>
<!-- 支付方式end -->
<!-- 售后服务 -->
<dl>
<dt>售后服务</dt>
<dd>
<a href="#">售后政策</a>
</dd>
<dd>
<a href="#">价格保护</a>
</dd>
<dd>
<a href="#">退款说明</a>
</dd>
<dd>
<a href="#">返修/退换货</a>
</dd>
<dd>
<a href="#">取消订单</a>
</dd>
</dl>
<!-- 售后服务end -->
<!-- 特色服务 -->
<dl>
<dt>特色服务</dt>
<dd>
<a href="#">夺积分</a>
</dd>
<dd>
<a href="#">DIY装机</a>
</dd>
<dd>
<a href="#">延保服务</a>
</dd>
<dd>
<a href="#">品优购E卡</a>
</dd>
<dd>
<a href="#">品优购通信</a>
</dd>
</dl>
<!-- 特色服务end -->
<!-- 帮助中心 -->
<dl>
<dt>帮助中心</dt>
<img src="../images/wx.png" />
<p>品优购客户端</p>
</dl>
<!-- 帮助中心 end-->
</div>
<div class="mod_copyright">
<div class="link">
<a href="#">关于我们</a>
<i>|</i>
<a href="#">联系我们</a>
<i>|</i>
<a href="#">联系客服</a>
<i>|</i>
<a href="#">商家入驻</a>
<i>|</i>
<a href="#">营销中心</a>
<i>|</i>
<a href="#">手机品优购</a>
<i>|</i>
<a href="#">友情链接</a>
<i>|</i>
<a href="#">销售联盟</a>
<i>|</i>
<a href="#">品优购社区</a>
<i>|</i>
<a href="#">品优购公益</a>
<i>|</i>
<a href="#">English Site</a>
<i>|</i>
<a href="#">Contact U</a>
</div>
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br />
京ICP备08001421号京公网安备110108007702
</div>
</footer>
</body>
</html>
cart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的购物车</title>
<link rel="shortcut icon" href="bitbug_favicon.ico" />
<!-- 引入初始化样式 -->
<link rel="stylesheet" href="../css/base.css" />
<!-- 引用公共样式 -->
<link rel="stylesheet" href="../css/common.css" />
<!-- 引入 cart.css -->
<link rel="stylesheet" href="../css/cart.css">
<!-- 引入js文件 -->
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/cart.js"></script>
</head>
<body>
<!-- 快捷导航模块 -->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！ </li>
<li>
<a href="#">请登录</a> <a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="arro-ico">我的品优购</li>
<li></li>
<li>品优购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arro-ico">关注品优购</li>
<li></li>
<li class="arro-ico">客户服务</li>
<li></li>
<li class="arro-ico">网站导航</li>
</ul>
</div>
</div>
</section>
<header class="header w">
<!-- logo模块 -->
<div class="logo">
<h1>
<a href="index.html" title="品优购商城"> 品优购商城</a>
</h1>
</div>
</header>
<!-- 购物车列表 -->
<div class="w">
<div class="big-concent">
<div class="cart-filter-bar"><span>全部商品</span> </div>
<div class="cart-thead">
<div class="t-checkbox fl"> <input type="checkbox" class="checkall">全选</div>
<div class="t-goods fl"><span>商品</span></div>
<div class="t-price fl"><span>单价</span></div>
<div class="t-num fl"><span>数量</span></div>
<div class="t-sum fl"><span>小计</span></div>
<div class="t-action fl"><span>操作</span></div>
</div>
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox fl">
<input type="checkbox" checked="checked" class="j-checkbox">
</div>
<div class="p-goods fl">
<div class="p-goods-hd fl">
<img src="../upload/p1.jpg" alt="">
</div>
<div class="p-goods-bd fl">【5本26.8元】经典儿童文学彩图青少 <br> 版八十天环游地球中学生语文教学大纲</div>
</div>
<div class="p-price fl">￥12.60</div>
<div class="p-num fl">
<a href="javascript:;" class="decrement">-</a>
<input type="text" value="1" class="itxt">
<a href="javascript:;" class="increment">+</a>
</div>
<div class="p-sum fl">￥12.60</div>
<div class="p-action fl"><a href="javascript:;" title="删除">删除</a>
</div>
</div>
<div class="cart-item">
<div class="p-checkbox fl"> <input type="checkbox" class="j-checkbox"></div>
<div class="p-goods fl">
<div class="p-goods-hd fl">
<img src="../upload/p1.jpg" alt="">
</div>
<div class="p-goods-bd fl">【5本26.8元】经典儿童文学彩图青少 <br> 版八十天环游地球中学生语文教学大纲</div>
</div>
<div class="p-price fl">￥24.80</div>
<div class="p-num fl">
<a href="javascript:;" class="decrement">-</a>
<input type="text" value="1" class="itxt">
<a href="javascript:;" class="increment">+</a>
</div>
<div class="p-sum fl">￥24.80</div>
<div class="p-action fl"><a href="javascript:;" title="删除">删除</a>
</div>
</div>
<div class="cart-item">
<div class="p-checkbox fl"> <input type="checkbox" class="j-checkbox"></div>
<div class="p-goods fl">
<div class="p-goods-hd fl">
<img src="../upload/p1.jpg" alt="">
</div>
<div class="p-goods-bd fl">【5本26.8元】经典儿童文学彩图青少 <br> 版八十天环游地球中学生语文教学大纲</div>
</div>
<div class="p-price fl">￥29.80</div>
<div class="p-num fl">
<a href="javascript:;" class="decrement">-</a>
<input type="text" value="1" class="itxt">
<a href="javascript:;" class="increment">+</a>
</div>
<div class="p-sum fl">￥29.80</div>
<div class="p-action fl"><a href="javascript:;" title="删除">删除</a>
</div>
</div>
<div class="cart-item-last">
<div class="p-checkbox fl"> <input type="checkbox" class="checkall"> <span> 全选</span> </div>
<div class="remove-checked fl"> <a href="javascript:;">删除选中的商品</a></div>
<div class="remove-all fl"> <a href="javascript:;">清理购物车</a> </div>
<div class="toolbar-right fr">
<div class="amount-sum fl">已经选 <span>1</span>件商品 </div>
<div class="price-sum fl">总价: <span>￥12.60</span></div>
<div class="btn-area fl"><a href="javascript:;">去结算</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- footer模块 -->
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5 class="zheng">图标</h5>
<div class="mod_service_txt">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<h5 class="ji">图标</h5>
<div class="mod_service_txt">
<h4>极速物流</h4>
<p>极速物流，极速送达</p>
</div>
</li>
<li>
<h5 class="wu">图标</h5>
<div class="mod_service_txt">
<h4>无忧售后</h4>
<p>七天无理由退换货</p>
</div>
</li>
<li>
<h5 class="te">图标</h5>
<div class="mod_service_txt">
<h4>特色服务业</h4>
<p>私人订制家电套餐</p>
</div>
</li>
<li>
<h5 class="bang">图标</h5>
<div class="mod_service_txt">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_heep">
<!-- 服务指南 -->
<dl>
<dt>服务指南</dt>
<dd>
<a href="#">购物流程</a>
</dd>
<dd>
<a href="#">会员介绍</a>
</dd>
<dd>
<a href="#">生活旅行/团购</a>
</dd>
<dd>
<a href="#">大家电</a>
</dd>
<dd>
<a href="#">联系客服</a>
</dd>
</dl>
<!-- 服务指南end -->
<!-- 配送方式 -->
<dl>
<dt>配送方式</dt>
<dd>
<a href="#">上门自提</a>
</dd>
<dd>
<a href="#">限时送达</a>
</dd>
<dd>
<a href="#">配送服务查询</a>
</dd>
<dd>
<a href="#">配送费收取标准</a>
</dd>
<dd>
<a href="#">海外配送</a>
</dd>
</dl>
<!-- 配送方式end -->
<!-- 支付方式 -->
<dl>
<dt>支付方式</dt>
<dd>
<a href="#">货到付款</a>
</dd>
<dd>
<a href="#">在线支付</a>
</dd>
<dd>
<a href="#">分期付款</a>
</dd>
<dd>
<a href="#">邮局汇款</a>
</dd>
<dd>
<a href="#">公司转账</a>
</dd>
</dl>
<!-- 支付方式end -->
<!-- 售后服务 -->
<dl>
<dt>售后服务</dt>
<dd>
<a href="#">售后政策</a>
</dd>
<dd>
<a href="#">价格保护</a>
</dd>
<dd>
<a href="#">退款说明</a>
</dd>
<dd>
<a href="#">返修/退换货</a>
</dd>
<dd>
<a href="#">取消订单</a>
</dd>
</dl>
<!-- 售后服务end -->
<!-- 特色服务 -->
<dl>
<dt>特色服务</dt>
<dd>
<a href="#">夺积分</a>
</dd>
<dd>
<a href="#">DIY装机</a>
</dd>
<dd>
<a href="#">延保服务</a>
</dd>
<dd>
<a href="#">品优购E卡</a>
</dd>
<dd>
<a href="#">品优购通信</a>
</dd>
</dl>
<!-- 特色服务end -->
<!-- 帮助中心 -->
<dl>
<dt>帮助中心</dt>
<img src="../images/wx.png" />
<p>品优购客户端</p>
</dl>
<!-- 帮助中心 end-->
</div>
<div class="mod_copyright">
<div class="link">
<a href="#">关于我们</a>
<i>|</i>
<a href="#">联系我们</a>
<i>|</i>
<a href="#">联系客服</a>
<i>|</i>
<a href="#">商家入驻</a>
<i>|</i>
<a href="#">营销中心</a>
<i>|</i>
<a href="#">手机品优购</a>
<i>|</i>
<a href="#">友情链接</a>
<i>|</i>
<a href="#">销售联盟</a>
<i>|</i>
<a href="#">品优购社区</a>
<i>|</i>
<a href="#">品优购公益</a>
<i>|</i>
<a href="#">English Site</a>
<i>|</i>
<a href="#">Contact U</a>
</div>
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br />
京ICP备08001421号京公网安备110108007702
</div>
</div>
</footer>
</body>
</html>
二、通用样式的css
base.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
em, i {
font-style: normal;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #666666;
}
a:hover {
color:#c81632;
}
input, button {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/* 去掉默认的灰色边框 */
border: 0;
outline:none;
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底部空白缝隙问题 */
vertical-align: middle;
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom: 1;
}
common.css
/* 版心宽度,清除浮动,页面文字颜色 */
/* 比如首页 列表页 详情页 */
/* start */
/* 字体声明注意引用的路径 */
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?xmb9mg');
src: url('../fonts/icomoon.eot?xmb9mg#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?xmb9mg') format('truetype'),
url('../fonts/icomoon.woff?xmb9mg') format('woff'),
url('../fonts/icomoon.svg?xmb9mg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* 版心 */
.w {
width: 1200px;
margin: 0 auto;
}
/* 快捷导航模块 */
.fl {
float: left;
}
.fr {
float: right;
}
.style_red {
color: red;
}
.shortcut {
/* 行高会继承给子类 height=line-height可以实现居中效果 */
height: 31px;
line-height: 31px;
background-color: #f1f1f1;
}
.shortcut ul li {
float: left;
}
.shortcut .fr ul li:nth-child(even) {
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 15px 0;
}
.arro-ico::after {
content: '\ea43';
font-family: 'icomoon';
margin-left: 9px;
}
/* header 模块 */
.header {
position: relative;
height: 105px;
/* background-color: pink; */
}
.logo {
position: absolute;
top: 25px;
height: 61px;
width: 171px;
/* background-color: #449FDB; */
}
.logo a {
display: block;
height: 61px;
width: 171px;
background: url(../images/logo.png) no-repeat;
font-size: 0;
}
.search {
position: absolute;
top: 25px;
left: 346px;
width: 538px;
height: 36px;
border: 2px solid #b1191a;
}
.search input {
float: left;
width: 88%;
height: 100%;
padding-left: 10px;
}
.search button {
float: left;
width: 12%;
height: 100%;
background-color: #b1191a;
font-size: 16px;
color: #fff;
}
/* 热点词 */
.hotwords {
position: absolute;
top: 66px;
left: 346px;
}
.hotwords a {
margin: 0 10px;
font-size: 14px;
/* color: #666666; */
}
/* 购物车模块 */
.shopcart {
position: absolute;
top: 25px;
right: 60px;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid white;
background-color: #fff;
}
.shopcart::before {
content: '\e93a';
font-family: 'icomoon';
margin-right: 5px;
color: #C81632;
}
.shopcart::after {
content: '\e920';
font-family: 'icomoon';
margin-left: 10px;
}
.count {
position: absolute;
top: -5px;
left: 105px;
height: 14px;
line-height: 14px;
color: #FFFFFF;
background-color: #B1191A;
padding: 0 5px;
/* 左下角不需要修改成圆角,而将其他三个角改为圆角即可 */
border-radius: 7px 7px 7px 0;
}
.nav {
height: 45px;
border-bottom: 2px solid #B1191A;
}
.nav .dropdown {
float: left;
width: 210px;
height: 45px;
background-color: #b1191a;
}
.nav .navitems {
float: left;
}
.dropdown .dt {
width: 100%;
height: 100%;
color: #FFFFFF;
text-align: center;
line-height: 45px;
font-size: 16px;
}
.dropdown .dd {
/* display: none; */
width: 210px;
height: 465px;
background-color: #c81623;
margin-top: 1px;
}
.dropdown .dd ul li {
position: relative;
height: 31px;
line-height: 31px;
margin-left: 2px;
padding-left: 10px;
font-size: 14px;
}
.dropdown .dd ul li:hover {
background-color: white;
}
.dropdown .dd ul li::after {
position: absolute;
top: 1px;
right: 5px;
content: '\e920';
font-family: 'icomoon';
color: #FFFFFF;
}
.dropdown .dd ul li a {
font-size: 14px;
color: #FFFFFF;
padding-right: 7px;
}
.dropdown .dd ul li:hover a {
color: #C81623;
}
.dropdown .dd ul li a:hover {
color: #000000;
}
.navitems ul li {
float: left;
}
.navitems ul li a {
display: block;
height: 45px;
line-height: 45px;
color: #000000;
font-size: 16px;
padding: 0 30px;
}
.navitems ul li a:hover {
color: #449FDB;
}
/* footer */
.footer {
height: 415px;
background-color: #f5f5f5;
padding-top: 30px;
}
.mod_service {
height: 80px;
border-bottom: 1px solid #CCCCCC;
}
.mod_service ul li {
float: left;
height: 50px;
width: 240px;
/* background-color: #449FDB; */
padding-left: 30px;
}
.mod_service ul li h5 {
float: left;
width: 50px;
height: 50px;
/* line-height: 50px; */
margin-right: 8px;
font-size: 0;
/* background-color: pink; */
}
.mod_service .zheng {
background: url(../images/icons1.png) no-repeat;
}
.mod_service .ji {
background: url(../images/icons2.png) no-repeat;
}
.mod_service .wu {
background: url(../images/icons3.png) no-repeat;
}
.mod_service .te {
background: url(../images/icons4.png) no-repeat;
}
.mod_service .bang {
background: url(../images/icons5.png) no-repeat;
}
.mod_service_txt h4 {
font-size: 14px;
}
.mod_service_txt p {
font-size: 12px;
margin-top: 5px;
}
.mod_service_txt {
margin-top: 5px;
color: #666666;
}
.mod_heep {
height: 185px;
border-bottom: 1px solid #CCCCCC;
padding-top: 30px;
padding-left: 30px;
}
.mod_heep dl {
width: 200px;
float: left;
}
.mod_heep dl:last-child {
width: 90px;
text-align: center;
font-size: 14px;
}
.mod_heep dl dt {
font-size: 16px;
margin-bottom: 10px;
}
.mod_copyright {
text-align: center;
padding-top: 20px;
}
.link {
margin-bottom: 15px;
}
.link a {
margin: 0 4px;
}
.copyright {
text-align: center;
color: #666666;
}
三.页面样式的css
index.css
.main {
margin-top: 10px;
width: 980px;
height: 465px;
margin-left: 220px;
}
.focus {
position: relative;
/* float: left; */
/* margin-top: 10px; */
width: 721px;
height: 455px;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0px;
left: 0px;
width: 500%;
}
.focus li {
float: left;
}
/* .focus img { transition: all .3s; } .focus img:hover { margin-left: 3px; } */
.arrow-l, .arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
color: #FFFFFF;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
/* font-family: 'icommon'; */
font-size: 18px;
z-index: 2;
}
.arrow-l:hover {
color: #FFFFFF;
}
.arrow-r:hover {
color: #FFFFFF;
}
.arrow-r {
right: 0;
}
.cricle {
position: absolute;
bottom: 10px;
left: 50%;
/* background-color: pink; */
}
.cricle li {
float: left;
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/* 鼠标经过显示小手 */
cursor: pointer;
background-color: rgba(0, 0, 0, .3);
}
.cricle .current {
background-color: #E74C3C;
}
.focus img {
width: 100%;
height: 100%;
}
.newsflash {
float: right;
width: 250px;
height: 465px;
}
.news {
height: 165px;
border: 1px solid #e4e4e4;
padding: 0 15px;
}
.news_hd {
height: 33px;
line-height: 33px;
border-bottom: 1px dotted #E4E4E4;
padding: 0 15px;
}
.news_hd h5 {
float: left;
font-size: 14px;
}
.news_hd .more {
float: right;
}
.news_bd {
padding: 5px 15px;
}
.news_bd ul li {
height: 24px;
line-height: 24px;
overflow: hidden;
/* 隐藏溢出文字 */
text-overflow: ellipsis;
white-space: nowrap;
color: #666;
}
.lifservice {
height: 209px;
border: 1px solid #E4E4E4;
border-top: 0px;
overflow: hidden;
}
.lifservice ul {
width: 252px;
}
.lifservice ul li {
float: left;
width: 63px;
height: 71px;
border-right: 1px solid #E4E4E4;
border-bottom: 1px solid #E4E4E4;
text-align: center;
}
.lifservice ul li i {
display: inline-block;
width: 23px;
height: 28px;
margin-top: 12px;
background: url(../images/iphone.png);
}
.bargain {
margin-top: 6px;
}
.remore {
height: 163px;
margin-top: 12px;
background-color: #ebebeb;
margin-bottom: 20px;
}
.remore-hd {
float: left;
width: 205px;
height: 163px;
background-color: #5c5251;
}
.remore-bd {
float: left;
background-color: pink;
}
.remore-bd ul li {
position: relative;
float: left;
}
.remore-bd ul li img {
width: 248px;
height: 163px;
}
/* 这是每个商品之间的线 */
.remore-bd ul li:nth-child(-n+3):after {
content: '';
position: absolute;
right: 0;
top: 10px;
width: 1px;
height: 145px;
background-color: #ddd;
}
.fixedtool {
position: fixed;
width: 66px;
top: 100px;
left: 50%;
margin-left: -676px;
background-color: #fff;
text-align: center;
}
.fixedtool li {
background-color: #C81523
}
.fixedtool li a {
display: block;
border-bottom: 1px solid #CCCCCC;
font-size: 12px;
color: white;
height: 32px;
line-height: 32px;
}
.fixedtool li:hover a {
background-color: white;
color: #C81523;
}
.jd_hd {
margin-top: 25px;
height: 30px;
line-height: 30px;
}
.jd_hd h3 {
font-size: 18px;
color: #C81632;
}
.jd-hd li {
float: left;
font-size: 12px;
color: #666;
}
.jd-hd li a {
margin: 0 15px;
font-size: 12px;
}
.jd-bd {
height: 360px;
border-top: 2px solid #C81623;
}
.jd-bd li {
float: left;
overflow: hidden;
}
.w209 {
height: 360px;
width: 209px;
background-color: #f9f9f9;
}
.w209 li {
float: left;
width: 86px;
height: 32px;
margin-left: 10px;
line-height: 32px;
border-bottom: 1px solid #ccc;
text-align: center;
}
.w209 li a {
font-size: 12px;
}
.w329 {
position: relative;
width: 329px;
height: 360px;
}
.prev {
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
right: 0;
/* 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 同理 top bottom 会执行 top */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.w329 .promo-nav {
position: absolute;
top: 320px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background: rgba(255, 255, 255, .7);
border-radius: 7px;
}
.promo-nav li {
float: left;
width: 8px;
height: 8px;
background-color: #FFFFFF;
border-radius: 50%;
margin: 3px;
}
.promo-nav .seleted {
background-color: #FF8500;
}
.w219 {
width: 219px;
border-right: 1px solid #CCCCCC;
}
.sale {
border-bottom: 1px solid #ccc;
}
.w220 {
height: 360px;
width: 220px;
border-right: 1px solid #ccc;
}
.jd-bd img {
transition: all .3s;
}
.jd-bd img:hover {
margin-left: 5px;
}
.tab_list {
float: right;
}
.tab_list ul li {
float: left;
padding: 0px 10px;
}
register.css
.w {
width: 1200px;
margin: 0 auto;
}
header {
height: 84px;
border-bottom: 2px solid #C81623;
}
.logo {
padding-top: 18px;
}
.register-area {
height: 522px;
border: 1px solid #CCCCCC;
}
.register-area h3 {
height: 42px;
border-bottom: 1px solid #CCCCCC;
font-size: 18px;
line-height: 42px;
color: #666666;
padding: 0 10px;
}
.login {
float: right;
font-size: 14px;
font-weight: 400;
}
.login a {
color: #449FDB;
}
.reg-form {
width: 600px;
margin: 50px auto 0;
/* background-color: pink; */
}
.reg-form input {
text-indent: 5px;
}
.reg-form ul li {
margin-bottom: 20px;
}
.reg-form ul li label {
display: inline-block;
width: 88px;
text-align: right;
}
.reg-form ul li .inp {
width: 242px;
height: 37px;
border: 1px solid #CCCCCC;
}
.error {
font-size: 14px;
color: #C81532;
}
.error_icon, .success_icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
}
.success {
color: green;
font-size: 14px;
}
.success_icon {
background: url(../images/success.png) no-repeat;
}
.error_icon {
background: url(../images/error.png) no-repeat;
}
.safe {
padding-left: 170px;
}
.safe em {
padding: 0 12px;
color: #FFFFFF;
}
.ruo {
background-color: #C81623;
}
.zhong {
background-color: #008000;
}
.qiang {
background-color: darkorange;
}
.agree {
padding-left: 95px;
}
.agree input {
vertical-align: middle;
}
.agree a {
color: #449FDB;
}
.btn {
width: 200px;
height: 34px;
background-color: #C81623;
color: #FFFFFF;
margin: 30px 0 0 70px;
}
.mod_copyright {
text-align: center;
padding-top: 20px;
}
.links {
margin-bottom: 15px;
}
.links a {
margin: 0 3px;
}
.copyright {
line-height: 20px;
}
list.css
/* 列表页专有的CSS */
.nav {
overflow: hidden;
}
.sk {
position: absolute;
left: 184px;
top: 40px;
border-left: 1px solid #b1191a;
padding: 3px 0 3px 12px;
}
.sk_hd {
height: 50px;
background-color: #CCCCCC;
margin: 30px 0px;
}
.sk_list {
float: left;
}
.sk_list ul li {
float: left;
}
.sk_list ul li a {
display: block;
padding: 10px 30px;
font-size: 16px;
font-weight: 700;
color: #000;
}
.sk_con {
float: left;
margin-left: 10px;
}
.sk_con ul li {
float: left;
}
.sk_con ul li a {
display: block;
padding: 15px 22px;
font-style: 14px;
}
.sk_con ul li:last-child a::after {
font-family: 'icomoon';
content: '\e91e'
}
/* 列表页主体sk_container */
.sk_container {
margin-top: 25px;
margin-bottom: 80px;
}
.sk_container ul li {
float: left;
margin-right: 16px;
width: 288px;
height: 454px;
border: 1px solid transparent;
}
.sk_bd ul li:hover {
border: 1px solid #c81523;
}
.sk_bd ul li:nth-child(4n) {
margin-right: 0;
}
.sk_box img {
height: 300px;
}
.sk_box p {
color: #777;
font-size: 14px;
padding-left: 12px;
margin-bottom: 15px;
}
.sk_box h4 {
color: #777;
font-size: 14px;
font-weight: 400;
padding-left: 12px;
}
.sk_box .now {
color: #e60012;
font-size: 22px;
font-weight: 700;
padding-left: 12px;
}
.sk_box .bf {
color: #a4a4a4;
font-size: 14px;
font-weight: 700;
text-decoration: line-through;
}
.sk_box .jdt {
font-size: 12px;
color: #777;
padding-left: 12px;
}
.jdt span {
color: #ff0000;
}
.bar {
display: inline-block;
width: 130px;
height: 12px;
border: 1px solid #ed282e;
border-radius: 7px;
padding: 1px;
margin: 0 10px;
}
.bar_in {
width: 50%;
height: 100%;
border-radius: 7px;
background-color: red;
transition: width 0.5s;
}
.bar:hover .bar_in {
width: 100%;
}
.sk_box a {
display: block;
text-decoration: none;
margin-top: 5px;
width: 288px;
height: 50px;
background-color: #b1191a;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
}
cart.css
.shopcar-gwc {
position: absolute;
top: 34px;
left: 189px;
font-size: 20px;
font-weight: 600;
}
.cart-filter-bar span {
width: 74px;
height: 32px;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid #E2231A;
padding: 5px;
/*向内挤出5px，留出上下左右的缝隙，其实可以只给padding-bottom，在此效果相同*/
color: #E2231A;
;
}
.cart-thead {
margin-top: 4px;
height: 32px;
line-height: 32px;
background-color: #f3f3f3;
padding: 5px 0;
/*从内部撑开上下的5px*/
}
.cart-thead .t-checkbox {
width: 118px;
padding-left: 15px;
}
.cart-thead .t-goods {
width: 400px;
}
.cart-thead .t-price {
width: 130px;
text-align: right;
padding-right: 30px;
}
.cart-thead .t-num {
width: 150px;
text-align: center;
}
.cart-thead .t-sum {
width: 100px;
text-align: right;
}
.cart-thead .t-action {
width: 130px;
text-align: right;
}
.cart-item {
margin-top: 20px;
}
.cart-item .p-checkbox {
width: 46px;
height: 25px;
}
.cart-item .p-goods {
width: 565px;
height: 92px;
}
.cart-item .p-price {
width: 110px;
height: 18px;
}
.cart-item .p-num {
width: 170px;
height: 22px;
}
.cart-item .p-sum {
width: 145px;
height: 18px;
}
.cart-item {
height: 160px;
}
.p-goods-hd {
height: 87px;
width: 87px;
padding: 5px;
border: 1px solid #ccc;
}
.p-goods-hd img {
width: 100%;
height: 100%;
}
.p-goods-bd {
padding-left: 10px;
vertical-align: middle;
}
.cart-item {
padding-top: 20px;
/*发现设置完边框以后，挤在一起了，内部用padding*/
border-style: solid;
border-width: 2px 1px 1px;
border-color: #aaa #f1f1f1 #f1f1f1;
}
.p-checkbox {
padding-left: 15px;
}
.p-sum {
font-weight: 600;
}
.p-num .itxt {
float: left;
width: 46px;
border: 1px solid #cacbcb;
height: 18px;
text-align: center;
font-size: 12px;
font-family: verdana;
color: #333;
margin-left: -1px;
/*由于左右a与中间的input均有边框，因此中间input左右边框为2px，只想要1px，因此通过margin -1，左移，右移，盖住多余的1px*/
margin-right: -1px;
outline: none;
}
.p-num .increment, .p-num .decrement {
/*行内转为块，给宽高*/
/* display: inline-block; */
float: left;
width: 16px;
height: 18px;
border: 1px solid #cacbcb;
text-align: center;
}
.cart-item-last {
margin-top: 20px;
margin-bottom: 80px;
width: 1200px;
height: 52px;
line-height: 52px;
border: 1px solid #f0f0f0;
}
.remove-all {
font-weight: 600;
}
.remove-checked {
width: 120px;
text-align: right;
}
.remove-all {
width: 150px;
text-align: center;
}
.amount-sum span {
color: #E2231A;
padding: 0 5px;
font-weight: 800;
}
.price-sum span {
font-size: 16px;
color: #E2231A;
font-weight: 600;
padding-left: 8px;
/*没有宽度随便给padding*/
}
.price-sum {
margin: 0 15px 0;
}
.btn-area {
width: 94px;
height: 52px;
background-color: #e54346;
font-size: 18px;
font-weight: 800;
text-align: center;
line-height: 52px;
font-family: "Microsoft YaHei";
}
.btn-area a {
color: #fff;
}
.check-cart-item {
background-color: #fff4e8;
}
静态页面效果
1-首页 index.html
2-注册页面-register.html
3-手机热卖页面-list.html
4-购物车页面 -cart.html
(文字居中对齐上还存在一些问题）
四、JS部分
注：js部分目前只有 首页的轮播图效果、购物车的全选、商品数量的增减以及删除、清空购物车。 附上js文件目录
五、总结
favicon:浏览器搜 bitbug fonts ：icomoon href 不跳转 建议写成 javascript:;
链接：https://pan.baidu.com/s/1HXBWpKRMWuZFIf7Y3LigKA?pwd=bjqy 提取码：bjqy