进口食品、生鲜
食品、饮料、酒
母婴、玩具、童装
家居、家庭清洁、纸品
美妆、个人护理、洗护
女装、内衣、中老年
鞋靴、箱包、腕表配饰
男装、运动
手机、小家电、电脑
礼品、充值
HTML 第十一章 作业
1号店登录页面
登录页面HTML代码:
1号店登录页面
您好，欢迎光临一号店！
请登录
帮助中心
登录页面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代码:
1号店注册页面
您好，欢迎光临一号店！
请登录
帮助中心
注册页面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代码:
首页
- 1
- 2
- 3
快讯
更多 >
- 【特惠】
掬一轮明月 表无尽惦念
- 【公告】
好奇金装成长裤新品上市
- 【特惠】
大牌闪购 · 抢！
- 【公告】
发福利 买车就抢千元油卡
- 【公告】
家电低至五折
1号钱包
收益日结，收益赚High！
￥53.00
16R
￥189 26R
￥5288 25R
￥360 18R
￥280 30R
首页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代码:
商品详情页面
所有团购 > 包饰 > 珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链
珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链
全国包邮 送妈妈，正圆级淡水珍珠，白色S925银链扣，使用方便，尊贵礼物。
本店价格：¥1786
参考价：¥3886
尺码：
- 43cm
- 45cm
- 50cm
颜色选择：
- 粉色
- 白色
分享
用户还喜欢
-
¥599
-
¥79
-
¥339
-
¥1860
-
¥758
商品名称：天然淡水珍珠
商品编号：1546211
品牌： 珠韵首饰
上架时间：2015-09-06 09:19:09
商品毛重：160.00g
商品产地：法国
珍珠形状：正圆
镶嵌材质：纯银
款式：项链
商品详情
商品评论
-
80.0%
好评度
-
好评（80%）
中评（20%）
差评（0%）
-
购买过珠韵首饰 天然银扣珍珠项链的顾客，在收到商品才可以对该商品发表评论
-
您可对已购买商品进行评价
我要评论
向死而生- 颜色分类：粉色
型号：43cm
- 产品很好，香味很喜欢，必须给赞。
2015-09-24
就是这么想的- 颜色分类：粉色
型号：43cm
- 送朋友，她很喜欢，大爱。
2015-09-24
墨镜墨镜- 颜色分类：白色
型号：43cm
- 大家都说不错
2015-09-24
那*****洋
（匿名用户）- 颜色分类：白色
型号：43cm
- 下次还会来买，推荐。
2015-09-24
商品页面详情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代码:
全部 > 珠宝饰品 > 珍珠项链 >
品牌：珠韵首饰
浏览历史
清空
-
￥368.00
-
￥768.00
-
￥680.00
-
￥368.00
-
￥368.00
-
￥198.00
-
￥598.00
-
￥440.00
-
￥680.00
-
￥1980.00
-
￥198.00
-
￥390.00
-
￥2980.00
-
￥670.00
-
￥2198.00
-
￥5198.00
-
￥212.00
-
￥618.00
-
￥260.00
-
￥198.00
-
￥698.00
-
￥198.00
-
￥865.00
-
￥198.00
-
￥2198.00
搜索页面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;
}
搜索页面效果: