目录
一、登录页部分
登录页代码展示及网页展示
（1）代码展示
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 主页注意tdk -->
<!-- title:网站名—网站介绍 -->
<title>品优购登录页</title>
<!-- 连接我们的初始化样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 连接我们的公共样式 -->
<link rel="stylesheet" href="css/common.css">
<!-- 连接我们的登录样式 -->
<link rel="stylesheet" href="css/login.css">
<!-- 引用我们的favicon图标 -->
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<!-- header头部模块 start -->
<header>
<div class="w">
<!-- logo模块 h1>a href:index.html title:品优购>品优购 -->
<div class="logo">
<h1><a href="index.html" title="品优购商城-专业的综合网上购物商城">品优购商城</a></h1>
</div>
</div>
</header>
<!-- header头部模块 end -->
<div class="login_banner">
<div class="w">
<div class="login">
<section class="tlogin">
<a href="#" class="left">扫码登录</a>
<a href="#" class="right">账号登录</a>
</section>
<p>公共场所不建议自动登录，以免账号丢失</p>
<div class="inp">
<img src="imagedl/zh.jpg" alt="">
<input type="email" placeholder="邮箱/用户名/手机号">
</div>
<div class="inp">
<img src="imagedl/pw.jpg" alt="">
<input type="password" placeholder="请输入密码">
</div>
<span class="aufo"><i class="auto"><i class="imgdui"></i>自动登录</i><i class="forget">忘记密码？</i></span>
<button>登录</button>
<span class="bottom"><img src="imagedl/logo.png" alt=""><a href="regist.html">立即注册</a></span>
</div>
</div>
</div>
<!-- footer页尾模块 start -->
<div class="footer w">
<!-- 版权模块 -->
<div class="footer_copyright">
<div class="links">
<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>
<li><a href="#">品优购公益</a>|</li>
<li><a href="#">English Site</a>|</li>
<li><a href="#">Contact U</a></li>
</ul>
</div>
<div class="copyright">
<p>
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:
zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
<!-- footer页尾模块 end -->
</body>
</html>CSS部分：
.login_banner {
height: 450px;
background: url(../imagedl/bigbg.png) no-repeat;
}
.login_banner .w {
position: relative;
height: 450px;
}
.login_banner .w .login {
position: absolute;
right: 0;
top: 225px;
margin-top: -182.5px;
padding: 15px 35px;
width: 380px;
height: 365px;
background-color: #fff;
}
.login_banner .w .login .tlogin a {
display: inline-block;
width: 150px;
height: 35px;
font-size: 18px;
color: #6D6D6D;
line-height: 35px;
}
.login_banner .w .login .tlogin a:hover {
color: #CF3B42;
}
.login_banner .w .login .tlogin .left {
padding-left: 10px;
text-align: left;
}
.login_banner .w .login .tlogin .right {
padding-right: 10px;
text-align: right;
}
.login_banner .w .login p {
margin-top: 20px;
margin-left: 15px;
}
.login_banner .w .login .inp {
overflow: hidden;
width: 300px;
height: 40px;
margin-top: 17px;
border: 1px solid #D6D6D6;
}
.login_banner .w .login .inp:hover {
border: 1px solid #A8D7F4;
}
.login_banner .w .login .inp img {
float: left;
width: 38px;
height: 38px;
vertical-align: top;
}
.login_banner .w .login .inp input {
float: left;
width: 260px;
height: 38px;
color: #B4B4B4;
line-height: 40px;
padding-left: 10px;
}
.login_banner .w .login .aufo {
display: block;
height: 20px;
width: 300px;
margin-top: 20px;
line-height: 20px;
}
.login_banner .w .login .aufo .auto {
float: left;
height: 20px;
color: #B4B4B4;
}
.login_banner .w .login .aufo .auto .imgdui {
display: inline-block;
height: 15px;
width: 15px;
border: 1px solid #B4B4B4;
vertical-align: middle;
margin-top: -2px;
margin-right: 3px;
background: url(../imagedl/dui.png) no-repeat center center;
cursor: pointer;
}
.login_banner .w .login .aufo .forget {
float: right;
margin-right: 3px;
color: #353535;
cursor: pointer;
}
.login_banner .w .login button {
width: 300px;
height: 40px;
margin-top: 15px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #fff;
background-color: #CA111A;
}
.login_banner .w .login .bottom {
display: block;
width: 300px;
height: 54px;
margin-top: 14px;
}
.login_banner .w .login .bottom img {
float: left;
}
.login_banner .w .login .bottom a {
float: right;
height: 54px;
margin-right: 2px;
line-height: 50px;
font-size: 14px;
color: #086FAA;
}（2）网页展示
二、产品详情页部分
产品详情页页代码展示及网页展示
（1）代码展示
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 主页注意tdk -->
<!-- title:网站名—网站介绍 -->
<title>产品详情页品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- description:网站说明 -->
<meta name="description"
content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<!-- keywords：关键词 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
<!-- 连接我们的初始化样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 连接我们的公共样式 -->
<link rel="stylesheet" href="css/common.css">
<!-- 连接我们的列表页页样式 -->
<link rel="stylesheet" href="css/detail.css">
<!-- 引用我们的favicon图标 -->
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<!-- shortcut快捷导航栏 start -->
<div class="shortcut w">
<!-- 左部模块 -->
<div class="fl">
<h6 class="fl">品优购欢迎您！ </h6>
<p class="fl"><a href="login.html"> 请登录 </a><a href="regist.html" class="font-red"> 免费注册</a></p>
</div>
<!-- 右部模块 -->
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li></li>
<li class="bottomicon"><a href="#">我的品优购</a></li>
<li></li>
<li><a href="#">品优购会员</a></li>
<li></li>
<li><a href="#">企业采购</a></li>
<li></li>
<li class="bottomicon"><a href="#">关注品优购</a></li>
<li></li>
<li class="bottomicon"><a href="#">客户服务</a></li>
<li></li>
<li class="bottomicon"><a href="#">网址导航</a></li>
</ul>
</div>
</div>
<!-- shortcut快捷导航栏 end -->
<!-- header头部模块 start -->
<header>
<div class="w">
<!-- logo模块 h1>a href:index.html title:品优购>品优购 -->
<div class="logo">
<h1><a href="index.html" title="品优购商城-专业的综合网上购物商城">品优购商城</a></h1>
</div>
<!-- search搜索模块 -->
<div class="search">
<input type="search" placeholder="语言开发">
<button>搜索</button>
</div>
<!-- hotwords热词模块 -->
<div class="hotwords">
<ul>
<li><a href="#" class="font-red">优惠购首发</a></li>
<li><a href="#">亿元优惠</a></li>
<li><a href="#">9.9元团购</a></li>
<li><a href="#">美满99减30</a></li>
<li><a href="#">办公用品</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">通信</a></li>
</ul>
</div>
<!-- shopcar购物车模块 -->
<div class="shopcar">
<a href="#">
我的购物车
<i>8</i>
</a>
</div>
</div>
</header>
<!-- header头部模块 end -->
<!-- nav导航栏模块 start -->
<div class="nav">
<div class="w">
<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>
<dd><a href="#">团购</a></dd>
<dd><a href="#">拍卖</a></dd>
<dd><a href="#">有趣</a></dd>
</dl>
</div>
</div>
<!-- nav导航栏模块 end -->
<!-- main主要模块 start -->
<div class="main w">
<!-- top模块 -->
<div class="top">
<i>手机、数码、通讯</i>
<i>手机</i>
<i>pple苹果</i>
<span>iphone 6S Plus系类</span>
</div>
<!-- left模块 -->
<div class="left fl">
<div class="bigimg"><img src="uploadcp/mainbig.png" alt=""></div>
<div class="image"><span><img src="uploadcp/main1png.png" alt="" class="img1"></span>
<img src="uploadcp/main2.png" alt="" class="img2">
</div>
<div class="text">商品编号：0468256644<a href="#" class="share">分享</a>
<a href="#" class="heart">关注 5000</a><i class="cmp"><input type="checkbox">对比</i>
</div>
</div>
<!-- right模块 -->
<div class="right fl">
<h3>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
<p class="com">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
<div class="jc">
<!-- 价格和促销模块 -->
<dl>
<dt>价 格</dt>
<dd class="jg tw">
<span class="le">
<i>￥</i>
<i class="num">5299.00</i>
降价通知
</span>
<span class=ri>
累计评价<i>612188</i>
</span>
</dd>
</dl>
<dl>
<dt class="cxl lh">促 销</dt>
<dd class="cx tw">
<p>
<span>
加价购
</span>
满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品 详情 》
</p>
</dd>
</dl>
<!-- <tr>
<td>价 格</td>
<td class="jg tw">
<span class="le">
<i>￥</i>
<i class="num">5299.00</i>
降价通知
</span>
<span class=ri>
累计评价<i>612188</i>
</span>
</td>
</tr>
<tr>
<td class="lh">促 销</td>
<td class="cx tw">
<p>
<span>
加价购
</span>
满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品 详情 》
</p>
</td>
</tr> -->
</div>
<div class="select">
<dl>
<dt>支 持</dt>
<dd class="zc tw">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</dd>
</dl>
<dl class="psl">
<dt class="pst lh">配 送 至</dt>
<dd class="ps tw">
<span>
<p>
<i class="addr">北京海淀区中关</i>
<i class="da"> 有货 支持 99元免运费 |货到付款 |211限时达</i>
</p>
由自营发货，并提供售后服务。11:00前完成下单，预计<strong>今天（08月10日）送达</strong>
</span>
</dd>
</dl>
<dl class="h_40">
<dt>选择颜色</dt>
<dd class="color tw">
<a href="#">金色</a>
<a href="#">银色</a>
<a href="#">黑色</a>
<a href="#">玫瑰金</a>
</dd>
</dl>
<dl>
<dt>选择版本</dt>
<dd class="bb tw">
<a href="#">公开版</a>
<a href="#">移动4G</a>
</dd>
</dl>
<dl>
<dt>选择容量</dt>
<dd class="rr tw">
<a href="#">16GB</a>
<a href="#">64GB</a>
<a href="#">128GB</a>
</dd>
</dl>
<dl>
<dt>购买方式</dt>
<dd class="fs tw">
<a href="#">官方标配</a>
<a href="#">移动优惠购</a>
<a href="#">电信优惠购</a>
</dd>
</dl>
<dl>
<dt>套 装</dt>
<dd class="tz tw">
<a href="#">保护套装</a>
<a href="#">充电套装</a>
</dd>
</dl>
<dl class="jiesuan">
<dd>
<div class="numbox">
<li class="one">
1
</li>
<li class="jj">
<i href="#">+</i>
<i href="#" class="nob">-</i>
</li>
</div>
</dd>
<dd class="car">
加入购物车
</dd>
</dl>
</div>
</div>
</div>
<!-- main主要模块 end -->
<!-- introduce模块 start -->
<div class="introduce w">
<!-- 左边部分 -->
<section class="left fl">
<div class="le_hd">
<ul>
<li><a href="#">相关分类</a></li>
<li><a href="#">推荐品牌</a></li>
</ul>
</div>
<div class="le_bd">
<ul class="fenlei">
<li><a href="#">手机</a></li>
<li><a href="#">手机壳</a></li>
<li><a href="#">内存卡</a></li>
<li><a href="#">iphone配件</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>
<p class="gomai">购买了此商品的用户还买了</p>
<ul class="buy">
<li><a href="#">
<div class="im">
<img src="uploadcp/l1.png" alt="">
</div>
<p>羽博 1000mah 双USB Y7移动插口</p>
<i>¥49</i>
<button>加入购物车</button>
</a></li>
<li><a href="#">
<div class="im">
<img src="uploadcp/l2.png" alt="">
</div>
<p>蓝孩 苹果iPone6S 抗蓝光防爆手机</p>
<i>¥5999</i>
<button>加入购物车</button>
</a></li>
<li><a href="#">
<div class="im">
<img src="uploadcp/l3.png" alt="">
</div>
<p>半岛铁盒 移动电源Q1 5000mAh </p>
<i>¥49</i>
<button>加入购物车</button>
</a></li>
<li><a href="#">
<div class="im">
<img src="uploadcp/l1.png" alt="">
</div>
<p>羽博 1000mah 双USB Y7移动插口</p>
<i>¥49</i>
<button>加入购物车</button>
</a></li>
<li><a href="#">
<div class="im">
<img src="uploadcp/l2.png" alt="">
</div>
<p>蓝孩 苹果iPone6S 抗蓝光防爆手机</p>
<i>¥5999</i>
<button>加入购物车</button>
</a></li>
<li><a href="#">
<div class="im">
<img src="uploadcp/l3.png" alt="">
</div>
<p>半岛铁盒 移动电源Q1 5000mAh </p>
<i>¥49</i>
<button>加入购物车</button>
</a></li>
</ul>
</div>
</section>
<!-- 右边部分 -->
<section class="right fl">
<div class="dapei">
<div class="dp_hd">
<h3>选择搭配</h3>
</div>
<div class="dp_bd">
<div class="left fl">
<ul class="tab">
<li><a href="#">精品</a></li>
<li><a href="#">iphone配件</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="#">U盘</a></li>
</ul>
<ul class="img">
<li><a href="#">
<div class="imga"><img src="uploadcp/opt1.png" alt=""></div>
<p>¥5299.00</p>
</a></li>
<li class="jia">+</li>
<li><a href="#">
<div class="imga"><img src="uploadcp/opt2.png" alt=""></div>
<i>Fesless费勒斯VR眼镜</i>
<p><input type="checkbox">¥39</p>
</a></li>
<li><a href="#">
<div class="imga"><img src="uploadcp/opt3.png" alt=""></div>
<i>ROCK洛克VR眼镜虚...</i>
<p><input type="checkbox">¥39</p>
</a></li>
<li><a href="#">
<div class="imga"><img src="uploadcp/opt4.png" alt=""></div>
<i>Faseyes爱易思...</i>
<p><input type="checkbox">¥39</p>
</a></li>
<li><a href="#">
<div class="imga"><img src="uploadcp/opt5.png" alt=""></div>
<i>Faseyes爱易思懒人...</i>
<p><input type="checkbox">¥39</p>
</a></li>
</ul>
</div>
<div class="right fl">
<ul>
<li>
<p>已选够0件搭配</p>
</li>
<li class="ma10"><strong>套餐价：</strong></li>
<li class="ma10"><span><i>¥</i>5299.00</span></li>
<li class="casp"><i class="car">加入购物车</i></li>
</ul>
</div>
</div>
</div>
<div class="jieshao">
<div class="js_hd">
<ul>
<li><a href="#">商品介绍</a></li>
<li><a href="#">规格与包装</a></li>
<li><a href="#">售后保障</a></li>
<li><a href="#">商品评价（50000）</a></li>
<li><a href="#">手机社区</a></li>
</ul>
</div>
<div class="js_bd">
<ul>
<li>分辨率：1920*1080(FHD)</li>
<li>后置摄像头：1200万像素</li>
<li>前置摄像头：500万像素</li>
<li>核 数：其他</li>
<li>频 率：以官网信息为准</li>
<li>品牌： Apple ♥关注</li>
<li>商品名称：APPLEiPhone 6s Plus</li>
<li>商品编号：1861098</li>
<li>商品毛重：0.51kg</li>
<li>商品产地：中国大陆</li>
<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
<li>系统：苹果（IOS）</li>
<li>像素：1000-1600万</li>
<li>机身内存：64GB</li>
<li>查看更多参数</li>
</ul>
</div>
</div>
<div class="bigimg">
<div class="img1"><img src="uploadcp/big1.png" alt=""></div>
<div class="img2"><img src="uploadcp/big2.png" alt=""></div>
</div>
</section>
</div>
<!-- introduce模块 start -->
<!-- footer页尾模块 start -->
<div class="footer w">
<!-- 服务模块 -->
<div class="footer_service">
<ul>
<li>
<div class="licon i1"></div>
<h3>正品保障</h3>
<p>正品保障，提供发票</p>
</li>
<li>
<div class="licon i2"></div>
<h3>极速物流</h3>
<p>极速物流，极速到达</p>
</li>
<li>
<div class="licon i3"></div>
<h3>无忧售后</h3>
<p>7天无理由退换货</p>
</li>
<li>
<div class="licon i4"></div>
<h3>特色服务</h3>
<p>私人订制家电套餐</p>
</li>
<li>
<div class="licon i5"></div>
<h3>帮助中心</h3>
<p>您的购物指南</p>
</li>
</ul>
</div>
<!-- 帮助模块 -->
<div class="footer_help">
<ul>
<li>
<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>
<dd><a href="#">联系客服</a></dd>
</li>
<li>
<dt>配送方式</dt>
<dd><a href="#">上门自提</a></dd>
<dd><a href="#">211限时达</a></dd>
<dd><a href="#">配送服务查询</a></dd>
<dd><a href="#">配送费收取标准</a></dd>
<dd><a href="#">海外配送</a></dd>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<dt>帮助中心</dt>
<img src="images/ma.png" alt="">
<dd><a href="#">品优购客户端</a></dd>
</li>
</ul>
</div>
<!-- 版权模块 -->
<div class="footer_copyright">
<div class="links">
<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>
<li><a href="#">品优购公益</a>|</li>
<li><a href="#">English Site</a>|</li>
<li><a href="#">Contact U</a></li>
</ul>
</div>
<div class="copyright">
<p>
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:
zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
<!-- footer页尾模块 end -->
</body>
</html>CSS部分：
/* 导航栏部分 h45*/
.nav dl dt,
.nav dl dd {
float: left;
text-align: center;
font-size: 16px;
}
.nav dl dt {
width: 210px;
color: #fff;
background-color: #B1191A;
}
.nav dl dd {
padding: 0 26px;
}
.nav dl dd:first-of-type {
margin-left: 20px;
}
/* main主要模块 */
.main {
height: 600px;
margin-top: 25px;
}
/* top模块 */
.top {
height: 20px;
font-size: 12px;
}
.top i::after {
content: '\e920';
font-size: 13px;
padding: 0 10px;
font-family: 'icomoon';
}
/* left模块 */
.main .left {
height: 580px;
width: 410px;
}
.main .left .bigimg {
height: 400px;
line-height: 400px;
text-align: center;
}
.main .left .image {
margin-top: 35px;
height: 60px;
line-height: 60px;
}
.main .left .image span {
display: inline-block;
width: 60px;
height: 60px;
border: 1px solid transparent;
text-align: center;
}
.main .left .image span:hover {
border: 1px solid #B1191A;
}
/* 字体图标记得对齐 */
.main .left .image::before,
.image::after {
content: '\e91f';
font-family: 'icomoon';
vertical-align: middle;
font-size: 45px;
color: #DDDDDD;
cursor: pointer;
}
.main .left .image::after {
content: '\e920';
}
.main .left .text {
margin-top: 25px;
}
.main .left .text a {
margin-left: 30px;
}
.main .left .text .share::before,
.heart::before {
display: inline-block;
content: '';
width: 15px;
height: 12px;
vertical-align: middle;
background: url(../imagecp/share.png) no-repeat;
}
.main .left .text .heart::before {
background: url(../imagecp/heart.png) no-repeat;
}
.main .left .text .cmp {
margin-left: 40px;
}
.main .left .text .cmp input {
vertical-align: middle;
}
/* right部分 */
.main .right {
width: 720px;
height: 580px;
margin-left: 30px;
}
.main .right h3 {
font-size: 16px;
color: #4F4F4F;
}
.main .right .com {
font-size: 12px;
color: #E1282D;
margin-top: 15px;
}
.main .right dl {
height: 35px;
}
.main .right dd,
.right dt {
float: left;
}
.main .right dd {
font-size: 12px;
}
.main .right dt {
width: 70px;
height: 35px;
line-height: 35px;
text-align: center;
}
.main .right .lh {
vertical-align: top;
line-height: 30px;
}
.main .right .tw {
width: 650px;
text-align: left;
}
/* 价格和促销模块 */
.main .right .jc {
height: 115px;
background-color: #FEE9EB;
margin-top: 20px;
}
/* 价格模块 */
.main .right .jc .jg {
overflow: hidden;
height: 35px;
}
/* 左部分 */
.main .right .jc .jg .le {
float: left;
font-size: 12px;
color: #CE2F3B;
}
.main .right .jc .jg .le i {
font-size: 16px;
color: #E1262C;
}
.main .right .jc .jg .le .num {
font-size: 24px;
}
/* 右部分 */
.main .right .jc .jg .ri {
float: right;
margin-right: 10px;
}
.main .right .jc .jg .ri i {
color: #3082B6;
}
/* 促销模块 */
.main .right .jc .cx {
vertical-align: top;
padding-right: 95px;
height: 80px;
}
.main .right .jc .cxl {
height: 80px;
}
.main .right .jc .cx p {
margin-top: 0;
line-height: 30px;
color: #A3A1A1;
}
.main .right .jc .cx p span {
display: inline-block;
width: 40px;
height: 23px;
line-height: 23px;
text-align: center;
vertical-align: middle;
color: #fff;
background-color: #C81623;
}
/* 选择模块 */
.main .right .select {
height: 470px;
}
.main .right .select a {
display: inline-block;
text-align: center;
color: #4F4F4F;
border: 1px solid transparent;
}
.main .right .select a:hover {
border: 1px solid #B1191A;
}
/* 支持模块 */
.main .right .select .zc {
height: 35px;
line-height: 35px;
color: #A3A1A1;
}
/* 配送模块 */
.main .right .select .psl {
height: 80px;
}
.main .right .select .pst {
height: 80px;
}
.main .right .select .ps {
height: 80px;
padding-right: 110px;
line-height: 30px;
color: #A3A1A1;
}
.main .right .select .ps span p .addr::after,
.da::after {
content: '\e91e';
padding: 0 2px;
font-size: 15px;
vertical-align: middle;
font-family: 'icomoon';
}
.main .right .select .ps span p .da::after {
padding-left: 20px;
}
/* 颜色模块 */
.main .right .select .h_40 {
height: 40px;
}
.main .right .select .h_40 dt,
.h_40 dd {
height: 40px;
line-height: 40px;
}
.main .right .select .color a {
width: 85px;
height: 40px;
}
/* 版本模块 */
.main .right .select .bb a {
width: 65px;
height: 35px;
line-height: 35px;
}
/* 容量模块 */
.main .right .select .rr a {
width: 65px;
height: 35px;
line-height: 35px;
}
/* 购买方式模块 */
.main .right .select .fs a {
width: 80px;
height: 35px;
line-height: 35px;
}
/* 套装模块 */
.main .right .select .tz a {
width: 80px;
height: 35px;
line-height: 35px;
}
/* 结算模块 */
.main .right .select .jiesuan {
width: 205px;
height: 45px;
margin-top: 20px;
margin-left: 13px;
}
.main .right .select .jiesuan dd .numbox {
width: 50px;
height: 45px;
border: 1px solid #A3A1A1;
}
.main .right .select .jiesuan dd .numbox li {
float: left;
}
.main .right .select .jiesuan dd .numbox .one {
width: 35px;
height: 45px;
text-align: center;
line-height: 45px;
}
.main .right .select .jiesuan dd .numbox .jj {
width: 13px;
height: 44px;
border-left: 1px solid #A3A1A1;
}
.main .right .select .jiesuan dd .numbox .jj i {
display: block;
height: 22.5px;
line-height: 22.5px;
text-align: center;
border-bottom: 1px solid #A3A1A1;
cursor: pointer;
}
.main .right .select .jiesuan dd .numbox .jj .nob {
border-bottom: 0;
}
.main .right .select .jiesuan .car {
width: 145px;
height: 45px;
margin-left: 10px;
background-color: #C81623;
line-height: 45px;
text-align: center;
font-size: 18px;
color: #fff;
cursor: pointer;
}
/* introuduce模块 */
.introduce {
height: 2385px;
margin-top: 30px;
}
/* 左边部分 */
.introduce .left {
width: 210px;
height: 100%;
border: 1px solid #DDDDDD;
}
.introduce .left .le_hd {
height: 30px;
}
.introduce .left .le_hd ul li {
float: left;
}
.introduce .left .le_hd ul li a {
display: block;
width: 103px;
height: 30px;
color: #3A3A3A;
line-height: 30px;
text-align: center;
font-size: 12px;
border-left: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
.introduce .left .le_hd ul li:first-child a {
color: #C91D2A;
border: 0;
}
.introduce .left .le_bd {
height: 2355px;
}
.introduce .left .le_bd .fenlei {
height: 145px;
padding-left: 20px;
}
.introduce .left .le_bd .fenlei li {
float: left;
}
.introduce .left .le_bd .fenlei li a {
display: block;
width: 88px;
height: 29px;
color: #3A3A3A;
line-height: 29px;
}
.introduce .left .le_bd .gomai {
margin-top: 10px;
font-size: 14px;
text-align: center;
margin-right: 10px;
}
.introduce .left .le_bd .buy {
height: 2195px;
margin: 0 15px;
}
.introduce .left .le_bd .buy li a {
display: block;
width: 100%;
height: 225px;
margin-top: 13px;
border-bottom: 1px solid #E5E5E5;
}
.introduce .left .le_bd .buy li a .im {
height: 130px;
text-align: center;
line-height: 120px;
}
.introduce .left .le_bd .buy li a p {
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #3A3A3A;
}
.introduce .left .le_bd .buy li a i {
font-weight: 700;
}
.introduce .left .le_bd .buy li a button {
display: block;
width: 95px;
height: 30px;
margin: 5px auto;
color: #4F4F4F;
font-size: 16px;
line-height: 28px;
text-align: center;
border: 1px solid #DEDEDE;
}
/* 右边部分 */
.introduce .right {
width: 980px;
height: 100%;
margin-left: 10px;
}
.introduce .right .dapei {
height: 300px;
border: 1px solid #DDDDDD;
}
.introduce .right .dapei .dp_hd {
height: 40px;
border-bottom: 1px solid #DDDDDD;
}
.introduce .right .dapei .dp_hd h3 {
width: 90px;
height: 40px;
font-size: 12px;
font-weight: normal;
color: #fff;
line-height: 40px;
text-align: center;
background-color: #C81623;
}
.introduce .right .dapei .dp_bd {
height: 260px;
}
.introduce .right .dapei .dp_bd .left {
position: relative;
width: 805px;
height: 100%;
border-right: 1px solid #DDDDDD;
}
.introduce .right .dapei .dp_bd .left::after {
position: absolute;
content: '\e920';
font-family: 'icomoon';
top: 130px;
right: 0;
margin-top: -25px;
width: 25px;
height: 50px;
color: #fff;
font-size: 30px;
background-color: #DDDDDD;
}
.introduce .right .dapei .dp_bd .left .tab {
height: 30px;
}
.introduce .right .dapei .dp_bd .left .tab li {
float: left;
}
.introduce .right .dapei .dp_bd .left .tab li a {
display: block;
height: 30px;
line-height: 30px;
padding: 0 15px;
}
.introduce .right .dapei .dp_bd .left .img {
height: 230px;
margin-top: 20px;
}
.introduce .right .dapei .dp_bd .left .img li {
float: left;
width: 130px;
height: 175px;
margin: 0 10px;
}
.introduce .right .dapei .dp_bd .left .img li:first-child {
text-align: center;
}
.introduce .right .dapei .dp_bd .left .img li .imga {
width: 100%;
height: 130px;
border: 1px solid transparent;
line-height: 130px;
text-align: center;
}
.introduce .right .dapei .dp_bd .left .img li .imga:hover {
border: 1px solid #C81623;
}
.introduce .right .dapei .dp_bd .left .img li .imge img {
height: 110px;
}
.introduce .right .dapei .dp_bd .left .img li p {
color: #E12228;
}
.introduce .right .dapei .dp_bd .left .img li:first-child p {
font-size: 14px;
}
.introduce .right .dapei .dp_bd .left .img .jia {
width: 10px;
margin: 0;
height: 130px;
line-height: 130px;
text-align: center;
font-size: 14px;
}
.introduce .right .dapei .dp_bd .left i {
display: block;
width: 110px;
height: 15px;
white-space: nowrap;
overflow: hidden;
margin-bottom: 2px;
text-overflow: ellipsis;
color: #333333;
}
.introduce .right .dapei .dp_bd .left p input {
border-color: #4F4F4F;
vertical-align: middle;
margin-right: 3px;
}
.introduce .right .dapei .dp_bd .right {
width: 163px;
margin: 0;
padding: 40px 13px 0 13px;
}
.introduce .right .dapei .dp_bd .right ul .ma10 {
margin-top: 10px;
}
.introduce .right .dapei .dp_bd .right ul li span {
font-size: 24px;
color: #E12228;
}
.introduce .right .dapei .dp_bd .right ul li span i {
font-size: 16px;
padding-right: 3px;
}
.introduce .right .dapei .dp_bd .right ul .casp .car {
display: block;
width: 145px;
height: 45px;
margin-top: 30px;
background-color: #C81623;
line-height: 45px;
text-align: center;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.jieshao {
height: 380px;
margin-top: 20px;
}
.jieshao .js_hd {
height: 40px;
border: 2px solid #E4E4E4;
}
.jieshao .js_hd ul li {
float: left;
}
.jieshao .js_hd ul li a {
display: block;
height: 40px;
padding: 0 20px;
line-height: 40px;
text-align: center;
}
.jieshao .js_hd ul li:hover a {
background-color: #C81623;
color: #fff;
}
.jieshao .js_bd {
height: 340px;
padding: 20px 0 0 20px;
border-bottom: 2px solid #E4E4E4;
}
.jieshao .js_bd ul li {
line-height: 20px;
}
.jieshao .js_bd ul li:last-child {
float: right;
color: #333333;
font-weight: 700;
}
.jieshao .js_bd ul li:last-child::after {
content: '\e91e';
font-family: 'icomoon';
padding-left: 3px;
vertical-align: middle;
font-size: 15px;
color: #A3A1A1;
}
.bigimg {
height: 1685px;
text-align: center;
}
.introduce .bigimg .img1 {
margin: 0 auto;
width: 736px;
height: 777px;
}
.introduce .bigimg .img2 {
margin: 0 auto;
width: 748px;
height: 896px;
}（2）网页展示
结束语
HTML和CSS基础部分就告一段落了，先准备开JS基础部分，明天更新JS第一天的笔记
扫一扫
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
