html部分(包括了首页,登陆页面,手机详情页)
首页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div class="nav">
<div class="w">
<div class="left">品优购欢迎您!请登录 <a href="./regist.html" class="red">免费注册</a></div>
<div class="right">
<ul>
<li>我的订单</li>
<li>|</li>
<li>我的品优购</li>
<li>|</li>
<li>品优购会员</li>
<li>|</li>
<li>企业采购</li>
<li>|</li>
<li>关注品优购</li>
<li>|</li>
<li>客户服务</li>
<li>|</li>
<li>网站导航</li>
</ul>
</div>
</div>
</div>
<div class="search w">
<div class="left"><img src="./images/logo.png" alt=""></div>
<div class="middle">
<div class="top ">
<input type="text" value="语言开发">
<div class="hzi">搜索</div>
</div>
<div class="bottom">
<ul>
<li>优惠购首发</li>
<li>亿元优惠</li>
<li>传智超市</li>
<li>办公用品</li>
<li>全球购</li>
<li>电脑</li>
<li>通信</li>
</ul>
</div>
</div>
<div class="right">
<div class="car">我的购物车<div class="count">6</div>
</div>
</div>
</div>
<div class="nav2">
<div class="w">
<div class="left">
<div class="top">全部商品分类</div>
<div class="bottom">
<ul>
<li><a href="#">家用电器<span>></span></a></li>
<li><a href="./goods.html">手机、数码、通信<span>></span></a> </li>
<li><a href="#">电脑、办公<span>></span></a> </li>
<li><a href="#">家居、家具、家装、厨具<span>></span></a> </li>
<li><a href="#">男装、女装、童装、内衣<span>></span></a> </li>
<li><a href="#">个户化妆、清洁用品、宠物<span>></span></a> </li>
<li><a href="#">鞋靴、箱包、珠宝、奢侈品<span>></span></a> </li>
<li><a href="#">运动户外、钟表<span>></span></a> </li>
<li><a href="#">汽车、汽车用品<span>></span></a> </li>
<li><a href="#">母婴、玩具乐器<span>></span></a> </li>
<li><a href="#">食品、酒类、生鲜、特产<span>></span></a> </li>
<li><a href="#">医药保健<span>></span></a> </li>
<li><a href="#">图书、音像、电子书<span>></span></a> </li>
<li><a href="#">彩票、旅行、充值、票务<span>></span></a> </li>
<li><a href="#">理财、众筹、白条、保险<span>></span></a> </li>
</ul>
</div>
</div>
<div class="right">
<ul>
<li>服装城</li>
<li>美妆馆</li>
<li>传智超市</li>
<li>全球购</li>
<li>闪购</li>
<li>团购</li>
<li>拍卖</li>
<li>有趣</li>
</ul>
</div>
</div>
</div>
<div class="nav3 w">
<div class="left"><img src="../品优购/images/focus.jpg" alt=""></div>
<div class="right">
<div class="new">
<div class="word">
<div class="top">
<h4>品优购快报</h4>
<p> 更多 ></p>
</div>
<div class="bottom">
<ul>
<li><a href="#">【特惠】活旅行团购爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
</ul>
</div>
</div>
<div class="logo">
<ul>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
</ul>
</div>
</div>
<div class="pic"><img src="../品优购/images/bargain.jpg" alt=""></div>
</div>
</div>
<div class="nav4 w">
<div class="left">
<img src="../品优购/images/clock.png" alt="">
<p>今日推荐</p>
</div>
<div class="right">
<ul>
<li><img src="../品优购/images/pic.jpg" alt=""></li>
<li><img src="../品优购/images/pic.jpg" alt=""></li>
<li><img src="../品优购/images/pic.jpg" alt=""></li>
<li><img src="../品优购/images/pic.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="nav5 w">
<div class="top">
<h3>家用电器</h3>
<ul>
<li>热门</li>
<li>|</li>
<li>大家电</li>
<li>|</li>
<li>生活电器</li>
<li>|</li>
<li>厨房电器</li>
<li>|</li>
<li>个护健康</li>
<li>|</li>
<li>应季电器</li>
<li>|</li>
<li>大家电</li>
</ul>
</div>
<div class="bottom">
<div class="A">
<div class="top">
<ul>
<li>节能补贴</li>
<li>节能补贴</li>
<li>节能补贴</li>
<li>节能补贴</li>
<li>节能补贴</li>
<li>节能补贴</li>
</ul>
</div>
<div class="bottom"><img src="../品优购/images/floor-1-1.png" alt=""></div>
</div>
<div class="B"><img src="../品优购/images/floor-1-b01.png" alt=""></div>
<div class="C"><img src="../品优购/images/floor-1-2.png" alt=""><img src="../品优购/images/floor-1-3.png" alt="">
</div>
<div class="D"><img src="../品优购/images/floor-1-4.png" alt=""></div>
<div class="E"><img src="../品优购/images/floor-1-2.png" alt=""><img src="../品优购/images/floor-1-3.png" alt="">
</div>
</div>
</div>
<div class="footer">
<div class="w">
<div class="to">
<ul>
<li>
<i></i>
<h3>正品保障</h3>
<p>正品保障,提供发货</p>
</li>
<li>
<i></i>
<h3>正品保障</h3>
<p>正品保障,提供发货</p>
</li>
<li>
<i></i>
<h3>正品保障</h3>
<p>正品保障,提供发货</p>
</li>
<li>
<i></i>
<h3>正品保障</h3>
<p>正品保障,提供发货</p>
</li>
<li>
<i></i>
<h3>正品保障</h3>
<p>正品保障,提供发货</p>
</li>
</ul>
</div>
<div class="mi">
<dl class="lead">
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl class="lead">
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl class="lead">
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl class="lead">
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl class="lead">
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl class="ewm"><dl>
<dt>帮助中心</dt>
<dd><img src="../品优购/images/erweima.png" alt=""></dd>
</dl>
</dl>
</div>
<div class="bo">
<p>关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p>
<p>地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn</p>
<p>京ICP备08001421号京公网安备110108007702</p>
</div>
</div>
</div>
<div class="fixed"></div>
</body>
</html>
首页样式
* {
padding: 0;
margin: 0;
}
.w {
width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
color: black;
}
.red {
color: rgb(181, 59, 59);
}
li {
list-style: none;
}
/* 让盒子 里面的图片溢出隐藏 */
img {
overflow-clip-margin: content-box;
overflow: clip;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?dai5il');
src: url('fonts/icomoon.eot?dai5il#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?dai5il') format('truetype'),
url('fonts/icomoon.woff?dai5il') format('woff'),
url('fonts/icomoon.svg?dai5il#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.nav {
height: 40px;
background-color:#F1F1F1;
line-height: 40px;
font-size: 14px;
color: #515151;
}
.nav .w .left {
float: left;
}
.nav .w .right {
float: right;
}
.nav .w .right li {
float: left;
padding: 0 10px;
}
.nav .w .right li:nth-child(4)::before {
content: "\23f7";
font-family: 'icomoon';
margin-right: 4px;
}
.search {
padding: 30px 20px 30px 0;
box-sizing: border-box;
/* background-color: #ebc6c6; */
}
.search .left {
float: left;
width: 171px;
height: 61px;
}
.search .middle {
float: left;
width: 538px;
height: 61px;
margin-left: 100px;
/* background-color: pink; */
}
.search .middle .top {
width: 100%;
height: 32px;
box-sizing: border-box;
border: 2px solid rgb(181, 59, 59);
}
.search .middle input {
float: left;
border: 0;
height: 100%;
width: 440px;
color: #ccc;
box-sizing: border-box;
padding-left: 10px;
}
.search .middle .top .hzi {
float: left;
height: 100%;
width: 94px;
background-color: rgb(181, 59, 59);
color: white;
text-align: center;
line-height: 28px;
}
.search .middle .bottom li {
float: left;
font-size: 12px;
color: #666;
padding: 5px 15px;
}
.search .middle .bottom li:nth-child(1) {
color: rgb(181, 59, 59);
}
.search .right {
height: 61px;
}
.search .right .car {
position: relative;
float: right;
width: 140px;
height: 35px;
line-height: 31px;
text-align: center;
color: #666;
background-color: #f7f7f7;
border: 2px solid #dfdfdf;
}
.search .right .car::before {
content: "\1f386";
font-family: 'icomoon';
margin-right: 4px;
}
.search .right .car::after {
content: "\23f5";
font-family: 'icomoon';
margin-left: 4px;
}
.search .right .car .count {
position: absolute;
top: -6px;
right: 4px;
height: 14px;
width: auto;
text-align: center;
padding: 0 4px;
line-height: 14px;
font-size: 10px;
border-radius: 7px;
border-bottom-left-radius: 0;
background-color: red;
color: white;
}
.nav2 {
height: 47px;
border-bottom: 2px solid rgb(154, 44, 44);
}
.nav2 .w {
height: 100%;
line-height: 47px;
/* background-color: palegoldenrod; */
}
.nav2 .w .left {
float: left;
width: 210px;
/* border-top: 2px solid rgb(255, 255, 255); */
}
.nav2 .w .left .top {
height: 100%;
width: 210px;
text-align: center;
/* line-height: 47px; */
background-color: rgb(154, 44, 44);
color: rgb(255, 255, 255);
}
.nav2 .w .left .bottom {
width: 210px;
height: 465px;
box-sizing: border-box;
padding: 10px;
background-color: #c81623;
margin-top: 2px;
font-size: 14px;
}
.nav2 .w .left .bottom li {
height: 30px;
}
.nav2 .w .left .bottom li a {
position: relative;
display: block;
height: 30px;
width: 100%;
line-height: 30px;
color: white;
transition: all 0.5s;
}
.nav2 .w .left .bottom li a:hover {
color: red;
background-color: white;
margin-left: 4px;
}
.nav2 .w .left .bottom li a span {
position: absolute;
right: 0;
}
/* .nav2 .w .left .bottom li::after {
content: "\23f5";
font-family: 'icomoon';
margin-left: 30px;
} */
.nav2 .w .right li {
float: left;
margin: 0 25px;
font-size: 14px;
color: #666;
}
.nav3 {
width: 983px;
height: 455px;
/* background-color: palegoldenrod; */
margin-left: 350px;
margin-top: 10px;
}
.nav3 .left {
float: left;
/* margin-top: 10px; */
}
.nav3 .left img {
height: 100%;
margin-left: 10px;
}
.nav3 .right {
float: right;
height: 455px;
font-size: 14px;
}
.nav3 .right .new {
width: 250px;
height: 367px;
box-sizing: border-box;
/* background-color: pink; */
border: 1px solid #ccc;
}
.nav3 .right .new .word {
height: 150px;
border: 1px solid #ccc;
}
.nav3 .right .new .word .top {
padding: 0 25px;
box-sizing: border-box;
height: 34px;
line-height: 34px;
color: #666666;
border: 1px dotted #ccc;
}
.nav3 .right .new .word .top h4 {
float: left;
}
.nav3 .right .new .word .top p {
float: right;
}
.nav3 .right .new .word .bottom {
padding: 5px 10px;
}
.nav3 .right .new .word .bottom li a {
display: block;
margin-bottom: 2px;
color: #666;
}
.nav3 .right .new .word .bottom li a:nth-child(1) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav3 .right .new .logo {
position: relative;
overflow: hidden;
width: 250px;
}
.nav3 .right .new .logo li {
float: left;
width: 61px;
height: 71px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.nav3 .right .new .logo li:nth-child(n+9) {
border-bottom: 0px;
}
/* 给new加了overflow */
.nav3 .right .new .logo li:nth-child(4n) {
width: 63px;
}
.nav3 .right .new .logo li i {
display: block;
width: 24px;
height: 25px;
margin: 15px 15px 0px 18px;
/* text-align: center; */
background: url(../images/icons.png) no-repeat -17px -16px;
}
.nav3 .right .new .logo li p {
text-align: center;
color: #666666;
margin-top: 5px;
font-size: 12px;
margin-left: 15px;
}
.nav3 .right .pic {
margin-top: 12px;
}
.nav4 {
height: 163px;
margin-top: 15px;
background-color: #EBEBEB;
/* background-color: pink; */
}
.nav4 .left {
float: left;
width: 200px;
height: 100%;
padding-top: 30px;
box-sizing: border-box;
text-align: center;
background-color: #5C5251;
}
.nav4 .left p {
float: none !important;
font-size: 18px;
color: white;
margin-top: 15px;
}
.nav4 .right {
float: left;
width: 1000px;
height: 163px;
}
.nav4 .right li {
float: left;
margin-top: 10px;
margin-right: 1px;
border-right: 1px solid #ccc;
}
.nav4 .right li:nth-child(4) {
border-right: none;
}
.nav5 {
margin-top: 15px;
height: 390px;
}
.nav5 .top {
height: 30px;
/* background-color: palegoldenrod; */
border-bottom: 2PX solid #c81623;
}
.nav5 .top h3 {
float: left;
color: #c81623;
height: 30px;
line-height: 30px;
margin-left: 15px;
}
.nav5 .top li {
float: right;
line-height: 30px;
font-size: 14px;
color: #666;
margin: 0 12px;
}
.nav5 .bottom {
height: 360px;
}
.nav5 .bottom .A {
float: left;
height: 100%;
width: 209px;
padding: 15px;
box-sizing: border-box;
/* background-color: rgb(244, 247, 120); */
}
.nav5 .bottom .A .top {
height: 98px;
/* background-color: papayawhip; */
border: none;
padding-right: 18px;
padding-top: 5px;
}
.nav5 .bottom .A .top li {
margin: 0 0;
margin-left: 20px;
width: 60px;
text-align: center;
font-size: 12px;
border-bottom: 1px solid #ccc;
}
.nav5 .bottom .A .bottom img {
width: 179px;
margin-top: 10px;
}
.nav5 .bottom .B {
float: left;
width: 329px;
}
.nav5 .bottom .C {
float: left;
width: 219px;
height: 100%;
border-right: 1px solid #ccc;
/* background-color: purple; */
}
.nav5 .bottom .C img {
float: left;
/* box-sizing: border-box; */
border-bottom: 1px solid #ccc;
}
.nav5 .bottom .D {
float: left;
width: 220px;
height: 360px;
/* background-color: palegoldenrod; */
box-sizing: border-box;
border-bottom: 1px solid #ccc;
/* 这里???======================================================= */
border-right:1px solid #ccc;
}
.nav5 .bottom .D img {
width: 219px;
height: 359px;
transition: all 0.5s;
}
.nav5 .bottom .D img:hover {
margin-left: 4px;
}
.nav5 .bottom .E {
float: left;
width: 219px;
height: 360px;
}
.nav5 .bottom .E img {
/* width: 219px; */
float: left;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.footer {
height: 500px;
background-color: #F5F5F5;
}
.footer .to {
height: 150px;
width: 100%;
padding: 55px 0px;
box-sizing: border-box;
/* background-color: rgb(59, 227, 73); */
border-bottom: 1px solid #ccc;
}
.footer .to ul {
margin-left: 50px;
}
.footer .to li {
float: left;
width: 200px;
margin-right: 30px;
}
.footer .to li i {
float: left;
display: block;
width: 49px;
height: 49px;
margin-right: 10px;
background: url(../images/icons.png) no-repeat -253px -3px;
}
.to h3,
p {
float: left;
color: #666;
font-size: 16px;
}
.footer .to li p {
font-size: 14px;
}
.footer .mi {
height: 200px;
padding: 20px 80px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
/* background-color: palegoldenrod; */
}
.footer .mi .lead {
float: left;
margin-right: 100px;
color: #515151;
}
.footer .mi .lead dd {
font-size: 12px;
margin-top: 5px;
}
.footer .mi .ewm {
float: left;
color: #515151;
text-align: center;
width: 150px;
}
.footer .mi .ewm dd {
margin-top: 18px;
}
.footer .bo {
height: 70px;
padding: 30px 50px;
font-size: 12px;
text-align: center;
color: #515151;
/* background-color: pink; */
}
.footer .bo p {
width: 100%;
font-size: 12px;
color: #515151;
/* background-color: black; */
}
.footer .bo p:nth-child(1) {
margin-bottom: 10px;
}
.fixed {
position: fixed;
top: 400px;
left: 40px;
width: 200px;
height: 300px;
background-color: pink;
}