1号店登录页面
登录页面HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1号店登录页面</title>
<link rel="stylesheet" type="text/css" href="css/登录.css" />
</head>
<body>
<header>
<img src="img/logo.png" class="logo1" />
<div class="box">
您好，欢迎光临一号店！
<a href="登录.html">请登录</a>
<div class="box-logo">
<img src="img/runbun.png" class="logo2" />帮助中心
<img src="img/turnb.png" class="logo3" />
</div>
</div>
</header>
<article class="article">
<div class="logo-img">
<div class="login">
<h4>1号店用户登录</h4>
<a href="注册.html">注册账户</a>
<form action="首页.html" method="post">
<input class="text" type="text" placeholder="邮箱/手机/用户名" />
<input class="password" type="password" placeholder="密码" />
<input class="checkbox" type="checkbox" />自动登录
<a href="#" class="a">忘记密码？</a>
<input class="submit" type="submit" value="登录" />
</form>
<a href="#" class="ad">更多的合作网站账户登录</a>
<ul class="uli">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li class="A">
<a href="#">更多合作网站<img src="img/turnb.png" /></a>
</li>
</ul>
</div>
</div>
<footer>
<p>沪 | CP备13044278号 | 合字B1.B2-20130004 | 营业执照</p>
Copyright©1号店网上超市2007-2018,All Rights Reserved
</footer>
</article>
</body>
</html>
登录页面CSS样式
* {
margin: 0px;
padding: 0px;
}
header .logo1 {
margin-left: 100px;
}
header .box {
display: inline-block;
float: right;
font-size: 14px;
color: gray;
margin-top: 40px;
margin-right: 120px;
}
header .box-logo {
margin-left: 50px;
display: inline-block;
font-size: 14px;
color: black;
line-height: 28px;
border: 1px solid #CECECE;
}
a {
color: #237BD3;
text-decoration: none;
}
a:hover {
color: orangered;
}
header img {
vertical-align: middle;
}
.logo2 {
padding: 3px 4px 3px 5px;
}
.logo3 {
padding: 3px 3px 3px 1px;
width: 20px
}
.article {
height: 650px;
margin-top: 20px;
border-top: 1px solid #E8E8E8;
border-bottom: 1px solid #E8E8E8;
background-color: #FCFCFC;
}
.logo-img {
background: url(../img/loadimg.jpg)no-repeat;
height: 400px;
margin: 80px 0 -100px 100px;
}
.login {
color: gray;
font-size: 12px;
font-family: "small fonts", "微软雅黑";
float: right;
margin-right: 280px;
}
.login h4 {
display: inline-block;
margin-right: 130px;
}
.text {
margin-top: 10px;
vertical-align: middle;
border: 1px solid #BDBDBD;
width: 260px;
height: 45px;
text-indent: 3em;
font-size: 12px;
background-color: #FFFFFF;
display: block;
background: url(../img/userHead.png)12px 10px no-repeat;
}
.password {
margin-top: 20px;
vertical-align: middle;
border: 1px solid #BDBDBD;
width: 260px;
height: 45px;
text-indent: 3em;
font-size: 12px;
background-color: #FFFFFF;
display: block;
background: url(../img/lock.png) 10px 6px no-repeat;
}
.checkbox {
margin-top: 15px;
vertical-align: bottom;
margin-right: 5px;
margin-left: 5px;
}
.a {
color: gray;
margin-left: 135px;
}
.submit {
cursor: pointer;
display: block;
margin-bottom: 10px;
width: 260px;
height: 45px;
border: 1px solid #FF3C3C;
line-height: 45px;
background: #FF3C3C;
margin-top: 15px;
color: white;
}
.submit:hover {
background: #FA7676;
}
.ad {
font-size: 10px;
color: gray;
}
ul {
list-style: none;
}
.login li {
cursor: pointer;
display: inline-block;
margin: 10px -10px 0 0;
}
.A a {
font-size: 10px;
margin-left: 10px;
color: gray;
vertical-align: 32px;
}
.A img {
vertical-align: -4PX;
}
.A a:hover {
color: red;
}
footer {
text-align: center;
font-size: 12px;
color: gray;
margin-top: 240px;
}
footer p {
margin-bottom: 8px;
}
.uli li:nth-of-type(1) {
width: 50px;
height: 50px;
background: url(../img/l_1.png)no-repeat;
}
.uli li:nth-of-type(2) {
width: 50px;
height: 50px;
background: url(../img/l_2.png)no-repeat;
}
.uli li:nth-of-type(3) {
width: 50px;
height: 50px;
background: url(../img/l_3.png)no-repeat;
}
.uli li:nth-of-type(4) {
width: 50px;
height: 50px;
background: url(../img/l_4.png)no-repeat;
}
.uli li:nth-of-type(1):hover {
width: 50px;
height: 50px;
background: url(../img/l_1_h.png)no-repeat;
}
.uli li:nth-of-type(2):hover {
width: 50px;
height: 50px;
background: url(../img/l_2_h.png)no-repeat;
}
.uli li:nth-of-type(3):hover {
width: 50px;
height: 50px;
background: url(../img/l_3_h.png)no-repeat;
}
.uli li:nth-of-type(4):hover {
width: 50px;
height: 50px;
background: url(../img/l_4_h.png)no-repeat;
background: url(../img/l_4_h.png)no-repeat;
}
登录页面效果:
1号店注册页面
注册页面HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1号店注册页面</title>
<link rel="stylesheet" type="text/css" href="css/注册.css" />
</head>
<body>
<header>
<img src="img/logo.png" class="logo1" />
<div class="box">
您好，欢迎光临一号店！
<a href="登录.html">请登录</a>
<div class="box-logo">
<img src="img/runbun.png" class="logo2" />帮助中心
<img src="img/turnb.png" class="logo3" />
</div>
</div>
</header>
<article class="article">
<div class="box1">
<form action="登录.html" method="post">
<h2>1号店注册</h2>
<input type="tel" placeholder="手机号" class="input1" />
<input type="text" placeholder="验证码" class="input2" />
<input type="button" value="获取验证码" class="input3" />
<input type="password" placeholder="设置密码" class="input1" />
<input type="password" placeholder="确认密码" class="input1" />
<p>点击注册，表示您同意1号店
<a href="#">《服务协议》</a>
</p>
<input type="button" value="同意协议并注册" class="input4" />
</form>
</div>
<footer>
<p>沪 | CP备13044278号 | 合字B1.B2-20130004 | 营业执照</p>
Copyright©1号店网上超市2007-2018,All Rights Reserved
</footer>
</article>
</body>
</html>
注册页面CSS样式
* {
margin: 0px;
padding: 0px;
}
header .logo1 {
margin-left: 100px;
}
header .box {
display: inline-block;
float: right;
font-size: 14px;
color: gray;
margin-top: 40px;
margin-right: 120px;
}
header .box-logo {
margin-left: 50px;
display: inline-block;
font-size: 14px;
color: black;
line-height: 28px;
border: 1px solid #CECECE;
}
a {
text-decoration: none;
}
a:hover {
color: orangered;
}
header img {
vertical-align: middle;
}
.logo2 {
padding: 3px 4px 3px 5px;
}
.logo3 {
padding: 3px 3px 3px 1px;
width: 20px
}
.article {
height: 500px;
margin-top: 20px;
border-top: 1px solid #E8E8E8;
border-bottom: 1px solid #E8E8E8;
background-color: #FCFCFC;
}
.box1{
width: 260px;
margin: 0px auto;
text-align: center;
margin-top: 35px;
}
h2{
font-size: 18px;
margin-bottom: 15px;
}
.input1 {
border: 1px solid #E4E4E4;
width: 255px;
height: 40px;
margin-bottom: 10px;
font-size: 12px;
text-indent: 1.5em;
}
.input2{
border: 1px solid #E4E4E4;
width: 150px;
margin-left: 0;
height: 40px;
font-size: 12px;
margin-bottom: 10px;
text-indent: 1.5em;
}
.input3{
cursor: pointer;
border: 1px solid #78777E;
background: #57565F;
color: white;
font-size: 12px;
border-radius: 3px;
height: 40px;
width: 100px;
}
.input3:hover{
background: gray;
}
.box1 p{
font-size: 10px;
color: gray;
margin-left: 10px;
float: left;
}
.input4{
margin-top: 10px;
cursor: pointer;
border: 1px solid #FE6262;
background: #FF3C3C;
color: white;
height: 40px;
width: 255px;
}
.input4:hover{
background: #FA7676;
}
footer{
text-align: center;
font-size: 10px;
color: gray;
margin-top: 20px;
}
footer p{
margin-bottom:8px;
}
注册页面效果:
首页HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/首页.css" />
</head>
<body>
<!--头部-->
<header>
<div class="nav">
<div class="nav1">
<span>
送货至:四川
</span>
<div class="nav2">
<div class="nav3">
<span>你好!<a href="登录.html">请登录</a></span>
<span>
<a href="注册.html" style="color: orangered;">免费注册</a>
|
<a href="注册.html">我的订单</a>
|
</span>
</div>
<ul class="ul">
<li class="li">
<a href="#">收藏夹</a>
</li>
<li class="li">
<a href="#">客户服务</a>
<div class="div_1">
<div>
<a href="#">客户服务</a>
</div>
<div>
<a href="#">客户服务</a>
</div>
<div>
<a href="#">客户服务</a>
</div>
</div>
</li>
<li class="li">
<a href="#">网站导航</a>
</li>
</ul>
<span class="span_1">
| <a href="#">关注我们：</a>
<span>
<a href="#"><img src="img/sh1.png" class="img1"/></a>
<a href="#"><img src="img/sh2.png" class="img2"/></a>
</span>
</span>
<span class="fr"> |
<a href="#">手机版
<img src="img/s_tel.png"style="vertical-align: -3px;"/>
</a>
</span>
</div>
</div>
</div>
<div class="div-box">
<div class="logo">
<a href="首页.html"><img src="img/logo.png" /></a>
</div>
<div class="input-box">
<form action="#" method="post">
<input class="input1" type="text" placeholder="请输入关键字" />
<input class="input2" type="submit" value="搜索" />
</form>
<div class="div-box2">
<ul>
<li>
<a href="#">咖啡</a>
</li>
<li>
<a href="#">iphone 6S</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="login">
<div class="div-login">
<a href="#">购物车</a>
</div>
</div>
</div>
</header>
<!--主体-->
<section class="section">
<div class="div-box3">
<div class="div-head">
<div class="h3">
全部商品分类
</div>
<ul class="div-ul">
<li>
<a href="首页.html" style="color: #FF4141;"><strong>首页</strong></a>
</li>
<li>
<a href="#" style="color: #FF4141;"><strong>自营超市</strong></a>
</li>
<li>
<a href="#"><strong>1号团</strong></a>
</li>
<li>
<a href="#"><strong>1号超市</strong></a>
</li>
<li>
<a href="#"><strong>女装</strong></a>
</li>
<li>
<a href="#"><strong>美妆</strong></a>
</li>
<li>
<a href="#"><strong>1号海购</strong></a>
</li>
<li>
<a href="#"><strong>团购</strong></a>
</li>
</ul>
<div class="img-logo">
<a href="#"><img src="img/phone.png" /></a>
</div>
</div>
</div>
<div class="div-box_1">
<ul>
<li>
<a href="#"><img src="img/nav1.png" class="logoin1" />进口食品、生鲜</a>
</li>
<li>
<a href="#"><img src="img/nav2.png" class="logoin2" />食品、饮料、酒</a>
</li>
<li>
<a href="#"><img src="img/nav3.png" class="logoin3" />母婴、玩具、童装</a>
</li>
<li>
<a href="#"><img src="img/nav4.png" class="logoin4" />家居、家庭清洁、纸品</a>
</li>
<li>
<a href="#"><img src="img/nav5.png" class="logoin5" />美妆、个人护理、洗护</a>
</li>
<li>
<a href="#"><img src="img/nav6.png" class="logoin6" />女装、内衣、中老年</a>
</li>
<li>
<a href="#"><img src="img/nav7.png" class="logoin7" />鞋靴、箱包、腕表配饰</a>
</li>
<li>
<a href="#"><img src="img/nav8.png" class="logoin8" />男装、运动</a>
</li>
<li>
<a href="#"><img src="img/nav9.png" class="logoin9" />手机、小家电、电脑</a>
</li>
<li>
<a href="#"><img src="img/nav10.png" class="logoin10" />礼品、充值</a>
</li>
</ul>
</div>
<div class="imgto">
<div class="img-box">
<img src="img/ban1.jpg" />
<ul class="noli">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<span class="left"><img src="img/b_left.png" style="width: 35px;height: 65px;"/></span>
<span class="right"><img src="img/b_right.png" style="width: 35px;height: 65px;" /></span>
</div>
<div class="new">
<div class="new_t">
<h3 class="ban">快讯</h3>
<span class="span_2"><a href="#">更多 ></a></span>
</div>
<ul class="ul-box">
<li><span>【特惠】</span>
<a href="#">掬一轮明月 表无尽惦念</a>
</li>
<li><span>【公告】</span>
<a href="#">好奇金装成长裤新品上市</a>
</li>
<li><span>【特惠】</span>
<a href="#">大牌闪购 · 抢！</a>
</li>
<li><span>【公告】</span>
<a href="#">发福利 买车就抢千元油卡</a>
</li>
<li><span>【公告】</span>
<a href="#">家电低至五折</a>
</li>
</ul>
<div class="charge_t">
<h3>1号钱包</h3>
</div>
<p style="margin: 5px 0 5px 12px; color: gray;">收益日结，收益赚High！</p>
<img src="img/oneAD.jpg" style="width: 230px; margin-left: 15px;" />
</div>
<div class="not_1">
<div class="not_2">
<div class="not_3">
<img src="img/l_img.jpg" />
<div class="div-listin">
<span class="span_3">￥53.00</span>
<span class="span_4">16R</span>
</div>
</div>
</div>
<div class="div-box4">
<ul>
<li><img src="img/hot1.jpg" />
<div class="name">
<a href="#">
<h2>德国进口</h2> 德亚全脂纯牛奶200ml*48盒
</a>
</div>
<div class="price">
<strong>￥<span>189</span></strong> 26R
</div>
</li>
<li><img src="img/hot2.jpg" />
<div class="name">
<a href="#">
<h2>iphone 6S</h2> Apple/苹果 iPhone 6s Plus公开版
</a>
</div>
<div class="price">
<strong>￥<span>5288</span></strong> 25R
</div>
</li>
<li><img src="img/hot3.jpg" />
<div class="name">
<a href="#">
<h2>倩碧特惠组合套装</h2> 倩碧补水组合套装8折促销
</a>
</div>
<div class="price">
<strong>￥<span>360</span></strong> 18R
</div>
</li>
<li class="ull"><img src="img/hot4.jpg" />
<div class="name">
<a href="#">
<h2>品利特级橄榄油</h2> 750ml*4瓶装组合 西班牙原装进口
</a>
</div>
<div class="price">
<strong>￥<span>280</span></strong> 30R
</div>
</li>
</ul>
</div>
</div>
<div class="content">
<a href="#"><img src="img/mban_2.jpg "></a>
</div>
<section class="section2">
<div class="floorTitle">
<span class="num">1F</span>
<span class="num2">进口 · 生鲜</span>
<div class="i_mores">
<a href="#">进口咖啡</a>
<a href="#">进口酒</a>
<a href="#">进口母婴</a>
<a href="#">新鲜蔬菜</a>
<a href="#">新鲜水果</a>
</div>
</div>
<div class="div-Mix">
<div class="box-img_t">
<a href="#"><img src="img/fre_r.jpg" width="230px" height="286px"></a>
<span class="span_5">
<a href="#"><img src="img/s_left.png"/></a>
</span>
<span class="span_6">
<a href="#"><img src="img/s_right.png"/></a>
</span>
<div class="fresh_txt">
<ul class="ul_li">
<li>
<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>
</li>
</ul>
</div>
<div class="fresh_mid">
<ul style="height: 300px;">
<li>
<div class="name">
<a href="#">贝思客 草莓先生&蓝莓小姐</a>
</div>
<div class="list_price">
<span>￥98.00</span>
</div>
<div class="img">
<a href="#"><img src="img/fre_1.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">微笑果园SMILE 智利进口绿奇异果</a>
</div>
<div class="list_price">
<span>￥84.00</span>
</div>
<div class="img">
<a href="#"><img src="img/fre_2.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">新鲜美味 进口美食</a>
</div>
<div class="list_price">
<span>￥98.00</span>
</div>
<div class="img">
<a href="#"><img src="img/fre_3.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">新鲜美味 进口美食</a>
</div>
<div class="list_price">
<span>￥24.00</span>
</div>
<div class="img">
<a href="#"><img src="img/fre_4.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">新鲜美味 纯牛奶</a>
</div>
<div class="list_price">
- <span>￥142.00</span>
</div>
<div class="img">
<a href="#"><img src="img/fre_5.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">莫斯利安</a>
</div>
<div class="list_price">
<span>￥62.00</span>
</div>
<div class="img">
<a href="#"><img src="img/fre_6.jpg" width="165" height="135"></a>
</div>
</li>
</ul>
</div>
<div class="fresh_right">
<ul>
<li>
<a href="#"><img src="img/fre_b1.jpg" width="260" height="220"></a>
</li>
<li>
<a href="#"><img src="img/fre_b2.jpg" width="260" height="220"></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="section2">
<div class="floorTitle">
<span class="num">2F</span>
<span class="num2">个人美妆</span>
<div class="i_mores">
<a href="#">洗发护发</a>
<a href="#">面膜</a>
<a href="#">洗面奶</a>
<a href="#">香水</a>
<a href="#">沐浴露</a>
</div>
</div>
<div class="div-Mix">
<div class="box-img_t">
<a href="#"><img src="img/make_r.jpg" width="235px" height="286px"></a>
<span class="span_5">
<a href="#"><img src="img/s_left.png"/></a>
</span>
<span class="span_6_n">
<a href="#"><img src="img/s_right.png"/></a>
</span>
<div class="fresh_txt_2">
<ul class="ul_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>
</li>
<li>
<a href="#">沐浴露</a>
</li>
</ul>
</div>
<div class="fresh_mid">
<ul style="height: 300px;">
<li>
<div class="name">
<a href="#">美宝莲粉饼</a>
</div>
<div class="list_price">
<span>￥260.00</span>
</div>
<div class="img">
<a href="#"><img src="img/make_1.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">洗衣液</a>
</div>
<div class="list_price">
<span>￥60.00</span>
</div>
<div class="img">
<a href="#"><img src="img/make_2.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">洗发水</a>
</div>
<div class="list_price">
<span>￥160.00</span>
</div>
<div class="img">
<a href="#"><img src="img/make_3.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">男士洗发水</a>
</div>
<div class="list_price">
<span>￥120.00</span>
</div>
<div class="img">
<a href="#"><img src="img/make_4.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">美宝莲粉饼</a>
</div>
<div class="list_price">
<span>￥260.00</span>
</div>
<div class="img">
<a href="#"><img src="img/make_5.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">男士设计 洗面奶</a>
</div>
<div class="list_price">
<span>￥90.00</span>
</div>
<div class="img">
<a href="#"><img src="img/make_6.jpg" width="165" height="135"></a>
</div>
</li>
</ul>
</div>
<div class="fresh_right">
<ul>
<li>
<a href="#"><img src="img/make_b1.jpg" width="260" height="220"></a>
</li>
<li>
<a href="#"><img src="img/make_b2.jpg" width="260" height="220"></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<div class="content_2">
<a href="#"><img src="img/mban_2.jpg "></a>
</div>
<section class="section2">
<div class="floorTitle">
<span class="num">3F</span>
<span class="num2">母婴玩具</span>
<div class="i_mores">
<a href="#">营养品</a>
<a href="#">孕妈背带裤</a>
<a href="#">儿童玩具</a>
<a href="#">婴儿床</a>
<a href="#">喂奶器</a>
</div>
</div>
<div class="div-Mix">
<div class="box-img_t">
<a href="#"><img src="img/baby_r.jpg" width="230px" height="286"></a>
<span class="span_5">
<a href="#"><img src="img/s_left.png"></a>
</span>
<span class="span_6">
<a href="#"><img src="img/s_right.png"></a>
</span>
<div class="fresh_txt_3">
<ul class="ul_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>
</li>
<li>
<a href="#">重装童鞋</a>
<a href="#">辅助食品</a>
</li>
</ul>
</div>
<div class="fresh_mid">
<ul style="height: 300px;">
<li>
<div class="name">
<a href="#">儿童推车</a>
</div>
<div class="list_price">
<span>￥560.00</span>
</div>
<div class="img">
<a href="#"><img src="img/baby_1.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">妈咪纸尿裤</a>
</div>
<div class="list_price">
<span>￥260.00</span>
</div>
<div class="img">
<a href="#"><img src="img/baby_2.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">儿童玩具 挖掘机</a>
</div>
<div class="list_price">
<span>￥160.00</span>
</div>
<div class="img">
<a href="#"><img src="img/baby_3.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">纸尿裤</a>
</div>
<div class="list_price">
<span>￥260.00</span>
</div>
<div class="img">
<a href="#"><img src="img/baby_4.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">儿童推车</a>
</div>
<div class="list_price">
<span>￥86.00</span>
</div>
<div class="img">
<a href="#"><img src="img/baby_5.jpg" width="165" height="135"></a>
</div>
</li>
<li>
<div class="name">
<a href="#">奶粉</a>
</div>
<div class="list_price">
<span>￥660.00</span>
</div>
<div class="img">
<a href="#"><img src="img/baby_6.jpg" width="165" height="135"></a>
</div>
</li>
</ul>
</div>
<div class="fresh_right">
<ul>
<li>
<a href="#"><img src="img/baby_b1.jpg" width="260" height="220"></a>
</li>
<li>
<a href="#"><img src="img/baby_b2.jpg" width="260" height="220"></a>
</li>
</ul>
</div>
</div>
</div>
</section>
</section>
<!--网页底部-->
<footer style="width: 1200px; margin: 0 auto;">
<div class="footer-img">
<ul class="ul-img">
<li>
<a><img src="img/b1.png" width="62" height="62"></a>
<div>
<h2>正品保障</h2>正品行货 放心购买</div>
</li>
<li>
<a><img src="img/b2.png" width="62" height="62"></a>
<div>
<h2>满38包邮</h2>满38包邮 免运费</div>
</li>
<li>
<a><img src="img/b3.png" width="62" height="62"></a>
<div>
<h2>天天低价</h2>天天低价 畅选无忧</div>
</li>
<li>
<a><img src="img/b4.png" width="62" height="62"></a>
<div>
<h2>准时送达</h2>收货时间由你做主</div>
</li>
</ul>
</div>
<div class="div_nav">
<ul>
<span><a href="#">新手上路</a></span>
<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>
<ul>
<span><a href="#">配送与支付</a></span>
<li>
<a href="#">货到付款区域</a>
</li>
<li>
<a href="#">配送支付查询</a>
</li>
<li>
<a href="#">支付方式说明</a>
</li>
</ul>
<ul>
<span><a href="#">会员中心</a></span>
<li>
<a href="#">资金管理</a>
</li>
<li>
<a href="#">我的收藏</a>
</li>
<li>
<a href="#">我的订单</a>
</li>
</ul>
<ul>
<span><a href="#">服务保证</a></span>
<li>
<a href="#">退换货原则</a>
</li>
<li>
<a href="#">售后服务保证</a>
</li>
<li>
<a href="#">产品质量保证</a>
</li>
</ul>
<ul>
<span><a href="#">联系我们</a></span>
<li>
<a href="#">网站故障报告</a>
</li>
<li>
<a href="#">购物咨询</a>
</li>
<li>
<a href="#">投诉与建议</a>
</li>
</ul>
</div>
<div class="b_er_a">
<div class="b_tel_bg">
<a href="#" class="b_sh1">新浪微博</a>
<a href="#" class="b_sh2">腾讯微博</a>
<p>
服务热线：<br>
<span>400-123-4567</span>
</p>
</div>
<div class="b_er">
<div class="b_er_c">
<img src="img/er.gif"></div>
<img src="img/ss.png">
</div>
</div>
<div class="btm">
备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 , Technical Support: Dgg Group <br>
<img src="img/b_1.gif">
<img src="img/b_2.gif">
<img src="img/b_3.gif">
<img src="img/b_4.gif">
<img src="img/b_5.gif">
<img src="img/b_6.gif">
</div>
</footer>
</body>
</html>
首页CSS样式
* {
margin: 0px;
padding: 0px;
}
.nav {
color: gray;
line-height: 35px;
font-size: 12px;
background: linear-gradient(to bottom, #E2E2E2, #F3F3F3, #F5F5F5);
}
.nav1 {
text-indent: 4em;
}
.nav2 {
margin-right: 50px;
float: right;
}
.nav3 {
margin-right: -55px;
float: left;
}
a {
text-decoration: none;
color: gray;
}
header a:hover {
color: orangered;
}
ul {
list-style: none;
}
.ul {
float: left;
}
.li {
padding: 10px 0;
background: url(../img/t_arrow.gif) no-repeat right center;
display: inline;
margin-left: 10px;
padding-right: 15px;
}
.div_1 {
width: 115px;
overflow: hidden;
position: absolute;
right: 320px;
top: 30px;
z-index: 1000;
border: 1px solid #cdcdcd;
display: none;
}
.div_1 div {
margin-left: -12px;
}
.span_1 {
margin-left: -35px;
}
.img1 {
vertical-align: -2px;
margin-right: 5px;
}
.img2 {
vertical-align: -3px;
}
.li:hover .div_1 {
display: block;
}
.logo {
display: inline-block;
vertical-align: 10px;
margin-top: 50px;
margin-left: 65px;
}
.input-box {
margin-left: 200px;
display: inline-block;
}
.input1 {
width: 408px;
height: 40px;
line-height: 36px;
overflow: hidden;
color: #555555;
font-size: 14px;
float: left;
padding: 0 10px;
border: 2px solid #ff3c3c;
border-right: 0;
outline: none;
}
.input2 {
width: 90px;
height: 44px;
line-height: 45px;
background-color: #ff3c3c;
color: #FFF;
font-size: 16px;
text-align: center;
float: left;
border: none;
outline: none;
cursor: pointer;
}
.div-box2 {
font-size: 12px;
}
.div-box2 ul {
margin-top: 10px;
display: inline-block;
}
.div-box2 li {
display: inline-block;
margin-right: 15px;
}
.login {
vertical-align: 35px;
width: 120px;
height: 40px;
line-height: 40px;
background: #F6F6F6;
display: inline-block;
text-align: center;
margin-left: 220px;
border: 1px solid #DFDFDF;
position: relative;
}
.div-login {
background: url(../img/car.png)no-repeat 0 12px;
margin-left: 10px;
margin-right: -10px;
}
.section {
margin: 0px auto;
width: 1300px;
}
.h3 {
display: inline-block;
margin-top: 40px;
color: white;
width: 210px;
text-indent: 3em;
line-height: 40px;
background: #FF3C3C;
}
.div-ul {
display: inline-block;
}
.div-ul li {
margin-right: 25px;
margin-left: 5px;
display: inline-block;
}
.div-ul li a {
color: black;
}
.div-ul li a:hover {
color: red;
}
.img-logo {
margin-left: 340px;
vertical-align: -10px;
display: inline-block;
}
.div-box3 {
border-bottom: 1px solid #FF4E00;
}
.div-box_1 {
width: 210PX;
background: #B01D1D;
}
.div-box_1 a {
color: white;
}
.div-box_1 li {
height: 46px;
line-height: 46px;
background: url(../img/n_arrow.gif) no-repeat 190px center;
color: #FFF;
font-size: 14px;
transition: all 1s;
}
.div-box_1 li:hover {
transform: translate(25px, 0);
}
.logoin1 {
vertical-align: -2px;
margin-left: 10px;
margin-right: 10px;
}
.logoin2 {
vertical-align: -5px;
margin-left: 12px;
margin-right: 12px;
}
.logoin3 {
vertical-align: -2px;
margin-left: 9px;
margin-right: 9px;
}
.logoin4 {
vertical-align: -2px;
margin-left: 8px;
margin-right: 8px;
}
.logoin5 {
vertical-align: -2px;
margin-left: 13px;
margin-right: 13px;
}
.logoin6 {
vertical-align: -5px;
margin-left: 8px;
margin-right: 8px;
}
.logoin7 {
vertical-align: -2px;
margin-left: 6px;
margin-right: 10px;
}
.logoin8 {
vertical-align: -2px;
margin-left: 6px;
margin-right: 10px;
}
.logoin9 {
vertical-align: -2px;
margin-left: 9px;
margin-right: 11px;
}
.logoin10 {
vertical-align: -2px;
margin-left: 6px;
margin-right: 8px;
}
.imgto {
margin-top: -460px;
margin-left: 215px;
}
.img-box img {
width: 780px;
height: 460px;
}
.noli {
display: inline-block;
position: absolute;
margin-top: 420px;
margin-left: -450px;
}
.noli li {
margin-right: 5px;
font-size: 12px;
cursor: pointer;
border-radius: 100%;
line-height: 20px;
width: 20px;
text-align: center;
height: 20px;
display: inline-block;
background: #D9D9D9;
}
.noli li:hover {
color: white;
background: orangered;
}
.left {
position: absolute;
margin-left: -780px;
margin-top: 180px;
}
.right {
position: absolute;
margin-top: 180px;
margin-left: -35px;
}
.new {
font-size: 14px;
border-top: none;
position: absolute;
margin-top: -463px;
margin-left: 823px;
border: 1px solid #D9D9D9;
width: 260PX;
}
.new_t {
margin-bottom: 15px;
border-bottom: 1px dashed #D9D9D9;
}
.ban {
margin: 15px 160px 10px 10px;
display: inline-block;
}
.span_2 {
font-size: 12px;
}
.ul-box {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #D9D9D9;
}
.ul-box li {
transition: all 0.5s;
margin-left: 20px;
font-size: 12px;
line-height: 35px;
}
.ul-box li:hover {
transform: translate(0, 5px) scale(1.1);
}
.ul-box li a:hover {
color: orangered;
}
.charge_t {
padding: 8px 0 5px 10px;
border-bottom: 1px dashed #D9D9D9;
}
.not_1 {
margin-top: 20px;
margin-left: -215px;
}
.not_1 img {
transition: all 0.5s;
}
.not_1 img:hover {
transform: scale(1.1, 1.1);
}
.not_2 {
display: inline-block;
padding-left: 8px;
padding-top: 10px;
vertical-align: top;
height: 240px;
width: 200px;
background: #D8EEFC;
margin-right: 10px;
}
.div-listin {
margin-left: 50px;
margin-top: 10px;
}
.span_3 {
font-size: 14px;
padding: 2px 5px 2px 5px;
background: orangered;
color: white;
}
.span_4 {
margin-left: 15px;
color: orangered;
font-size: 8px;
}
.div-box4 {
display: inline-block;
}
.div-box4 ul li {
margin-left: -5px;
display: inline-block;
padding: 20px;
width: 229.5px;
height: 205px;
border-top: 1px solid #D9D9D9;
border-left: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
}
.ull {
border: 1px solid #D9D9D9;
}
.div-box4 ul li a:hover {
color: orangered;
}
.name {
text-align: center;
}
.name a {
color: #555555;
font-size: 14px;
}
.price {
margin-left: -10px;
margin-left: 20px;
color: gray;
font-size: 12px;
margin-top: 5px;
text-align: center;
}
.price strong {
font-size: 20px;
color: orangered;
}
.content {
margin-top: 30px;
margin-left: -215px;
}
.content img {
width: 1300px;
}
.section2 {
margin-top: 20px;
}
.floorTitle {
border-bottom: 2px solid orangered;
margin-left: -210px;
}
.num {
width: 33px;
height: 34px;
line-height: 40px;
overflow: hidden;
background: url(../img/floor.png) no-repeat center top;
color: #FFF;
font-size: 14px;
text-transform: uppercase;
text-indent: 6px;
float: left;
display: inline;
margin-right: 15px;
}
.num2 {
font-size: 18px;
height: 33px;
line-height: 40px;
color: #FF4E00;
}
.i_mores {
margin-top: 10px;
font-size: 10px;
float: right;
}
.i_mores a {
margin-right: 30px;
}
.i_mores a:hover {
color: orangered;
}
.box-img_t {
margin-left: -210px;
}
.span_5 {
position: absolute;
margin-top: 135px;
margin-left: -230px;
}
.span_6 {
position: absolute;
margin-top: 135px;
margin-left: -20px;
}
.fresh_txt {
margin-top: -5px;
font-size: 13px;
width: 230px;
background: #E4F7EC;
}
.ul_li li {
padding: 15px 15px 5px 15px;
border-bottom: 1px dashed #999999;
}
.ul_li li a {
margin-right: 25px;
}
.ul_li li a:hover {
color: red;
}
.fresh_mid {
width: 905px;
text-align: center;
position: absolute;
margin-left: 165px;
margin-top: -435px;
}
.list_price {
font-size: 18px;
color: orangered;
}
.fresh_mid li {
display: inline-block;
border-right: 1px solid #EAEAEA;
width: 275px;
height: 220px;
}
.fresh_mid li div {
margin-top: 10px;
}
.img {
transition: all 1s;
}
.img:hover {
transform: scale(1.1, 1.1);
}
.fresh_right {
margin-top: -435px;
float: right;
}
.content_2 {
margin-top: 30px;
margin-left: -210px;
}
.content_2 img {
width: 1295px;
}
.span_6_n {
position: absolute;
margin-top: 135px;
margin-left: -30px;
}
.fresh_txt_2 {
margin-top: -5px;
font-size: 13px;
width: 230px;
background: #FEECEA;
}
.fresh_txt_3 {
margin-top: -5px;
font-size: 13px;
width: 230px;
background: #FCEBF3;
}
.footer-img {
margin-left: 90px;
margin-top: 50px;
}
.ul-img {
display: inline-block;
}
.ul-img li {
margin-right: 50px;
color: gray;
font-size: 10px;
text-align: center;
width: 210px;
display: inline-block;
}
.ul-img li a img {
transition: all 3s;
}
.ul-img li a img:hover {
transform: rotate(360deg) scale(1.2);
}
.ul-img li h2 {
margin-top: 8px;
margin-bottom: 8px;
color: black;
font-size: 16px;
font-weight: 400;
}
.div_nav {
margin-top: 40px;
margin-left: 100px;
font-size: 12px;
margin-bottom: 100px;
}
.div_nav ul:nth-of-type(1) {
position: absolute;
display: inline-block;
}
.div_nav ul:nth-of-type(2) {
margin-left: 180px;
margin-right: 100px;
display: inline-block;
}
.div_nav ul:nth-of-type(3) {
margin-right: 100px;
display: inline-block;
}
.div_nav ul:nth-of-type(4) {
margin-right: 100px;
display: inline-block;
}
.div_nav ul:nth-of-type(5) {
margin-right: 100px;
display: inline-block;
}
.div_nav ul li {
margin-top: 8px;
}
.div_nav ul li a:hover {
color: orangered;
}
.div_nav span a {
color: black;
font-size: 14px;
}
.div_nav span a:hover {
text-decoration: underline;
}
.b_er {
float: right;
}
.b_tel_bg {
float: right;
}
.b_er_a {
position: absolute;
margin-top: -190px;
margin-left: 950px;
}
.b_er_c {
margin-bottom: 15px;
}
.b_sh1 {
margin-left: 15px;
width: 100%;
height: 35px;
line-height: 35px;
overflow: hidden;
background: url(../img/b_sh_1.png) no-repeat left center;
color: #888888;
font-size: 14px;
text-indent: 32px;
display: inline-block;
}
.b_sh2 {
margin-left: 15px;
width: 100%;
height: 35px;
line-height: 35px;
overflow: hidden;
background: url(../img/b_sh_2.png) no-repeat left center;
color: #888888;
font-size: 14px;
text-indent: 32px;
display: inline-block;
}
.b_tel_bg a:hover {
color: orangered;
}
.b_tel_bg p {
color: gray;
margin-left: 15px;
font-size: 12px;
margin-top: 10px;
}
.b_tel_bg span {
position: absolute;
margin-top: 10px;
color: #ff4e00;
font-size: 18px;
}
.btm {
margin-top: 150px;
color: gray;
text-align: center;
font-size: 12px;
}
.btm img {
border-radius: 5px;
width: 98px;
height: 33px;
margin-top: 20px;
margin-right: 20px;
border: 1px solid #D9D9D9;
}
首页效果:
商品页面详情HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品详情页面</title>
<link rel="stylesheet" type="text/css" href="css/商品详情页面.css" />
</head>
<body>
<header>
<div class="nav">
<div class="nav1">
<span>
送货至:四川
</span>
<div class="nav2">
<div class="nav3">
<span>你好!<a href="登录.html">请登录</a></span>
<span>
<a href="注册.html" style="color: orangered;">免费注册</a>
|
<a href="注册.html">我的订单</a>
|
</span>
</div>
<ul class="ul">
<li class="li">
<a href="#">收藏夹</a>
</li>
<li class="li">
<a href="#">客户服务</a>
<div class="div_1">
<div>
<a href="#">客户服务</a>
</div>
<div>
<a href="#">客户服务</a>
</div>
<div>
<a href="#">客户服务</a>
</div>
</div>
</li>
<li class="li">
<a href="#">网站导航</a>
</li>
</ul>
<span class="span_1">
| <a href="#">关注我们：</a>
<span>
<a href="#"><img src="img/sh1.png" class="img1"></a>
<a href="#"><img src="img/sh2.png" class="img2"></a>
</span>
</span>
<span class="fr"> |
<a href="#">手机版
<img src="img/s_tel.png" style="vertical-align: -3px;">
</a>
</span>
</div>
</div>
</div>
<div class="div-box">
<div class="logo">
<a href="首页.html"><img src="img/logo.png"></a>
</div>
<div class="input-box">
<form action="#" method="post">
<input class="input1" type="text" placeholder="请输入关键字">
<input class="input2" type="submit" value="搜索">
</form>
<div class="div-box2">
<ul>
<li>
<a href="#">咖啡</a>
</li>
<li>
<a href="#">iphone 6S</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="login">
<div class="div-login">
<a href="#">购物车</a>
</div>
</div>
</div>
</header>
<section class="section">
<div class="div-box3">
<div class="div-head">
<div class="h3">
全部商品分类
</div>
<ul class="div-ul">
<li>
<a href="首页.html" style="color: #FF4141;"><strong>首页</strong></a>
</li>
<li>
<a href="#" style="color: #FF4141;"><strong>自营超市</strong></a>
</li>
<li>
<a href="#"><strong>1号团</strong></a>
</li>
<li>
<a href="#"><strong>1号超市</strong></a>
</li>
<li>
<a href="#"><strong>女装</strong></a>
</li>
<li>
<a href="#"><strong>美妆</strong></a>
</li>
<li>
<a href="#"><strong>1号海购</strong></a>
</li>
<li>
<a href="#"><strong>团购</strong></a>
</li>
</ul>
<div class="img-logo">
<a href="#"><img src="img/phone.png"></a>
</div>
</div>
</div>
<div class="ing">
<div class="postion">
<span class="fl">所有团购 > 包饰 > 珠韵首饰 <i>冰韵 天然白色正圆S925银扣珍珠项链</i></span>
</div>
<div class="display">
<div class="ShopContainer">
<div class="imgs">
<a href="img/p_big.jpg" class="MagicZoom">
<img src="img/p_big.jpg" width="390" height="410">
</a>
</div>
<div class="divimg-box">
<div class="img-left"></div>
<div class="img-divbox">
<ul>
<li><img src="img/ps1.jpg"></li>
<li><img src="img/ps2.jpg" width="79">
</li>
<li><img src="img/ps3.jpg" width="79"></li>
<li><img src="img/ps4.jpg" width="79"></li>
</ul>
</div>
<div class="img-right"></div>
</div>
</div>
<div class="dis_an">
<div class="dis_en">
<h3>珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</h3> 全国包邮 送妈妈，正圆级淡水珍珠，白色S925银链扣，使用方便，尊贵礼物。
</div>
<div class="dis_rn">
本店价格：<b>¥1786</b>
<p>参考价：<span>¥3886</span></p>
</div>
<div class="dis_choice">
<span class="dis_fl">尺码：</span>
<ul>
<li class="checked">43cm
<div class="dis_img"></div>
</li>
<li>45cm
<div class="dis_img"></div>
</li>
<li>50cm
<div class="dis_img"></div>
</li>
</ul>
</div>
<div class="dis_choice">
<span class="dis_fl">颜色选择：</span>
<ul>
<li>粉色
<div class="dis_img"></div>
</li>
<li class="checked">白色
<div class="dis_img"></div>
</li>
</ul>
</div>
<div class="dis_box_a">
<div class="dis_box_b_A">
<div class="dis_box_b">分享
<div class="dis_box_c">
<a href="#"><img src="img/sh_1.gif"></a>
<a href="#"><img src="img/sh_2.gif"></a>
<a href="#"><img src="img/sh_3.gif"></a>
<a href="#"><img src="img/sh_4.gif"></a>
<a href="#"><img src="img/sh_5.gif"></a>
</div>
</div>
</div>
<div class="dis_d">
<a>关注商品</a>
</div>
</div>
<div class="dis_lyar">
<div class="dis_lun">
<input type="text" value="1" class="input_text">
<input type="button" value="+" class="input_button1" />
<input type="button" value="-" class="input_button2" />
</div>
</div>
<span class="span_new"><a href="#"><img src="img/j_car.png"/></a></span>
</div>
<div class="div_imgslin">
<div class="div_imgs">
<img src="img/sbrand.jpg" width="188px" height="132px" />
</div>
<div class="dis_list">
<a href="#">进入品牌专区</a>
</div>
</div>
</div>
<div class="lsit_div">
<div class="lsit_div_an">
<div class="dis_div_lst ">用户还喜欢</div>
<ul>
<li>
<div class="img">
<a href="#"><img src="img/his_1.jpg"></a>
</div>
<div class="name">
<a href="#">科爱KEAL儿童日本书包减负护脊</a>
</div>
<div class="price">
<span>¥599</span>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/his_2.jpg"></a>
</div>
<div class="name">
<a href="#">科爱KEAL小学生减负护脊书包超轻</a>
</div>
<div class="price">
<span>¥79</span>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/his_3.jpg"></a>
</div>
<div class="name">
<a href="#">珠韵首饰 天然白色珍珠项链</a>
</div>
<div class="price">
<span>¥339</span>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/his_4.jpg"></a>
</div>
<div class="name">
<a href="#">珠韵首饰 新品18K黄金珍珠耳钉</a>
</div>
<div class="price">
<span>¥1860</span>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/his_5.jpg"></a>
</div>
<div class="name">
<a href="#">珠韵首饰 姝丽大珍珠项链</a>
</div>
<div class="price">
<span>¥758</span>
</div>
</li>
</ul>
</div>
</div>
<div class="ovelist">
<div class="ove_eve">
<div class="lyar_eve">
<ul>
<li class="lol">推荐搭配</li>
</ul>
</div>
<div class="one_list">
<div class="img">
<a href="#"><img src="img/mat_1.jpg"></a>
</div>
<div class="div_name">
<a href="#">粤通国际珠宝 999足金</a>
</div>
<div class="div_price">
<div class="checkbox">
<input type="checkbox" checked="checked">
</div>
<span>￥76</span>
</div>
</div>
<div class="team_icon"><img src="img/jia_b.gif"></div>
<div class="one_list">
<div class="img">
<a href="#"><img src="img/mat_2.jpg"></a>
</div>
<div class="div_name">
<a href="#">珠韵 9.5-10.5mm珍珠项链</a>
</div>
<div class="div_price">
<div class="checkbox">
<input type="checkbox">
</div>
<span>￥1890</span>
</div>
</div>
<div class="team_icon"><img src="img/jia_b.gif"></div>
<div class="one_list">
<div class="img">
<a href="#"><img src="img/mat_3.jpg"></a>
</div>
<div class="div_name">
<a href="#">清新耳环</a>
</div>
<div class="div_price">
<div class="checkbox">
<input type="checkbox">
</div>
<span>￥232</span>
</div>
</div>
<div class="team_icon"><img src="img/equl.gif"></div>
<div class="sum">
套餐价：￥<span>2000</span>
<input type="text" value="1" class="input_sum">
<a href="#"><img src="img/z_buy.gif"></a>
</div>
</div>
<div class="dis_border">
<div class="dis_tit">
<ul>
<li class="dis_check">
<a href="#p_attribute">商品属性</a>
</li>
<li>
<a href="#p_details">商品详情</a>
</li>
<li>
<a href="#p_comment">商品评论</a>
</li>
</ul>
</div>
<div class="dis_con" id="p_attribute">
<table>
<tr>
<td>商品名称：天然淡水珍珠</td>
<td>商品编号：1546211</td>
<td>品牌： 珠韵首饰</td>
<td>上架时间：2015-09-06 09:19:09</td>
</tr>
<tr>
<td>商品毛重：160.00g</td>
<td>商品产地：法国</td>
<td>珍珠形状：正圆</td>
<td> </td>
</tr>
<tr>
<td>镶嵌材质：纯银</td>
<td>款式：项链</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<div class="dis_border" id="p_details">
<div class="dis_t">商品详情</div>
<div class="dis_con">
<p style="text-align: center;">
<img src="img/de2.jpg"><br><br>
<img src="img/de3.jpg"><br><br>
<img src="img/de4.jpg"><br><br>
<img src="img/de5.jpg"><br><br>
<img src="img/de6.jpg"><br><br>
<img src="img/de7.jpg"><br><br>
<img src="img/de8.jpg"><br><br>
</p>
</div>
</div>
<div class="dis_border">
<div class="dis_t">商品评论</div>
<div class="listben">
<ul>
<li class="lisin">
<p>80.0%</p>
好评度
</li>
<li class="lisin2">
<p> <span>好评（80%）</span><span><img src="img/pl.gif" style="vertical-align: -2px;"/></span></p>
<p> <span>中评（20%）</span><span><img src="img/pl.gif" style="vertical-align: -2px;"/></span></p>
<p> <span>差评（0%）</span><span><img src="img/pl.gif" style="vertical-align: -2px; margin-left: 7px;"/></span></p>
</li>
<li class="lisin3">
购买过珠韵首饰 天然银扣珍珠项链的顾客，在收到商品才可以对该商品发表评论
</li>
<li class="lisin4">
<p>您可对已购买商品进行评价</p>
<a href="#">
<div>我要评论</div>
</a>
</li>
</ul>
</div>
<div class="pinglun">
<ul>
<li><img src="img/peo1.jpg" />向死而生</li>
<li>颜色分类：<span style="color: #999999;">粉色</span><br /> 型号：<span style="color: #999999;">43cm</span></li>
<li>产品很好，香味很喜欢，必须给赞。 <br /><span style="color: #999999;">2015-09-24</span></li>
</ul>
<ul>
<li><img src="img/peo2.jpg" />就是这么想的</li>
<li>颜色分类：<span style="color: #999999;">粉色</span><br /> 型号：<span style="color: #999999;">43cm</span></li>
<li>送朋友，她很喜欢，大爱。 <br /><span style="color: #999999;">2015-09-24</span></li>
</ul>
<ul>
<li><img src="img/peo3.jpg" />墨镜墨镜</li>
<li>颜色分类：<span style="color: #999999;">白色 </span><br /> 型号：<span style="color: #999999;">43cm</span></li>
<li>大家都说不错 <br /><span style="color: #999999;">2015-09-24</span></li>
</ul>
<ul>
<li><img src="img/peo4.jpg" />那*****洋<br /><span style="color: $#999999;">（匿名用户）</span></li>
<li>颜色分类：<span style="color: #999999;">白色 </span><br /> 型号：<span style="color: #999999;">43cm</span></li>
<li>下次还会来买，推荐。 <br /><span style="color: #999999;">2015-09-24</span></li>
</ul>
</div>
<div class="pages">
<a href="#" class="p_pre">上一页</a>
<a href="#" class="dnf">1</a>
<a href="#">2</a>
<a href="#">3</a>
...
<a href="#">20</a>
<a href="#" class="p_pre">下一页</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer style="width: 1200px; margin: 0 auto;">
<div class="footer-img">
<ul class="ul-img">
<li>
<a><img src="img/b1.png" width="62" height="62"></a>
<div>
<h2>正品保障</h2>正品行货 放心购买</div>
</li>
<li>
<a><img src="img/b2.png" width="62" height="62"></a>
<div>
<h2>满38包邮</h2>满38包邮 免运费</div>
</li>
<li>
<a><img src="img/b3.png" width="62" height="62"></a>
<div>
<h2>天天低价</h2>天天低价 畅选无忧</div>
</li>
<li>
<a><img src="img/b4.png" width="62" height="62"></a>
<div>
<h2>准时送达</h2>收货时间由你做主</div>
</li>
</ul>
</div>
<div class="div_nav">
<ul>
<span><a href="#">新手上路</a></span>
<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>
<ul>
<span><a href="#">配送与支付</a></span>
<li>
<a href="#">货到付款区域</a>
</li>
<li>
<a href="#">配送支付查询</a>
</li>
<li>
<a href="#">支付方式说明</a>
</li>
</ul>
<ul>
<span><a href="#">会员中心</a></span>
<li>
<a href="#">资金管理</a>
</li>
<li>
<a href="#">我的收藏</a>
</li>
<li>
<a href="#">我的订单</a>
</li>
</ul>
<ul>
<span><a href="#">服务保证</a></span>
<li>
<a href="#">退换货原则</a>
</li>
<li>
<a href="#">售后服务保证</a>
</li>
<li>
<a href="#">产品质量保证</a>
</li>
</ul>
<ul>
<span><a href="#">联系我们</a></span>
<li>
<a href="#">网站故障报告</a>
</li>
<li>
<a href="#">购物咨询</a>
</li>
<li>
<a href="#">投诉与建议</a>
</li>
</ul>
</div>
<div class="b_er_a">
<div class="b_tel_bg">
<a href="#" class="b_sh1">新浪微博</a>
<a href="#" class="b_sh2">腾讯微博</a>
<p>
服务热线：<br>
<span>400-123-4567</span>
</p>
</div>
<div class="b_er">
<div class="b_er_c">
<img src="img/er.gif"></div>
<img src="img/ss.png">
</div>
</div>
<div class="btm">
备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 , Technical Support: Dgg Group <br>
<img src="img/b_1.gif">
<img src="img/b_2.gif">
<img src="img/b_3.gif">
<img src="img/b_4.gif">
<img src="img/b_5.gif">
<img src="img/b_6.gif">
</div>
</footer>
</body>
</html>
商品页面详情CSS样式:
* {
margin: 0px;
padding: 0px;
}
.nav {
color: gray;
line-height: 35px;
font-size: 12px;
background: linear-gradient(to bottom, #E2E2E2, #F3F3F3, #F5F5F5);
}
.nav1 {
text-indent: 4em;
}
.nav2 {
margin-right: 50px;
float: right;
}
.nav3 {
margin-right: -55px;
float: left;
}
a {
text-decoration: none;
color: gray;
}
header a:hover {
color: orangered;
}
ul {
list-style: none;
}
.ul {
float: left;
}
.li {
padding: 10px 0;
background: url(../img/t_arrow.gif) no-repeat right center;
display: inline;
margin-left: 10px;
padding-right: 15px;
}
.div_1 {
width: 115px;
overflow: hidden;
position: absolute;
right: 320px;
top: 30px;
border: 1px solid #cdcdcd;
background: white;
z-index: 1000;
display: none;
}
.div_1 div {
margin-left: -12px;
}
.span_1 {
margin-left: -35px;
}
.img1 {
vertical-align: -2px;
margin-right: 5px;
}
.img2 {
vertical-align: -3px;
}
.li:hover .div_1 {
display: block;
}
.logo {
display: inline-block;
vertical-align: 10px;
margin-top: 50px;
margin-left: 65px;
}
.input-box {
margin-left: 200px;
display: inline-block;
}
.input1 {
width: 408px;
height: 40px;
line-height: 36px;
overflow: hidden;
color: #555555;
font-size: 14px;
float: left;
padding: 0 10px;
border: 2px solid #ff3c3c;
border-right: 0;
outline: none;
}
.input2 {
width: 90px;
height: 44px;
line-height: 45px;
background-color: #ff3c3c;
color: #FFF;
font-size: 16px;
text-align: center;
float: left;
border: none;
outline: none;
cursor: pointer;
}
.div-box2 {
font-size: 12px;
}
.div-box2 ul {
margin-top: 10px;
display: inline-block;
}
.div-box2 li {
display: inline-block;
margin-right: 15px;
}
.login {
vertical-align: 35px;
width: 120px;
height: 40px;
line-height: 40px;
background: #F6F6F6;
display: inline-block;
text-align: center;
margin-left: 220px;
border: 1px solid #DFDFDF;
position: relative;
}
.div-login {
background: url(../img/car.png)no-repeat 0 12px;
margin-left: 10px;
margin-right: -10px;
}
.section {
margin: 0px auto;
width: 1300px;
}
.h3 {
display: inline-block;
margin-top: 40px;
color: white;
width: 210px;
text-indent: 3em;
line-height: 40px;
background: #FF3C3C;
}
.div-ul {
display: inline-block;
}
.div-ul li {
margin-right: 25px;
margin-left: 5px;
display: inline-block;
}
.div-ul li a {
color: black;
}
.div-ul li a:hover {
color: red;
}
.img-logo {
margin-left: 340px;
vertical-align: -10px;
display: inline-block;
}
.div-box3 {
border-bottom: 1px solid #FF4E00;
}
.postion {
width: 1200px;
height: 40px;
line-height: 40px;
overflow: hidden;
margin-top: 10px;
}
.postion span {
font-size: 12px;
}
.postion I {
color: orangered;
}
.imgs {
width: 390px;
position: relative;
border: 1px solid #eaeaea;
}
.img-left {
cursor: pointer;
position: absolute;
margin-top: 35px;
width: 15px;
margin-left: -5px;
height: 25px;
background: url(../img/r_left.png)no-repeat left center;
}
.img-right {
cursor: pointer;
position: absolute;
margin-top: -55px;
width: 15px;
margin-left: 375px;
height: 25px;
background: url(../img/r_right.png)no-repeat right center;
}
.img-divbox ul {
margin-left: 13px;
}
.img-divbox li {
cursor: pointer;
display: inline-block;
}
.img-divbox li img {
padding: 2px;
margin: 1px;
border: 1px solid #eaeaea;
display: block;
width: 79px;
height: 79px;
}
.dis_an {
color: gray;
position: absolute;
margin-left: 420px;
margin-top: -500px;
}
.dis_en {
font-size: 14px;
}
.dis_en h3 {
margin-bottom: 5px;
color: #000000;
font-size: 20px;
}
.dis_rn {
margin-bottom: 20px;
font-size: 13px;
margin-top: 40px;
}
.dis_rn b {
font-size: 20px;
color: #FF3C3C;
}
.dis_rn p {
margin-top: 15px;
}
.dis_rn span {
font-size: 15px;
}
.dis_choice {
margin-bottom: -8px;
line-height: 40px;
overflow: hidden;
color: #888888;
}
.dis_fl {
vertical-align: 10px;
font-size: 12px;
}
.dis_choice ul {
display: inline-block;
}
.dis_choice ul .checked {
height: 26px;
line-height: 26px;
padding: 0 14px;
overflow: hidden;
border: 2px solid #ff3c3c;
}
.dis_choice ul li {
height: 28px;
line-height: 28px;
overflow: hidden;
font-size: 14px;
text-align: center;
float: left;
display: inline;
margin-right: 10px;
margin-top: 4px;
margin-bottom: 2px;
padding: 0 15px;
border: 1px solid #cccccc;
cursor: pointer;
position: relative;
}
.checked .dis_img {
width: 18px;
height: 18px;
overflow: hidden;
background: url(../img/ch.png) no-repeat center top;
position: absolute;
right: 0;
bottom: 0;
}
.dis_box_a {
font-size: 13px;
height: 60px;
overflow: hidden;
margin-top: 20px;
}
.dis_box_b_A {
width: 65px;
height: 25px;
}
.dis_box_b {
border: none;
width: 65px;
height: 25px;
background: url(../img/sh.png)12px 5px no-repeat;
line-height: 25px;
text-indent: 32px;
cursor: pointer;
}
.dis_box_c {
position: absolute;
margin-left: -1px;
line-height: 38px;
width: 180px;
height: 32px;
overflow: hidden;
display: none;
}
.dis_box_c img {
margin-left: -24px;
margin-right: 34px;
}
.dis_box_b:hover .dis_box_c {
border: 1px solid #D9D9D9;
display: block;
}
.dis_box_b_A:hover .dis_box_b {
border: 1px solid #D9D9D9;
}
.dis_d {
background: url(../img/care.png)0 2px no-repeat;
overflow: hidden;
float: left;
height: 60px;
width: 100px;
position: relative;
margin-top: -20px;
margin-left: 130px;
text-indent: 22px;
}
.dis_d a:hover {
color: #FF4E00;
}
.dis_lyar {
margin-top: 20px;
width: 78px;
height: 43px;
overflow: hidden;
float: left;
display: inline;
margin-right: 10px;
border: 1px solid #cccccc;
}
.input_text {
width: 56px;
height: 43px;
line-height: 43px;
background: none;
color: #555555;
font-size: 18px;
text-align: center;
outline: none;
border: 0;
}
.input_button1 {
width: 21px;
height: 21px;
overflow: hidden;
float: right;
border: 0;
font-size: 20px;
color: #646464;
line-height: 20px;
font-weight: 600;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
outline: none;
background: #F0F0F0;
cursor: pointer;
}
.input_button2 {
position: absolute;
margin-top: -21.2px;
margin-left: 57px;
width: 21px;
height: 21px;
overflow: hidden;
float: right;
border: 0;
font-size: 20px;
color: #646464;
line-height: 20px;
font-weight: 600;
border-left: 1px solid #cccccc;
outline: none;
background: #F0F0F0;
cursor: pointer;
}
.span_new {
vertical-align: -48px;
}
.div_imgslin {
width: 188px;
height: 188px;
overflow: hidden;
float: right;
border: 1px solid #eaeaea;
margin-top: -520px;
}
.div_imgs {
width: 188px;
height: 132px;
overflow: hidden;
border-bottom: 1px solid #eaeaea;
}
.dis_list {
height: 55px;
line-height: 55px;
overflow: hidden;
background-color: #f6f6f6;
font-size: 16px;
text-align: center;
}
.dis_list a:hover {
color: orangered;
}
.lsit_div {
margin-top: 20px;
}
.lsit_div_an {
float: left;
width: 209px;
overflow: hidden;
border: 1px solid #eaeaea;
}
.dis_div_lst {
height: 30px;
line-height: 30px;
overflow: hidden;
background-color: #f6f6f6;
font-size: 13px;
color: #555555;
text-indent: 1em;
border-bottom: 1px solid #eaeaea;
}
.img {
width: 185px;
height: 162px;
overflow: hidden;
margin-top: 10px;
}
.name {
height: 25px;
line-height: 25px;
overflow: hidden;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.price {
text-align: center;
color: #B00504;
font-size: 18px;
}
.ovelist {
width: 972px;
overflow: hidden;
float: left;
padding-bottom: 30px;
}
.ove_eve {
overflow: hidden;
margin-bottom: 10px;
border: 1px solid #eaeaea;
}
.lyar_eve {
height: 28px;
background-color: #f6f6f6;
border-bottom: 1px solid #eaeaea;
position: relative;
}
.lyar_eve ul {
width: 100%;
height: 29px;
position: absolute;
font-size: 14px;
}
.lol {
color: gray;
padding-top: 5px;
width: 109px;
height: 27px;
text-align: center;
overflow: hidden;
background-color: #FFF;
border-top: 2px solid #ff4e00;
border-right: 1px solid #FFF;
}
.one_list {
width: 160px;
height: 195px;
overflow: hidden;
float: left;
display: inline;
margin: 25px 30px;
}
.div_name {
margin-bottom: 10px;
margin-top: -25px;
font-size: 13px;
}
.div_name a {
color: #555555;
}
.div_name a:hover {
color: orangered;
}
.div_price span {
position: absolute;
margin-top: -24px;
margin-left: 70px;
font-size: 18px;
color: #999999;
}
.team_icon {
width: 25px;
height: 25px;
overflow: hidden;
float: left;
display: inline;
margin: 80px 0;
}
.sum {
width: 145px;
height: 125px;
overflow: hidden;
color: #ff4e00;
float: left;
display: inline;
margin-left: 20px;
margin-top: 40px;
}
.sum span {
font-weight: 600;
font-size: 18px;
}
.input_sum {
width: 60px;
height: 25px;
line-height: 23px;
background: none;
color: #555555;
font-size: 16px;
text-align: center;
outline: none;
padding: 0;
margin: 5px auto 10px auto;
border: 1px solid #eaeaea;
}
.dis_border {
overflow: hidden;
margin-bottom: 10px;
border: 1px solid #eaeaea;
}
.dis_tit {
height: 28px;
background-color: #f6f6f6;
border-bottom: 1px solid #eaeaea;
position: relative;
}
.dis_tit ul {
width: 100%;
height: 29px;
position: absolute;
left: 0;
top: 0;
}
.dis_check {
width: 109px;
height: 27px;
text-align: center;
overflow: hidden;
background-color: #FFF;
border-right: 1px solid #FFF;
border-top: 2px solid #ff4e00;
}
.dis_tit ul li {
width: 110px;
height: 29px;
line-height: 27px;
overflow: hidden;
font-size: 14px;
text-align: center;
float: left;
}
.dis_tit ul li a:hover {
color: orangered;
}
.dis_con {
overflow: hidden;
margin: 25px;
}
.dis_con table {
width: 100%;
margin: 10px auto;
font-size: 13px;
color: #555555;
}
.dis_con td {
height: 24px;
}
.dis_t {
height: 38px;
line-height: 38px;
overflow: hidden;
background-color: #f6f6f6;
color: #ff4e00;
font-size: 14px;
text-indent: 25px;
border-bottom: 1px solid #eaeaea;
border-top: 2px solid #ff4e00;
}
.listben {
padding-top: 30px;
height: 100px;
overflow: hidden;
margin: 25px 20px 0 20px;
border-top: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
}
.lisin {
width: 175px;
text-align: center;
font-size: 14px;
color: orangered;
}
.lisin p {
font-size: 35px;
}
.listben ul {
display: inline-block;
}
.listben ul li {
display: inline-block;
}
.lisin2 {
border-right: 1px solid #DEDBDB;
width: 285px;
font-size: 12px;
color: gray;
}
.lisin2 p {
line-height: 25px;
}
.lisin3 {
height: 75px;
border-right: 1px solid #DEDBDB;
color: gray;
padding-left: 25px;
padding-right: 28px;
width: 185px;
font-size: 12px;
line-height: 22px;
}
.lisin4 {
vertical-align: 10px;
padding-left: 30px;
line-height: 22px;
color: gray;
font-size: 12px;
}
.lisin4 a div {
line-height: 35px;
text-align: center;
width: 120px;
height: 35px;
background: #EFEFEF;
border: 1px solid #EAEAEA;
font-size: 14px;
color: #555555;
}
.lisin4 a div:hover {
color: white;
background: orangered;
}
.pinglun {
width: 100%;
margin-top: 30px;
}
.pinglun li {
vertical-align: top;
width: 220px;
display: inline-block;
}
.pinglun ul {
padding: 20px;
line-height: 22px;
border-bottom: 1px solid #eaeaea;
color: #555555;
font-size: 12px;
padding-left: 20px;
}
.pinglun li img {
margin-right: 5px;
vertical-align: -5px;
}
.pages {
overflow: hidden;
color: #888888;
padding: 20px 10px;
text-align: right;
font-size: 16px;
margin-top: 20px;
}
.pages a {
height: 36px;
line-height: 36px;
overflow: hidden;
color: #666666;
font-size: 16px;
text-align: center;
display: inline-block;
padding: 0 12px;
margin: 0 4px;
border: 1px solid #cccccc;
}
.pages a.p_pre:hover {
color: #666666;
border: 1px solid #cccccc;
background: #EDEDED;
}
.pages a.dnf {
color: white;
background-color: #FF4E00;
border: 1px solid #FF4E00;
}
.pages a:hover {
color: white;
background-color: #FF4E00;
border: 1px solid #FF4E00;
}
.footer-img {
margin-left: 90px;
margin-top: 50px;
}
.ul-img {
display: inline-block;
}
.ul-img li {
margin-right: 50px;
color: gray;
font-size: 10px;
text-align: center;
width: 210px;
display: inline-block;
}
.ul-img li a img {
transition: all 3s;
}
.ul-img li a img:hover {
transform: rotate(360deg) scale(1.2);
}
.ul-img li h2 {
margin-top: 8px;
margin-bottom: 8px;
color: black;
font-size: 16px;
font-weight: 400;
}
.div_nav {
margin-top: 40px;
margin-left: 100px;
font-size: 12px;
margin-bottom: 100px;
}
.div_nav ul:nth-of-type(1) {
position: absolute;
display: inline-block;
}
.div_nav ul:nth-of-type(2) {
margin-left: 180px;
margin-right: 100px;
display: inline-block;
}
.div_nav ul:nth-of-type(3) {
margin-right: 100px;
display: inline-block;
}
.div_nav ul:nth-of-type(4) {
margin-right: 100px;
display: inline-block;
}
.div_nav ul:nth-of-type(5) {
margin-right: 100px;
display: inline-block;
}
.div_nav ul li {
margin-top: 8px;
}
.div_nav ul li a:hover {
color: orangered;
}
.div_nav span a {
color: black;
font-size: 14px;
}
.div_nav span a:hover {
text-decoration: underline;
}
.b_er {
float: right;
}
.b_tel_bg {
float: right;
}
.b_er_a {
position: absolute;
margin-top: -190px;
margin-left: 950px;
}
.b_er_c {
margin-bottom: 15px;
}
.b_sh1 {
margin-left: 15px;
width: 100%;
height: 35px;
line-height: 35px;
overflow: hidden;
background: url(../img/b_sh_1.png) no-repeat left center;
color: #888888;
font-size: 14px;
text-indent: 32px;
display: inline-block;
}
.b_sh2 {
margin-left: 15px;
width: 100%;
height: 35px;
line-height: 35px;
overflow: hidden;
background: url(../img/b_sh_2.png) no-repeat left center;
color: #888888;
font-size: 14px;
text-indent: 32px;
display: inline-block;
}
.b_tel_bg a:hover {
color: orangered;
}
.b_tel_bg p {
color: gray;
margin-left: 15px;
font-size: 12px;
margin-top: 10px;
}
.b_tel_bg span {
position: absolute;
margin-top: 10px;
color: #ff4e00;
font-size: 18px;
}
.btm {
margin-top: 150px;
color: gray;
text-align: center;
font-size: 12px;
}
.btm img {
border-radius: 5px;
width: 98px;
height: 33px;
margin-top: 20px;
margin-right: 20px;
border: 1px solid #D9D9D9;
}
商品页面详情效果:
搜索页面HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/搜索页面.css" />
</head>
<body>
<header>
<div class="nav">
<div class="nav1">
<span>
送货至:四川
</span>
<div class="nav2">
<div class="nav3">
<span>你好!<a href="登录.html">请登录</a></span>
<span>
<a href="注册.html" style="color: orangered;">免费注册</a>
|
<a href="注册.html">我的订单</a>
|
</span>
</div>
<ul class="ul">
<li class="li">
<a href="#">收藏夹</a>
</li>
<li class="li">
<a href="#">客户服务</a>
<div class="div_1">
<div>
<a href="#">客户服务</a>
</div>
<div>
<a href="#">客户服务</a>
</div>
<div>
<a href="#">客户服务</a>
</div>
</div>
</li>
<li class="li">
<a href="#">网站导航</a>
</li>
</ul>
<span class="span_1">
| <a href="#">关注我们：</a>
<span>
<a href="#"><img src="img/sh1.png" class="img1"></a>
<a href="#"><img src="img/sh2.png" class="img2"></a>
</span>
</span>
<span class="fr"> |
<a href="#">手机版
<img src="img/s_tel.png" style="vertical-align: -3px;">
</a>
</span>
</div>
</div>
</div>
<div class="div-box">
<div class="logo">
<a href="首页.html"><img src="img/logo.png"></a>
</div>
<div class="input-box">
<form action="#" method="post">
<input class="input1" type="text" placeholder="请输入关键字">
<input class="input2" type="submit" value="搜索">
</form>
<div class="div-box2">
<ul>
<li>
<a href="#">咖啡</a>
</li>
<li>
<a href="#">iphone 6S</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="login">
<div class="div-login">
<a href="#">购物车</a>
</div>
</div>
</div>
</header>
<section class="section">
<div class="div-box3">
<div class="div-head">
<div class="h3">
全部商品分类
</div>
<ul class="div-ul">
<li>
<a href="首页.html" style="color: #FF4141;"><strong>首页</strong></a>
</li>
<li>
<a href="#" style="color: #FF4141;"><strong>自营超市</strong></a>
</li>
<li>
<a href="#"><strong>1号团</strong></a>
</li>
<li>
<a href="#"><strong>1号超市</strong></a>
</li>
<li>
<a href="#"><strong>女装</strong></a>
</li>
<li>
<a href="#"><strong>美妆</strong></a>
</li>
<li>
<a href="#"><strong>1号海购</strong></a>
</li>
<li>
<a href="#"><strong>团购</strong></a>
</li>
</ul>
<div class="img-logo">
<a href="#"><img src="img/phone.png"></a>
</div>
</div>
</div>
<div class="box_div">
<div class="postion">
<span>全部 > 珠宝饰品 > 珍珠项链 > </span>
<span class="span_div">
<span>品牌：<i>珠韵首饰</i></span>
</span>
</div>
<div class="content">
<div class="choise">
<ul>
<li class="li1">品牌：</li>
<li class="li2">
<a href="#" class="now">珠韵首饰/ZHUYUN JEWELLERY</a>
<a href="#">施华洛世奇/Swarovski</a>
<a href="#">海瞳</a>
<a href="#">周大福/CHOW TAI FOOK</a>
<a href="#">京润珍珠</a>
<a href="#">佰色传情 /BRI.R</a>
<a href="#">迈姿/Maizi</a>
<a href="#">Ginasy Jewelry</a>
<a href="#">心鑫圆</a>
<a href="#">银斯妮/yin si ni silver</a>
<a href="#">迈姿/Maizi</a>
<a href="#">Ginasy Jewelry</a>
<a href="#">蛟蓓</a>
<a href="#">芭比/Barbie</a>
<a href="#">珍福祥</a>
<a href="#">珍福祥</a>
</li>
</ul>
<ul>
<li class="li1">价格：</li>
<li class="li3">
<a href="#">0-199</a>
<a href="#" class="now">200-399</a>
<a href="#">400-599</a>
<a href="#">600-899</a>
<a href="#">900-1299</a>
<a href="#">1300-1399</a>
<a href="#">1400以上</a>
</li>
</ul>
<ul>
<li class="li5">珍珠颜色：</li>
<li class="li4">
<a href="#">混彩</a>
<a href="#">黑色系</a>
<a href="#">粉色系</a>
<a href="#">白色系</a>
<a href="#">金色系</a>
<a href="#">紫色系</a>
</li>
</ul>
<ul>
<li class="li5">珍珠分类：</li>
<li class="li4">
<a href="#">天然海水珍珠</a>
<a href="#">养殖海水珍珠</a>
<a href="#">养殖淡水珍珠</a>
<a href="#">天然淡水珍珠</a>
</li>
</ul>
</div>
</div>
<div class="l_history">
<div class="his_t">
<span>浏览历史</span>
<span class="fr"><a href="#">清空</a></span>
</div>
<ul>
<li>
<div class="img">
<a href="#"><img src="img/his_1.jpg"></a>
</div>
<div class="name">
<a href="#">Dior/迪奥香水2件套装</a>
</div>
<div class="price">
<span>￥368.00</span>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/his_2.jpg"></a>
</div>
<div class="name">
<a href="#">Dior/迪奥香水2件套装</a>
</div>
<div class="price">
<span>￥768.00</span>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/his_3.jpg"></a>
</div>
<div class="name">
<a href="#">Dior/迪奥香水2件套装</a>
</div>
<div class="price">
<span>￥680.00</span>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/his_4.jpg"></a>
</div>
<div class="name">
<a href="#">Dior/迪奥香水2件套装</a>
</div>
<div class="price">
<span>￥368.00</span>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/his_5.jpg"></a>
</div>
<div class="name">
<a href="#">Dior/迪奥香水2件套装</a>
</div>
<div class="price">
<span>￥368.00</span>
</div>
</li>
</ul>
</div>
<div class="list_so">
<div class="list_tI">
<span class="list_new">
<a href="#" class="list_a">默认</a>
<a href="#"><span>销量</span><span class="span1"></span><span class="span2"></span></a>
<a href="#"><span>价格</span><span class="span1"></span><span class="span2"></span></a>
<a href="#">新品</a>
</span>
<span class="tr">共发现120件</span>
</div>
</div>
<div class="list_c">
<ul class="ul_list">
<li>
<div class="img">
<a href="#"><img src="img/per_1.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥198.00</span>
</div>
<div class="name_a">
<a href="#">海瞳7-8mm水滴形天然珍珠项链</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_2.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥598.00</span>
</div>
<div class="name_a">
<a href="#">佰色传情淡水珍珠项链圆8-9mm</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_3.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥440.00</span>
</div>
<div class="name_a">
<a href="#">京润 【魅惑】海水珍珠项链</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_4.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥680.00</span>
</div>
<div class="name_a">
<a href="#">心鑫圆 天然珍珠项链淡水套装</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_5.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥1980.00</span>
</div>
<div class="name_a">
<a href="#">海瞳 明星款 玛瑙天然淡水珍珠</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_6.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥198.00</span>
</div>
<div class="name_a">
<a href="#">佰色传情 淡水珍珠项链 </a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_7.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥390.00</span>
</div>
<div class="name_a">
<a href="#">7-8mm米形珍珠 加长型 </a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_8.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥2980.00</span>
</div>
<div class="name_a">
<a href="#">珠韵首饰 多色可选(白色)</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_9.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥670.00</span>
</div>
<div class="name_a">
<a href="#">小清新8.5-10.5mm珍珠吊坠项链正圆饰品</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_10.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥2198.00</span>
</div>
<div class="name_a">
<a href="#">京润 【简爱】 淡水珍珠项链</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_11.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥5198.00</span>
</div>
<div class="name_a">
<a href="#">海瞳 罕见7-8mm高亮泽 表皮光滑 </a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_12.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥212.00</span>
</div>
<div class="name_a">
<a href="#"> 媲美海水珠 天然浅粉金色珍珠项链</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_13.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥618.00</span>
</div>
<div class="name_a">
<a href="#">无暇品质(925银玫瑰花型银扣)</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_14.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥260.00</span>
</div>
<div class="name_a">
<a href="#">珍珠吊坠925银镀金 淡水珍珠项链锁骨链</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_15.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥198.00</span>
</div>
<div class="name_a">
<a href="#">海瞳 淡水珍珠项链锁骨链</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_16.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥698.00</span>
</div>
<div class="name_a">
<a href="#">海瞳 淡水珍珠吊坠</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_17.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥198.00</span>
</div>
<div class="name_a">
<a href="#"> 超强光珍珠吊坠项链</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_18.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥865.00</span>
</div>
<div class="name_a">
<a href="#"> 节节高升花生款(玫瑰色款)</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_19.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥198.00</span>
</div>
<div class="name_a">
<a href="#">佰色传情 编织款珍珠项链</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
<li>
<div class="img">
<a href="#"><img src="img/per_12.jpg" width="210" height="185"></a>
</div>
<div class="price_a">
<span>￥2198.00</span>
</div>
<div class="name_a">
<a href="#">珠圆玉润 送爱人</a>
</div>
<div class="carbg">
<a href="#" class="shoucang">收藏</a>
<a href="#" class="j_car">加入购物车</a>
</div>
</li>
</ul>
</div>
</div>
<div class="pages">
<a href="#" class="p_pre">上一页</a>
<a href="#" class="dnf">1</a>
<a href="#">2</a>
<a href="#">3</a>
...
<a href="#">20</a>
<a href="#" class="p_pre">下一页</a>
</div>
</section>
<footer style="width: 1200px; margin: 0 auto;">
<div class="footer-img">
<ul class="ul-img">
<li>
<a><img src="img/b1.png" width="62" height="62"></a>
<div>
<h2>正品保障</h2>正品行货 放心购买</div>
</li>
<li>
<a><img src="img/b2.png" width="62" height="62"></a>
<div>
<h2>满38包邮</h2>满38包邮 免运费</div>
</li>
<li>
<a><img src="img/b3.png" width="62" height="62"></a>
<div>
<h2>天天低价</h2>天天低价 畅选无忧</div>
</li>
<li>
<a><img src="img/b4.png" width="62" height="62"></a>
<div>
<h2>准时送达</h2>收货时间由你做主</div>
</li>
</ul>
</div>
<div class="div_nav">
<ul>
<span><a href="#">新手上路</a></span>
<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>
<ul>
<span><a href="#">配送与支付</a></span>
<li>
<a href="#">货到付款区域</a>
</li>
<li>
<a href="#">配送支付查询</a>
</li>
<li>
<a href="#">支付方式说明</a>
</li>
</ul>
<ul>
<span><a href="#">会员中心</a></span>
<li>
<a href="#">资金管理</a>
</li>
<li>
<a href="#">我的收藏</a>
</li>
<li>
<a href="#">我的订单</a>
</li>
</ul>
<ul>
<span><a href="#">服务保证</a></span>
<li>
<a href="#">退换货原则</a>
</li>
<li>
<a href="#">售后服务保证</a>
</li>
<li>
<a href="#">产品质量保证</a>
</li>
</ul>
<ul>
<span><a href="#">联系我们</a></span>
<li>
<a href="#">网站故障报告</a>
</li>
<li>
<a href="#">购物咨询</a>
</li>
<li>
<a href="#">投诉与建议</a>
</li>
</ul>
</div>
<div class="b_er_a">
<div class="b_tel_bg">
<a href="#" class="b_sh1">新浪微博</a>
<a href="#" class="b_sh2">腾讯微博</a>
<p>
服务热线：<br>
<span>400-123-4567</span>
</p>
</div>
<div class="b_er">
<div class="b_er_c">
<img src="img/er.gif"></div>
<img src="img/ss.png">
</div>
</div>
<div class="btm">
备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 , Technical Support: Dgg Group <br>
<img src="img/b_1.gif">
<img src="img/b_2.gif">
<img src="img/b_3.gif">
<img src="img/b_4.gif">
<img src="img/b_5.gif">
<img src="img/b_6.gif">
</div>
</footer>
</body>
</html>
搜索页面CSS样式:
* {
margin: 0px;
padding: 0px;
}
.nav {
color: gray;
line-height: 35px;
font-size: 12px;
background: linear-gradient(to bottom, #E2E2E2, #F3F3F3, #F5F5F5);
}
.nav1 {
text-indent: 4em;
}
.nav2 {
margin-right: 50px;
float: right;
}
.nav3 {
margin-right: -55px;
float: left;
}
a {
text-decoration: none;
color: gray;
}
header a:hover {
color: orangered;
}
ul {
list-style: none;
}
.ul {
float: left;
}
.li {
padding: 10px 0;
background: url(../img/t_arrow.gif) no-repeat right center;
display: inline;
margin-left: 10px;
padding-right: 15px;
}
.div_1 {
width: 115px;
overflow: hidden;
position: absolute;
right: 320px;
top: 30px;
z-index: 1000;
border: 1px solid #cdcdcd;
display: none;
}
.div_1 div {
margin-left: -12px;
}
.span_1 {
margin-left: -35px;
}
.img1 {
vertical-align: -2px;
margin-right: 5px;
}
.img2 {
vertical-align: -3px;
}
.li:hover .div_1 {
display: block;
}
.logo {
display: inline-block;
vertical-align: 10px;
margin-top: 50px;
margin-left: 65px;
}
.input-box {
margin-left: 200px;
display: inline-block;
}
.input1 {
width: 408px;
height: 40px;
line-height: 36px;
overflow: hidden;
color: #555555;
font-size: 14px;
float: left;
padding: 0 10px;
border: 2px solid #ff3c3c;
border-right: 0;
outline: none;
}
.input2 {
width: 90px;
height: 44px;
line-height: 45px;
background-color: #ff3c3c;
color: #FFF;
font-size: 16px;
text-align: center;
float: left;
border: none;
outline: none;
cursor: pointer;
}
.div-box2 {
font-size: 12px;
}
.div-box2 ul {
margin-top: 10px;
display: inline-block;
}
.div-box2 li {
display: inline-block;
margin-right: 15px;
}
.login {
vertical-align: 35px;
width: 120px;
height: 40px;
line-height: 40px;
background: #F6F6F6;
display: inline-block;
text-align: center;
margin-left: 220px;
border: 1px solid #DFDFDF;
position: relative;
}
.div-login {
background: url(../img/car.png)no-repeat 0 12px;
margin-left: 10px;
margin-right: -10px;
}
.section {
margin: 0px auto;
width: 1300px;
}
.h3 {
display: inline-block;
margin-top: 40px;
color: white;
width: 210px;
text-indent: 3em;
line-height: 40px;
background: #FF3C3C;
}
.div-ul {
display: inline-block;
}
.div-ul li {
margin-right: 25px;
margin-left: 5px;
display: inline-block;
}
.div-ul li a {
color: black;
}
.div-ul li a:hover {
color: red;
}
.img-logo {
margin-left: 340px;
vertical-align: -10px;
display: inline-block;
}
.div-box3 {
border-bottom: 1px solid #FF4E00;
}
.box_div {
width: 100%;
min-width: 1200px;
overflow: hidden;
}
.postion {
color: #888888;
width: 1200px;
height: 40px;
font-size: 12px;
line-height: 40px;
overflow: hidden;
margin-top: 10px;
}
.span_div {
text-align: center;
overflow: hidden;
padding: 5px 10px 5px 10px;
margin-left: 8px;
border: 1px dashed red;
}
.span_div i {
color: orangered;
}
.content {
margin-top: 20px;
}
.choise {
width: 1295px;
border: 2px solid #cccccc;
}
.choise ul li {
color: gray;
display: inline-block;
font-size: 12px;
}
.choise ul {
border-bottom: 1px solid #cccccc;
}
.choise ul li a {
margin-right: 25px;
}
.choise ul li a:hover {
color: orangered;
}
.choise ul li a.now {
color: orangered;
}
.li1 {
padding: 20px;
}
.li2 {
margin-top: 10px;
line-height: 25px;
vertical-align: -25px;
height: 65px;
margin-left: 60px;
width: 1030px;
}
.li3 {
margin-left: 60px;
width: 1030px;
}
.li4 {
margin-left: 55px;
width: 1030px;
line-height: 50px;
}
.li5 {
padding: 10px;
}
.l_history {
width: 209px;
overflow: hidden;
float: left;
margin-top: 20px;
border: 1px solid #eaeaea;
}
.his_t {
height: 38px;
line-height: 38px;
overflow: hidden;
background: url(../img/h_t.gif) no-repeat 10px center;
color: #ff4e00;
font-size: 15px;
padding-left: 22px;
padding-right: 10px;
border-bottom: 1px solid #eaeaea;
}
.fr {
color: gray;
font-size: 14px;
float: right;
}
.img {
width: 185px;
height: 162px;
overflow: hidden;
margin-top: 10px;
}
.name {
height: 25px;
line-height: 25px;
overflow: hidden;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.name a:hover {
color: orangered;
}
.price {
text-align: center;
color: #B00504;
font-size: 18px;
}
.list_so {
margin-top: 20px;
width: 1065px;
overflow: hidden;
float: left;
padding-bottom: 30px;
}
.list_tI {
height: 39px;
line-height: 39px;
overflow: hidden;
border-bottom: 1px solid #eaeaea;
}
.list_new a {
width: 68px;
height: 23px;
line-height: 23px;
overflow: hidden;
color: #555555;
text-indent: 12px;
float: left;
display: inline;
margin-right: -1px;
margin-top: 6px;
font-size: 12px;
border: 1px solid #cccccc;
}
.list_new a:hover {
color: white;
background: #FF4E00;
}
.list_new a.list_a {
color: white;
background: #FF4E00;
}
.span1 {
position: absolute;
margin-top: 6px;
margin-left: 15px;
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-bottom: 3.5px solid gray;
}
.span2 {
position: absolute;
margin-top: 14px;
margin-left: 15px;
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 3.5px solid gray;
}
.list_new a:hover .span1 {
position: absolute;
margin-top: 6px;
margin-left: 15px;
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-bottom: 3.5px solid white;
}
.list_new a:hover .span2 {
position: absolute;
margin-top: 14px;
margin-left: 15px;
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 3.5px solid white;
}
.tr {
float: right;
font-size: 12px;
}
.list_c{
width: 1100px;
margin-left: 220px;
}
.list_c li {
width: 232px;
height: 316px;
overflow: hidden;
float: left;
display: inline;
margin: 0 20px;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.list_c li:hover {
background-color: #FFF;
box-shadow: 0 0 5px #e0e0e0;
}
.price_a {
font-size: 18PX;
color: orangered;
}
.name_a {
text-align: center;
width: 208px;
height: 30px;
line-height: 30px;
overflow: hidden;
font-size: 14px;
color: #555555;
}
.name_a a:hover {
color: orangered;
}
.img {
width: 210px;
height: 185px;
overflow: hidden;
margin-top: 5px;
}
.shoucang {
width: 68px;
height: 30px;
line-height: 28px;
overflow: hidden;
background: url(../img/heart.png) no-repeat 10px center;
color: #888888;
text-indent: 33px;
float: left;
display: inline;
font-size: 12px;
margin-right: -1px;
border: 1px solid #CCCCCC;
}
.shoucang:hover {
color: #888888;
background: url(../img/heart_h.png) no-repeat 10px center;
}
.list_c li:hover .j_car {
color: #FFF;
background: #FF4500 url(../img/cars_h.png) no-repeat 24px center;
}
.j_car {
width: 140px;
height: 30px;
overflow: hidden;
background: url(../img/cars.png) no-repeat 24px center;
color: #FF4500;
text-indent: 47px;
float: left;
font-size: 12px;
line-height: 30px;
border: 1px solid #CCCCCC;
}
.j_car:hover {
color: #FFF;
background: #FF4500 url(../img/cars_h.png) no-repeat 24px center;
}
.pages {
overflow: hidden;
color: #888888;
padding: 20px 10px;
text-align: right;
font-size: 16px;
margin-top: 20px;
}
.pages a {
height: 36px;
line-height: 36px;
overflow: hidden;
color: #666666;
font-size: 16px;
text-align: center;
display: inline-block;
padding: 0 12px;
margin: 0 4px;
border: 1px solid #cccccc;
}
.pages a.p_pre:hover {
color: #666666;
border: 1px solid #cccccc;
background: #EDEDED;
}
.pages a.dnf {
color: white;
background-color: #FF4E00;
border: 1px solid #FF4E00;
}
.pages a:hover {
color: white;
background-color: #FF4E00;
border: 1px solid #FF4E00;
}
.footer-img {
margin-left: 90px;
margin-top: 50px;
}
.ul-img {
display: inline-block;
}
.ul-img li {
margin-right: 50px;
color: gray;
font-size: 10px;
text-align: center;
width: 210px;
display: inline-block;
}
.ul-img li a img {
transition: all 3s;
}
.ul-img li a img:hover {
transform: rotate(360deg) scale(1.2);
}
.ul-img li h2 {
margin-top: 8px;
margin-bottom: 8px;
color: black;
font-size: 16px;
font-weight: 400;
}
.div_nav {
margin-top: 40px;
margin-left: 100px;
font-size: 12px;
margin-bottom: 100px;
}
.div_nav ul:nth-of-type(1) {
position: absolute;
display: inline-block;
}
.div_nav ul:nth-of-type(2) {
margin-left: 180px;
margin-right: 100px;
display: inline-block;
}
.div_nav ul:nth-of-type(3) {
margin-right: 100px;
display: inline-block;
}
.div_nav ul:nth-of-type(4) {
margin-right: 100px;
display: inline-block;
}
.div_nav ul:nth-of-type(5) {
margin-right: 100px;
display: inline-block;
}
.div_nav ul li {
margin-top: 8px;
}
.div_nav ul li a:hover {
color: orangered;
}
.div_nav span a {
color: black;
font-size: 14px;
}
.div_nav span a:hover {
text-decoration: underline;
}
.b_er {
float: right;
}
.b_tel_bg {
float: right;
}
.b_er_a {
position: absolute;
margin-top: -190px;
margin-left: 950px;
}
.b_er_c {
margin-bottom: 15px;
}
.b_sh1 {
margin-left: 15px;
width: 100%;
height: 35px;
line-height: 35px;
overflow: hidden;
background: url(../img/b_sh_1.png) no-repeat left center;
color: #888888;
font-size: 14px;
text-indent: 32px;
display: inline-block;
}
.b_sh2 {
margin-left: 15px;
width: 100%;
height: 35px;
line-height: 35px;
overflow: hidden;
background: url(../img/b_sh_2.png) no-repeat left center;
color: #888888;
font-size: 14px;
text-indent: 32px;
display: inline-block;
}
.b_tel_bg a:hover {
color: orangered;
}
.b_tel_bg p {
color: gray;
margin-left: 15px;
font-size: 12px;
margin-top: 10px;
}
.b_tel_bg span {
position: absolute;
margin-top: 10px;
color: #ff4e00;
font-size: 18px;
}
.btm {
margin-top: 150px;
color: gray;
text-align: center;
font-size: 12px;
}
.btm img {
border-radius: 5px;
width: 98px;
height: 33px;
margin-top: 20px;
margin-right: 20px;
border: 1px solid #D9D9D9;
}
搜索页面效果:
