很多小伙伴刚学HTML+CSS的时候总想找一个好的素材 那么今天它来了谷歌浏览器完美兼容！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
/* 头部 */
header {
width: 1536px;
height: 40px;
position: relative;
background-color: rgb(244, 244, 244);
margin: 0 auto;
}
header .place {
width: 150px;
height: 40px;
position: absolute;
top: 0px;
left: 80px;
color: rgb(112, 103, 104);
font-size: 14px;
line-height: 40px;
}
header .headerNav {
width: 1050px;
height: 40px;
position: absolute;
top: 0;
right: 0px;
}
header .headerNav ul {
float: right;
width: 720px;
height: 16px;
position: absolute;
top: 50%;
margin-top: -8px;
right: 0;
}
header .headerNav ul li {
float: left;
color: rgb(112, 103, 104);
font-size: 14px;
height: 16px;
line-height: 16px;
position: relative;
cursor: pointer;
}
header .headerNav ul li:hover {
color: red;
text-decoration: underline;
}
header .headerNav ul li:nth-child(1) {
padding-right: 5px;
}
header .headerNav ul li:nth-child(2) {
padding-right: 5px;
}
header .headerNav ul li:nth-child(2) a {
color: rgb(252, 107, 40);
text-decoration: none;
}
header .headerNav ul li:nth-child(3) {
border-left: 2px solid rgb(159, 104, 156);
border-right: 2px solid rgb(159, 104, 156);
padding: 0 5px;
}
header .headerNav ul li:nth-child(4) {
width: 70px;
background-image: url(../material/oneShop/images/t_arrow.gif);
background-repeat: no-repeat;
background-position: 65px center;
padding-left: 15px;
}
header .headerNav ul li:nth-child(5) {
width: 80px;
background-image: url(../material/oneShop/images/t_arrow.gif);
background-repeat: no-repeat;
background-position: 62px center;
}
header .headerNav ul li:nth-child(6) {
width: 80px;
background-image: url(../material/oneShop/images/t_arrow.gif);
background-repeat: no-repeat;
background-position: 62px center;
padding-right: 7px;
}
header .headerNav ul li:nth-child(7) {
border-left: 2px solid rgb(159, 104, 156);
background-image: url(../material/oneShop/images/sh1.png);
background-repeat: no-repeat;
background-position: 72px center;
padding-right: 20px;
padding-left: 5px;
}
header .headerNav ul li:nth-child(8) {
background-image: url(../material/oneShop/images/sh2.png);
background-repeat: no-repeat;
width: 20px;
height: 16px;
background-position: 1px center;
margin-left: 5px;
margin-right: 5px;
}
header .headerNav ul li:nth-child(9) {
background-image: url(../material/Snipaste_2020-10-27_16-50-14.jpg);
background-repeat: no-repeat;
background-position: 70px center;
padding-right: 30px;
background-size: auto 100%;
margin-left: 10px;
border-left: 2px solid rgb(159, 104, 156);
padding-left: 15px;
}
/* logo 搜索框 购物车 */
.bgSearchCar {
width: 1500px;
height: 200px;
position: absolute;
top: 40px;
left: 50%;
margin-left: -750px;
position: relative;
}
.bgSearchCar .logoBg {
width: 250px;
height: 100px;
position: absolute;
left: -15px;
top: 50px;
background-image: url(../material/oneShop/images/logo.png);
background-repeat: no-repeat;
background-position: center center;
}
.bgSearchCar .search {
width: 670px;
height: 50px;
position: absolute;
top: 65px;
left: 300px;
position: relative;
color: black;
}
.bgSearchCar .search input {
width: 555px;
height: 50px;
position: absolute;
top: -1px;
left: -1px;
color: rgb(223, 217, 217);
text-indent: 10px;
font-size: 20px;
line-height: 50px;
border: 2px solid red;
}
.bgSearchCar .search button {
position: absolute;
top: -1px;
right: 0;
width: 115px;
height: 54px;
font-size: 20px;
line-height: 50px;
border: 2px solid red;
background-color: red;
color: #fff;
}
.bgSearchCar .search input:hover {
outline: none;
border: 2px solid red;
color: black;
}
.bgSearchCar .search button:hover {
outline: none;
border: 2px solid red;
cursor: pointer;
}
.bgSearchCar .searchHotText {
width: 555px;
height: 50px;
position: absolute;
top: 53px;
left: 0;
}
.bgSearchCar .searchHotText ul li {
float: left;
padding-right: 20px;
font-size: 16px;
color: rgb(77, 75, 75);
line-height: 50px;
cursor: pointer;
}
.bgSearchCar .searchHotText ul li:hover {
color: red;
text-decoration: underline;
}
.bgSearchCar .car {
width: 135px;
height: 50px;
border: 2px solid rgb(172, 169, 169);
position: absolute;
top: 64px;
right: 210px;
background-color: rgb(246, 246, 246);
font-size: 16px;
color: rgb(97, 95, 95);
line-height: 50px;
text-indent: 65px;
cursor: pointer;
}
.bgSearchCar .car:hover {
color: rgb(252, 136, 85);
box-shadow: 0px 0px 10px 3px rgb(167, 167, 167);
}
.bgSearchCar .car::before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
position: absolute;
top: 18px;
left: 18px;
background-image: url(../material/oneShop/images/car.png);
background-repeat: no-repeat;
background-position: 0px center;
background-size: 100% 100%;
transition: all .5s;
}
.bgSearchCar .car:hover::before {
transform: translateX(100px);
}
modity {
width: 1300px;
height: 547px;
margin: 41px auto;
position: relative;
}
modity .titleLeft {
width: 260px;
height: 55px;
line-height: 55px;
text-indent: 55px;
color: #fff;
background-color: rgb(248, 69, 69);
position: absolute;
top: -1px;
left: -1px;
border-bottom: 2px solid rgb(244, 113, 60);
}
modity .titleLeft:hover {
cursor: default;
}
modity .titleMiddle {
position: absolute;
left: 259px;
top: -1px;
width: 1041px;
height: 55px;
border-bottom: 2px solid rgb(244, 113, 60);
}
modity .titleMiddle ul li {
font-size: 18px;
color: rgb(34, 35, 36);
float: left;
padding-right: 40px;
line-height: 55px;
cursor: pointer;
transition: all .5s;
}
modity .titleMiddle ul li:hover {
color: red;
text-decoration: underline;
transform: scale(1.1);
}
modity .titleMiddle ul li:first-child {
padding-left: 20px;
color: rgb(236, 60, 47);
}
modity .titleMiddle ul li:nth-child(2) {
color: rgb(236, 60, 47);
}
modity .titleRight {
width: 260px;
height: 55px;
position: absolute;
top: -1px;
right: -1px;
}
modity .titleRight p {
font-size: 12px;
color: rgb(163, 156, 154);
line-height: 55px;
text-indent: 172px;
cursor: pointer;
}
modity .titleRight p:hover {
color: red;
}
modity .titleRight img {
position: absolute;
top: 18px;
left: 153px;
transition: all .2s;
cursor: pointer;
}
modity .titleRight img:hover {
transform: translateX(-10px);
}
/* 商品分类 */
modity modityClass {
width: 260px;
height: 600px;
position: absolute;
top: 57px;
left: -1px;
}
modity modityClass ul li {
width: 260px;
height: 50px;
overflow: hidden;
margin-top: -1px;
border-collapse: collapse;
background-color: rgb(176, 29, 29);
color: #fff;
font-size: 15px;
text-indent: 60px;
line-height: 50px;
background-image: url(../material/oneShop/images/rightA.png);
background-repeat: no-repeat;
background-position: 240px center;
cursor: pointer;
position: relative;
}
modity modityClass ul li:hover {
color: blue;
cursor: pointer;
text-decoration: underline;
background-color: rgba(176, 29, 29, 0.5);
}
modity modityClass ul li:first-child {
border-top: 1px solid transparent;
}
modity modityClass ul li .navBg {
position: absolute;
left: 20px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav1.png);
background-repeat: no-repeat;
}
modity modityClass ul li .navBg2 {
position: absolute;
left: 20px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav2.png);
background-repeat: no-repeat;
}
modity modityClass ul li .navBg3 {
position: absolute;
left: 20px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav3.png);
background-repeat: no-repeat;
}
modity modityClass ul li .navBg4 {
position: absolute;
left: 20px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav4.png);
background-repeat: no-repeat;
}
modity modityClass ul li .navBg5 {
position: absolute;
left: 25px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav5.png);
background-repeat: no-repeat;
}
modity modityClass ul li .navBg6 {
position: absolute;
left: 20px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav6.png);
background-repeat: no-repeat;
}
modity modityClass ul li .navBg7 {
position: absolute;
left: 20px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav7.png);
background-repeat: no-repeat;
}
modity modityClass ul li .navBg8 {
position: absolute;
left: 20px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav8.png);
background-repeat: no-repeat;
}
modity modityClass ul li .navBg9 {
position: absolute;
left: 20px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav9.png);
background-repeat: no-repeat;
}
modity modityClass ul li .navBg10 {
position: absolute;
left: 20px;
top: 18px;
width: 24px;
height: 24px;
background-image: url(../material/oneShop/images/nav10.png);
background-repeat: no-repeat;
}
modity modityMiddleBg {
width: 750px;
height: 491px;
position: absolute;
top: 56px;
left: 275px;
background-image: url(../material/oneShop/images/ban1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
vertical-align: middle;
position: relative;
}
modity modityMiddleBg .bgLeft {
width: 29px;
height: 60px;
position: absolute;
top: 50%;
margin-top: -25px;
left: 0px;
background-image: url(../material/oneShop/images/b_left.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
modity modityMiddleBg .bgRight {
width: 29px;
height: 60px;
position: absolute;
top: 50%;
margin-top: -25px;
right: 0px;
background-image: url(../material/oneShop/images/b_right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
modity modityMiddleBg .bgLeft:hover,
modity modityMiddleBg .bgRight:hover {
background-color: red;
cursor: pointer;
}
modity modityMiddleBg .number {
width: 106px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -65px;
bottom: 30px;
}
modity modityMiddleBg .number ul {
text-align: center;
}
modity modityMiddleBg .number ul li {
float: left;
border: 1px solid rgb(204, 192, 179);
width: 20px;
height: 20px;
background-color: rgb(204, 192, 179);
margin-left: 10px;
border-radius: 50%;
line-height: 20px;
text-align: center;
transition: all .5s;
}
modity modityMiddleBg .number ul li:hover {
cursor: pointer;
background-color: red;
color: #ffffff;
transform: rotate(720deg);
}
modity modityMiddleBg .number ul li:first-child {
background-color: red;
color: #ffffff;
}
modityRightNews {
width: 240px;
height: 489px;
border: 2px solid rgb(212, 212, 212);
position: absolute;
top: 56px;
right: 0px;
border-top: 0px solid transparent;
}
modityRightNews .kuaixun {
position: absolute;
top: 0px;
left: 0px;
width: 238px;
height: 265px;
}
modityRightNews .kuaixun ul li {
height: 32px;
width: 239px;
border-collapse: collapse;
}
.kuaixun ul li {
font-size: 12px;
color: rgb(134, 134, 134);
height: 32px;
line-height: 32px;
text-indent: 4px;
cursor: pointer;
transition: all .5s;
}
.kuaixun ul li:hover {
transform: scale(1.1);
overflow: hidden;
}
modityRightNews .kuaixun ul li:nth-child(1):hover {
transform: scale(1);
}
.kuaixun ul li span {
color: black;
font-size: 16px;
line-height: 35px;
color: red;
}
modityRightNews .kuaixun ul li:first-child {
height: 40px;
width: 239px;
position: relative;
border-bottom: 1px dotted rgb(212, 212, 212);
}
modityRightNews .kuaixun ul li:first-child .left {
width: 70px;
height: 39px;
position: absolute;
top: 0px;
left: 0px;
text-indent: 10px;
font-size: 20px;
font-weight: 500;
line-height: 39px;
cursor: default;
color: rgb(69, 73, 73);
}
modityRightNews .kuaixun ul li:first-child .right {
width: 80px;
height: 39px;
position: absolute;
top: 0px;
right: -1px;
text-indent: 38px;
font-size: 12px;
line-height: 39px;
color: rgb(157, 150, 148);
background-image: url(../material/oneShop/images/rightA.png);
background-repeat: no-repeat;
cursor: default;
background-position: 68px center;
}
/* 1号钱包 */
.oneMoney {
width: 240px;
height: 50px;
border-top: 1px solid rgb(212, 212, 212);
border-bottom: 1px dotted rgb(212, 212, 212);
position: absolute;
right: 2px;
bottom: 173px;
color: black;
font-size: 20px;
line-height: 50px;
text-indent: 5px;
cursor: default;
}
.oneMoneybody {
width: 238px;
height: 169px;
position: absolute;
right: 2px;
bottom: 2px;
}
.moneyTitle {
width: 240px;
height: 30px;
line-height: 30px;
color: rgb(102, 102, 101);
font-size: 10px;
text-indent: 5px;
cursor: default;
}
.moneyBG {
width: 216px;
height: 126px;
margin: 5px 10px;
background-image: url(../material/oneShop/images/oneAD.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
/* transition: all .2s; */
}
.moneyBG:hover {
background-size: 110% 110%;
overflow: hidden;
}
.moneyBG .bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: none;
}
.moneyBG:hover .bg {
display: block;
overflow: hidden;
}
/*热门商品 */
.hotCommodity {
width: 1300px;
height: 310px;
margin: 0px auto;
}
.hotOne {
width: 260px;
height: 310px;
margin-left: -1px;
margin-top: -1px;
position: relative;
}
.hotOnebg {
width: 260px;
height: 280px;
background-image: url(../material/oneShop/images/l_img.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.hotOnePrice {
position: absolute;
bottom: 0px;
left: 0px;
width: 260px;
height: 30px;
background-color: rgb(216, 238, 252);
}
.priceNum {
display: inline-block;
position: absolute;
bottom: 5px;
left: 75px;
width: 70px;
height: 20px;
background-color: rgb(255, 81, 4);
color: #ffffff;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.HotNum {
display: inline-block;
position: absolute;
bottom: 10px;
right: 72px;
width: 20px;
height: 15px;
font-size: 10px;
color: rgb(255, 81, 4);
text-align: center;
line-height: 20px;
cursor: pointer;
}
.hotCommodity .hotNav {
width: 1022px;
height: 308px;
border: 1px solid rgb(173, 171, 171);
margin-top: -310px;
margin-left: 276px;
}
.hotCommodity .hotNav ul li {
float: left;
width: 250px;
height: 308px;
border-left: 1px solid rgb(173, 171, 171);
border-collapse: collapse;
overflow: hidden;
position: relative;
cursor: pointer;
}
.hotCommodity .hotNav ul li:first-child {
border: none;
}
.hotCommodity .hotNav ul li:nth-child(1)::after {
position: absolute;
left: 0;
top: 23px;
content: '';
display: block;
width: 250px;
height: 200px;
background-image: url(../material/oneShop/images/hot1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.hotCommodity .hotNav ul li:nth-child(2)::after {
position: absolute;
left: 0;
top: 23px;
content: '';
display: block;
width: 250px;
height: 200px;
background-image: url(../material/oneShop/images/hot2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.hotCommodity .hotNav ul li:nth-child(3)::after {
position: absolute;
left: 0;
top: 23px;
content: '';
display: block;
width: 250px;
height: 200px;
background-image: url(../material/oneShop/images/hot3.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.hotCommodity .hotNav ul li:nth-child(4)::after {
position: absolute;
left: 13px;
top: 23px;
content: '';
display: block;
width: 250px;
height: 200px;
background-image: url(../material/oneShop/images/hot4.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.hotCommodity .hotNav ul li:first-child::before {
position: absolute;
top: 30px;
left: 12px;
content: '';
display: block;
width: 50px;
height: 50px;
z-index: 1;
background-image: url(../material/oneShop/images/hot.png);
background-repeat: no-repeat;
background-size: 100% 100%;
transition: all .4s;
}
.hotCommodity .hotNav ul li:hover::before {
transform: rotate(720deg);
}
.hotCommodity .hotNav ul li:nth-child(2)::before {
position: absolute;
top: 30px;
left: 12px;
content: '';
display: block;
width: 50px;
height: 50px;
z-index: 1;
background-image: url(../material/oneShop/images/hot.png);
background-repeat: no-repeat;
transition: all .4s;
background-size: 100% 100%;
}
.hotCommodity .hotNav ul li:nth-child(3)::before {
position: absolute;
top: 30px;
left: 12px;
content: '';
display: block;
width: 50px;
height: 50px;
z-index: 1;
background-image: url(../material/oneShop/images/hot.png);
background-repeat: no-repeat;
transition: all .4s;
background-size: 100% 100%;
}
.hotCommodity .hotNav ul li:nth-child(4)::before {
position: absolute;
top: 30px;
left: 12px;
content: '';
display: block;
width: 50px;
height: 50px;
z-index: 1;
background-image: url(../material/oneShop/images/hot.png);
background-repeat: no-repeat;
transition: all .4s;
background-size: 100% 100%;
}
.hotCommodity .hotNav ul li h3 {
display: block;
position: absolute;
bottom: 56px;
left: 50%;
margin-left: -100px;
width: 200px;
height: 25px;
z-index: 2;
text-align: center;
line-height: 25px;
cursor: pointer;
}
.hotCommodity .hotNav ul li p {
display: block;
position: absolute;
bottom: 35px;
left: 50%;
margin-left: -140px;
width: 280px;
height: 20px;
z-index: 2;
text-align: center;
line-height: 20px;
cursor: pointer;
color: rgb(77, 77, 77);
}
.hotCommodity .hotNav ul li .price {
display: inline-block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -50px;
width: 80px;
height: 34px;
z-index: 2;
text-align: center;
line-height: 34px;
font-size: 20px;
font-weight: 600;
color: rgb(255, 81, 4);
cursor: pointer;
}
.hotCommodity .hotNav ul li .allHotNum {
display: inline-block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: 31px;
width: 50px;
height: 34px;
z-index: 2;
text-align: center;
line-height: 34px;
font-size: 16px;
font-weight: 600;
color: rgb(102, 102, 102);
cursor: pointer;
}
.hotCommodity .hotNav ul li:last-child h3 {
display: block;
position: absolute;
bottom: 56px;
left: 50%;
margin-left: -90px;
width: 200px;
height: 25px;
z-index: 2;
text-align: center;
line-height: 25px;
cursor: pointer;
}
.hotCommodity .hotNav ul li:last-child p {
display: block;
position: absolute;
bottom: 35px;
left: 50%;
margin-left: -130px;
width: 280px;
height: 20px;
z-index: 2;
text-align: center;
line-height: 20px;
cursor: pointer;
color: rgb(77, 77, 77);
}
.hotCommodity .hotNav ul li:last-child .price {
display: inline-block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -40px;
width: 80px;
height: 34px;
z-index: 2;
text-align: center;
line-height: 34px;
font-size: 20px;
font-weight: 600;
color: rgb(255, 81, 4);
cursor: pointer;
}
.hotCommodity .hotNav ul li:last-child .allHotNum {
display: inline-block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: 41px;
width: 50px;
height: 34px;
z-index: 2;
text-align: center;
line-height: 34px;
font-size: 16px;
font-weight: 600;
color: rgb(102, 102, 102);
cursor: pointer;
}
.ad1 {
width: 1300px;
height: 122px;
margin: 45px auto;
background-image: url(../material/oneShop/images/mban_2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
position: relative;
}
/* 进口生鲜 */
.importFresh {
width: 1300px;
height: auto;
margin: 45px auto;
}
.importFresh .freshTitle {
width: 1300px;
height: 45px;
border-bottom: 2px solid rgb(255, 78, 0);
position: relative;
}
.importFresh .freshTitle .leftbg {
margin-top: 0;
margin-left: 5px;
width: 55px;
height: 45px;
background-image: url(../material/oneShop/images/floor.png);
background-repeat: no-repeat;
background-position: 5px center;
color: #ffffff;
line-height: 52px;
text-indent: 9px;
cursor: pointer;
}
.importFresh .freshTitle .leftText {
margin-top: -46px;
margin-left: 47px;
width: 100px;
height: 45px;
line-height: 52px;
text-indent: 9px;
color: rgb(255, 78, 0);
font-size: 18px;
cursor: pointer;
}
.importFresh .freshTitle ul {
width: 360px;
height: 45px;
position: absolute;
top: 0;
right: 0;
}
.importFresh .freshTitle ul li {
float: left;
padding-right: 15px;
line-height: 45px;
color: rgb(102, 102, 102);
font-size: 14px;
cursor: pointer;
}
.importFresh .freshTitle ul li:hover {
color: blue;
}
/* 导航栏 */
.importFershNav {
width: 260px;
height: 600px;
margin-top: 0;
margin-left: 0;
position: relative;
}
.importFershNav .slideShow {
width: 260px;
height: 370px;
position: absolute;
top: 0;
left: 0;
background-image: url(../material/oneShop/images/fre_r.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.importFershNav .slideShow::before {
position: absolute;
left: 0;
top: 162px;
content: '';
display: block;
width: 20px;
height: 40px;
background-image: url(../material/oneShop/images/b_left.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.importFershNav .slideShow::after {
position: absolute;
right: 0;
top: 162px;
content: '';
display: block;
width: 20px;
height: 40px;
background-image: url(../material/oneShop/images/b_right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.importFershNav .slideText {
width: 260px;
height: 230px;
position: absolute;
bottom: 0;
left: 0;
background-color: RGB(228, 247, 236);
}
.importFershNav li {
list-style: none;
}
.importFershNav .slideText .textOne {
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(228, 247, 236);
}
.importFershNav .slideText .textOne ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.importFershNav .slideText .textOne ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(3, 255, 192);
color: red;
}
.importFershNav .slideText .textTwo {
position: absolute;
top: 52px;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(228, 247, 236);
}
.importFershNav .slideText .textTwo ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.importFershNav .slideText .textTwo ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(3, 255, 192);
color: red;
}
.importFershNav .slideText .textThree {
position: absolute;
top: 104px;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(228, 247, 236);
}
.importFershNav .slideText .textThree ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.importFershNav .slideText .textThree ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(3, 255, 192);
color: red;
}
.importFershNav .slideText .textFour {
position: absolute;
top: 156px;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(228, 247, 236);
}
.importFershNav .slideText .textFour ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.importFershNav .slideText .textFour ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(3, 255, 192);
color: red;
}
/* 食品展示 */
.importFershNav .freshLeft {
position: absolute;
left: 1020px;
top: 0;
width: 280px;
height: 600px;
}
.importFershNav .freshLeft .freshLeftTop {
width: 287px;
height: 300px;
border-bottom: 1px solid rgb(173, 171, 171);
background-image: url(../material/oneShop/images/fre_b1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
right: 0px;
}
.importFershNav .freshLeft .freshLeftBottom {
position: absolute;
top: 301px;
right: 0px;
width: 287px;
height: 300px;
background-image: url(../material/oneShop/images/fre_b2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.importFershNav .freshMiddle {
position: absolute;
top: 0;
left: 260px;
width: 758px;
height: 600px;
}
.importFershNav .freshMiddle ul li {
float: left;
width: 246px;
height: 300px;
}
.importFershNav .freshMiddle ul li:nth-child(1) {
border-right: 1px solid rgb(173, 171, 171);
border-bottom: 1px solid rgb(173, 171, 171);
}
.importFershNav .freshMiddle ul li:nth-child(2) {
border-right: 1px solid rgb(173, 171, 171);
border-bottom: 1px solid rgb(173, 171, 171);
}
.importFershNav .freshMiddle ul li:nth-child(3) {
width: 259px;
border-bottom: 1px solid rgb(173, 171, 171);
}
.importFershNav .freshMiddle ul li:nth-child(4) {
border-right: 1px solid rgb(173, 171, 171);
}
.importFershNav .freshMiddle ul li:nth-child(5) {
border-right: 1px solid rgb(173, 171, 171);
}
.freshMiddle .freshMiddleTitle .TitleName {
display: block;
width: 240px;
height: 30px;
margin: 20px auto;
color: rgb(65, 65, 65);
line-height: 30px;
font-size: 14px;
text-align: center;
}
.freshMiddle .freshMiddleTitle .TiTlePrice {
display: block;
width: 240px;
height: 40px;
margin: 20px auto;
color: rgb(255, 81, 4);
line-height: 40px;
font-size: 25px;
text-align: center;
}
.freshMiddlePhoto {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/fre_1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
transition: all .5s;
}
.freshMiddlePhoto:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.freshMiddlePhoto2:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.freshMiddlePhoto3:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.freshMiddlePhoto4:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.freshMiddlePhoto5:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.freshMiddlePhoto6:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.freshMiddlePhoto2 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/fre_2.png);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.freshMiddlePhoto3 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/fre_3.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.freshMiddlePhoto4 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/fre_4.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.freshMiddlePhoto5 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/fre_5.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.freshMiddlePhoto6 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/fre_6.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
/* 个人美妆 */
.personal {
width: 1300px;
height: auto;
margin: 45px auto;
}
.personal .personalTitle {
width: 1300px;
height: 45px;
/* border-bottom: 2px solid rgb(255, 78, 0); */
border-bottom: 2px solid rgb(255, 78, 0);
position: relative;
}
.personal .personalTitle .leftbg {
margin-top: 0;
margin-left: 5px;
width: 55px;
height: 45px;
background-image: url(../material/oneShop/images/floor.png);
background-repeat: no-repeat;
background-position: 5px center;
color: #ffff;
line-height: 52px;
text-indent: 9px;
cursor: pointer;
}
.personal .personalTitle .leftText {
margin-top: -46px;
margin-left: 47px;
width: 100px;
height: 45px;
line-height: 52px;
text-indent: 9px;
color: rgb(255, 78, 0);
font-size: 18px;
cursor: pointer;
}
.personal .personalTitle ul {
width: 300px;
height: 45px;
position: absolute;
top: 0;
right: 0;
}
.personal .personalTitle ul li {
float: left;
padding-right: 15px;
line-height: 45px;
color: rgb(102, 102, 102);
font-size: 14px;
cursor: pointer;
}
.personal .personalTitle ul li:hover {
color: blue;
}
.personalNav {
width: 260px;
height: 600px;
margin-top: 0;
margin-left: 0;
position: relative;
}
.personalNav .slideshow {
width: 260px;
height: 370px;
position: absolute;
top: 0;
left: 0;
background-image: url(../material/oneShop/images/make_r.jpg);
background-repeat: no-repeat;
background-size: 104% 100%;
}
.personalNav .slideshow::before {
position: absolute;
left: 0;
top: 162px;
content: '';
display: block;
width: 20px;
height: 40px;
background-image: url(../material/oneShop/images/b_left.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.personalNav .slideshow::after {
position: absolute;
right: 0;
top: 162px;
content: '';
display: block;
width: 20px;
height: 40px;
background-image: url(../material/oneShop/images/b_right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.personalNav .slideText {
width: 260px;
height: 230px;
position: absolute;
bottom: 0;
left: 0;
background-color: RGB(254, 236, 234);
}
.personalNav .slideText .textOne {
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(254, 236, 234);
}
.personalNav .slideText .textOne ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.personalNav .slideText .textOne ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(253, 102, 122);
color: red;
}
.personalNav .slideText .textTwo {
position: absolute;
top: 52px;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(254, 236, 234);
}
.personalNav .slideText .textTwo ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.personalNav .slideText .textTwo ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(253, 102, 122);
color: red;
}
.personalNav .slideText .textThree {
position: absolute;
top: 104px;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(254, 236, 234);
}
.personalNav .slideText .textThree ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.personalNav .slideText .textThree ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(253, 102, 122);
color: red;
}
.personalNav .slideText .textFour {
position: absolute;
top: 156px;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(254, 236, 234);
}
.personalNav .slideText .textFour ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.personalNav .slideText .textFour ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(253, 102, 122);
color: red;
}
.personalNav .personalMiddle {
position: absolute;
top: 0;
left: 260px;
width: 758px;
height: 600px;
}
.personalNav .personalMiddle ul li {
float: left;
width: 246px;
height: 300px;
}
.personalNav .personalMiddle ul li:nth-child(1) {
border-right: 1px solid rgb(173, 171, 171);
border-bottom: 1px solid rgb(173, 171, 171);
}
.personalNav .personalMiddle ul li:nth-child(2) {
border-right: 1px solid rgb(173, 171, 171);
border-bottom: 1px solid rgb(173, 171, 171);
}
.personalNav .personalMiddle ul li:nth-child(3) {
width: 259px;
border-bottom: 1px solid rgb(173, 171, 171);
}
.personalNav .personalMiddle ul li:nth-child(4) {
border-right: 1px solid rgb(173, 171, 171);
}
.personalNav .personalMiddle ul li:nth-child(5) {
border-right: 1px solid rgb(173, 171, 171);
}
.personalMiddle .personalMiddleTitle .TitleName {
display: block;
width: 240px;
height: 30px;
margin: 20px auto;
color: rgb(65, 65, 65);
line-height: 30px;
font-size: 14px;
text-align: center;
}
.personalMiddle .personalMiddleTitle .TiTlePrice {
display: block;
width: 240px;
height: 40px;
margin: 20px auto;
color: rgb(255, 81, 4);
line-height: 40px;
font-size: 25px;
text-align: center;
}
.personalMiddlePhoto {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 144px;
background-image: url(../material/oneShop/images/make_1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
transition: all .5s;
}
.personalMiddlePhoto:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.personalMiddlePhoto2:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.personalMiddlePhoto3:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.personalMiddlePhoto4:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.personalMiddlePhoto5:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.personalMiddlePhoto6:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.personalMiddlePhoto2 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/make_2.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.personalMiddlePhoto3 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/make_3.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.personalMiddlePhoto4 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/make_4.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.personalMiddlePhoto5 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/make_5.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.personalMiddlePhoto6 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/make_6.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.meibaolian {
display: block;
width: 240px;
height: 30px;
margin: 20px auto;
color: rgb(65, 65, 65);
line-height: 30px;
font-size: 14px;
text-align: center;
position: absolute;
top: 0px;
left: 0px;
}
.meibaolianprice {
display: block;
width: 240px;
height: 40px;
margin: 20px auto;
color: rgb(255, 81, 4);
line-height: 40px;
font-size: 25px;
text-align: center;
position: absolute;
top: 50px;
left: 0;
}
.personalNav .personalLeft {
position: absolute;
left: 1020px;
top: 0;
width: 280px;
height: 600px;
}
.personalNav .personalLeft .personalLeftTop {
width: 287px;
height: 300px;
border-bottom: 1px solid rgb(173, 171, 171);
background-image: url(../material/oneShop/images/make_b1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
right: 0px;
}
.personalNav .personalLeft .personalLeftBottom {
position: absolute;
top: 301px;
right: 0px;
width: 287px;
height: 300px;
background-image: url(../material/oneShop/images/make_b2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* 母婴进口 */
.mab {
width: 1300px;
height: auto;
margin: 45px auto;
}
.mab .mabTitle {
width: 1300px;
height: 45px;
/* border-bottom: 2px solid rgb(255, 78, 0); */
border-bottom: 2px solid rgb(255, 78, 0);
position: relative;
}
.mab .mabTitle .leftbg {
margin-top: 0;
margin-left: 5px;
width: 55px;
height: 45px;
background-image: url(../material/oneShop/images/floor.png);
background-repeat: no-repeat;
background-position: 5px center;
color: #ffff;
line-height: 52px;
text-indent: 9px;
cursor: pointer;
}
.mab .mabTitle .leftText {
margin-top: -46px;
margin-left: 47px;
width: 100px;
height: 45px;
line-height: 52px;
text-indent: 9px;
color: rgb(255, 78, 0);
font-size: 18px;
cursor: pointer;
}
.mab .mabTitle ul {
width: 360px;
height: 45px;
position: absolute;
top: 0;
right: 0;
}
.mab .mabTitle ul li {
float: left;
padding-right: 15px;
line-height: 45px;
color: rgb(102, 102, 102);
font-size: 14px;
cursor: pointer;
}
.mab .mabTitle ul li:hover {
color: blue;
}
.mabNav {
width: 260px;
height: 600px;
margin-top: 0;
margin-left: 0;
position: relative;
}
.mabNav .slideshow {
width: 260px;
height: 370px;
position: absolute;
top: 0;
left: 0;
background-image: url(../material/oneShop/images/baby_r.jpg);
background-repeat: no-repeat;
background-size: 104% 100%;
}
.mabNav .slideshow::before {
position: absolute;
left: 0;
top: 162px;
content: '';
display: block;
width: 20px;
height: 40px;
background-image: url(../material/oneShop/images/b_left.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.mabNav .slideshow::after {
position: absolute;
right: 0;
top: 162px;
content: '';
display: block;
width: 20px;
height: 40px;
background-image: url(../material/oneShop/images/b_right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.mabNav .slideText {
width: 260px;
height: 230px;
position: absolute;
bottom: 0;
left: 0;
background-color: RGB(252, 235, 243);
}
.mabNav .slideText .textOne {
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(252, 235, 243);
}
.mabNav .slideText .textOne ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.mabNav .slideText .textOne ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(253, 102, 122);
color: red;
}
.mabNav .slideText .textTwo {
position: absolute;
top: 52px;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(252, 235, 243);
}
.mabNav .slideText .textTwo ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.mabNav .slideText .textTwo ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(253, 102, 122);
color: red;
}
.mabNav .slideText .textThree {
position: absolute;
top: 104px;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(252, 235, 243);
}
.mabNav .slideText .textThree ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.mabNav .slideText .textThree ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(253, 102, 122);
color: red;
}
.mabNav .slideText .textFour {
position: absolute;
top: 156px;
left: 0;
width: 260px;
height: 50px;
border-bottom: 2px dotted rgb(173, 171, 171);
background-color: rgb(252, 235, 243);
}
.mabNav .slideText .textFour ul li {
float: left;
line-height: 50px;
padding-left: 35px;
color: rgb(85, 85, 85);
font-size: 14px;
cursor: pointer;
transition: all .3s;
}
.mabNav .slideText .textFour ul li:hover {
transform: translateX(5px) translateY(-5px);
box-shadow: -3px -3px 3px 3px rgb(253, 102, 122);
color: red;
}
.mabNav .mabMiddle {
position: absolute;
top: 0;
left: 260px;
width: 758px;
height: 600px;
}
.mabNav .mabMiddle ul li {
float: left;
width: 246px;
height: 300px;
}
.mabNav .mabMiddle ul li:nth-child(1) {
border-right: 1px solid rgb(173, 171, 171);
border-bottom: 1px solid rgb(173, 171, 171);
}
.mabNav .mabMiddle ul li:nth-child(2) {
border-right: 1px solid rgb(173, 171, 171);
border-bottom: 1px solid rgb(173, 171, 171);
}
.mabNav .mabMiddle ul li:nth-child(3) {
width: 259px;
border-bottom: 1px solid rgb(173, 171, 171);
}
.mabNav .mabMiddle ul li:nth-child(4) {
border-right: 1px solid rgb(173, 171, 171);
}
.mabNav .mabMiddle ul li:nth-child(5) {
border-right: 1px solid rgb(173, 171, 171);
}
.mabMiddle .mabMiddleTitle .TitleName {
display: block;
width: 240px;
height: 30px;
margin: 20px auto;
color: rgb(65, 65, 65);
line-height: 30px;
font-size: 14px;
text-align: center;
}
.mabMiddle .mabMiddleTitle .TiTlePrice {
display: block;
width: 240px;
height: 40px;
margin: 20px auto;
color: rgb(255, 81, 4);
line-height: 40px;
font-size: 25px;
text-align: center;
}
.mabMiddlePhoto {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 144px;
background-image: url(../material/oneShop/images/baby_1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
transition: all .5s;
}
.mabMiddlePhoto:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.mabMiddlePhoto2:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.mabMiddlePhoto3:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.mabMiddlePhoto4:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.mabMiddlePhoto5:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.mabMiddlePhoto6:hover {
transform: translateY(-5px);
box-shadow: 0px 0px 10px 3px rgb(97, 95, 95);
cursor: pointer;
}
.mabMiddlePhoto2 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/baby_2.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.mabMiddlePhoto3 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/baby_3.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.mabMiddlePhoto4 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/baby_4.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.mabMiddlePhoto5 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/baby_5.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.mabMiddlePhoto6 {
width: 220px;
height: 156px;
margin: 0 auto;
margin-top: 34px;
background-image: url(../material/oneShop/images/baby_6.jpg);
background-repeat: no-repeat;
transition: all .5s;
background-size: 100% 100%;
}
.meibaolian {
display: block;
width: 240px;
height: 30px;
margin: 20px auto;
color: rgb(65, 65, 65);
line-height: 30px;
font-size: 14px;
text-align: center;
position: absolute;
top: 0px;
left: 0px;
}
.meibaolianprice {
display: block;
width: 240px;
height: 40px;
margin: 20px auto;
color: rgb(255, 81, 4);
line-height: 40px;
font-size: 25px;
text-align: center;
position: absolute;
top: 50px;
left: 0;
}
.mabNav .mabLeft {
position: absolute;
left: 1020px;
top: 0;
width: 280px;
height: 600px;
}
.mabNav .mabLeft .mabLeftTop {
width: 287px;
height: 300px;
border-bottom: 1px solid rgb(173, 171, 171);
background-image: url(../material/oneShop/images/ca_2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
right: 0px;
}
.mabNav .mabLeft .mabLeftBottom {
position: absolute;
top: 301px;
right: 0px;
width: 287px;
height: 300px;
background-image: url(../material/oneShop/images/ca_4.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* 特点 */
.pointe {
width: 1300px;
height: 200px;
margin: 45px auto;
}
.pointe ul {
width: 800px;
height: 200px;
margin: 0px auto;
}
.pointe ul li {
float: left;
width: 190px;
height: 200px;
cursor: pointer;
}
.pointe ul li:nth-child(1) {
background-image: url(../material/oneShop/images/b1.png);
background-repeat: no-repeat;
background-position: center 10px;
}
.pointe ul li:nth-child(2) {
background-image: url(../material/oneShop/images/b2.png);
background-repeat: no-repeat;
background-position: center 10px;
}
.pointe ul li:nth-child(3) {
background-image: url(../material/oneShop/images/b3.png);
background-repeat: no-repeat;
background-position: center 10px;
}
.pointe ul li:nth-child(4) {
background-image: url(../material/oneShop/images/b4.png);
background-repeat: no-repeat;
background-position: center 10px;
}
.pointe ul li .top {
display: block;
width: 150px;
height: 25px;
margin: 78px auto;
text-align: center;
line-height: 25px;
}
.pointe ul li .bottom {
display: block;
width: 150px;
height: 25px;
margin: -70px auto;
text-align: center;
line-height: 25px;
font-size: 14px;
color: rgb(102, 102, 102);
}
/* 页脚导航 */
.footerNav {
width: 1300px;
height: 200px;
margin: 0px auto;
border-bottom: 1px solid rgb(112, 103, 104);
margin-top: -85px;
position: relative;
}
.footerNav .navTitle {
width: 820px;
height: 200px;
position: absolute;
top: 0px;
left: 60px;
}
.footerNav .navTitle ul li {
float: left;
margin-right: 90px;
font-size: 16px;
color: black;
}
.footerNav .navTitle ul li:hover {
cursor: pointer;
color: blue;
}
.navIntroduce {
width: 820px;
height: 160px;
position: absolute;
top: 40px;
left: 60px;
}
.navIntroduce .navIntroduceOne {
width: 120px;
height: 160px;
}
.navIntroduce .navIntroduceOne ul li {
width: 120px;
height: 22px;
line-height: 16px;
color: rgb(102, 102, 102);
float: left;
font-size: 8px;
cursor: pointer;
}
.navIntroduce .navIntroduceOne ul li:hover {
color: blue;
}
.navIntroduce .navIntroduceTwo {
width: 120px;
height: 160px;
position: absolute;
left: 153px;
top: 0px;
}
.navIntroduce .navIntroduceTwo ul li {
width: 120px;
height: 22px;
line-height: 16px;
color: rgb(102, 102, 102);
float: left;
font-size: 8px;
cursor: pointer;
}
.navIntroduce .navIntroduceTwo ul li:hover {
color: blue;
}
.navIntroduce .navIntroduceThree {
width: 120px;
height: 160px;
position: absolute;
left: 324px;
top: 0px;
}
.navIntroduce .navIntroduceThree ul li {
width: 120px;
height: 22px;
line-height: 16px;
color: rgb(102, 102, 102);
float: left;
font-size: 8px;
cursor: pointer;
}
.navIntroduce .navIntroduceThree ul li:hover {
color: blue;
}
.navIntroduce .navIntroduceFour {
width: 120px;
height: 160px;
position: absolute;
left: 476px;
top: 0px;
}
.navIntroduce .navIntroduceFour ul li {
width: 120px;
height: 22px;
line-height: 16px;
color: rgb(102, 102, 102);
float: left;
font-size: 8px;
cursor: pointer;
}
.navIntroduce .navIntroduceFour ul li:hover {
color: blue;
}
.navIntroduce .navIntroduceFive {
width: 120px;
height: 160px;
position: absolute;
left: 630px;
top: 0px;
}
.navIntroduce .navIntroduceFive ul li {
width: 120px;
height: 22px;
line-height: 16px;
color: rgb(102, 102, 102);
float: left;
font-size: 8px;
cursor: pointer;
}
.navIntroduce .navIntroduceFive ul li:hover {
color: blue;
}
.footerErWeiMa {
width: 350px;
height: 200px;
position: absolute;
top: 0px;
right: 65px;
}
.footerErWeiMa::before {
content: '';
display: block;
width: 140px;
height: 140px;
background-image: url(../material/oneShop/images/er.gif);
background-size: 100% 100%;
}
.footerErWeiMa::after {
content: '';
display: block;
width: 120px;
height: 15px;
background-image: url(../material/oneShop/images/ss.png);
background-repeat: no-repeat;
margin-top: 10px;
}
.footerErWeiMa .xlwb {
width: 160px;
height: 40px;
position: absolute;
top: 0px;
right: 10px;
background-image: url(../material/oneShop/images/wbf.png);
background-repeat: no-repeat;
background-size: 40px 40px;
font-size: 14px;
text-indent: 45px;
line-height: 40px;
color: rgb(102, 102, 102);
cursor: pointer;
}
.footerErWeiMa .xlwb:hover {
background-image: url(../material/oneShop/images/wbt.png);
background-size: 40px 40px;
}
.footerErWeiMa .txwb {
width: 160px;
height: 40px;
position: absolute;
top: 55px;
right: 10px;
background-image: url(../material/oneShop/images/b_sh_2.png);
background-repeat: no-repeat;
background-size: 40px 40px;
font-size: 14px;
text-indent: 45px;
line-height: 40px;
color: rgb(102, 102, 102);
cursor: pointer;
}
.footerErWeiMa .txwb:hover {
background-image: url(../material/oneShop/images/wbt.png);
background-size: 40px 40px;
}
.footerErWeiMa .fwrx {
width: 200px;
height: 50px;
position: absolute;
top: 98px;
left: 143px;
}
.footerErWeiMa .fwrx .top {
width: 70px;
height: 16px;
font-size: 8px;
color: rgb(102, 102, 102);
margin-top: 10px;
margin-left: 35px;
}
.footerErWeiMa .fwrx .bottom {
width: 150px;
margin-top: 4px;
margin-left: 35px;
color: rgb(241, 96, 38);
}
.footers {
width: 1300px;
height: 150px;
margin: 45px auto;
}
.footers p {
display: block;
width: 1300px;
height: 16px;
font-size: 12px;
color: rgb(102, 102, 101);
text-align: center;
line-height: 16px;
}
.footers ul {
width: 820px;
height: 70px;
margin: 10px auto;
}
.footers ul li {
width: 120px;
height: 40px;
float: left;
margin-right: 10px;
border: 1px solid rgb(139, 139, 139);
}
.footers ul li:nth-child(1) {
background-image: url(../material/oneShop/images/b_1.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 10px;
}
.footers ul li:nth-child(2) {
background-image: url(../material/oneShop/images/b_2.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 10px;
}
.footers ul li:nth-child(3) {
background-image: url(../material/oneShop/images/b_3.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 10px;
}
.footers ul li:nth-child(4) {
background-image: url(../material/oneShop/images/b_4.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 10px;
}
.footers ul li:nth-child(5) {
background-image: url(../material/oneShop/images/b_5.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 10px;
}
.footers ul li:nth-child(6) {
background-image: url(../material/oneShop/images/b_6.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 10px;
}
</style>
</head>
<body>
<header>
<div class="place">配送至：四川</div>
<!-- 头部导航栏 -->
<div class="headerNav">
<ul>
<li>你好!请登录</li>
<li><a
href="file:///D:/code/.vscode/HTML_classroom_norms.html/%E4%B8%80%E5%8F%B7%E5%BA%97%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.html">免费注册</a>
</li>
<li>我的订单</li>
<li>收藏夹</li>
<li>客户服务</li>
<li>网站导航</li>
<li>关于我们：</li>
<li></li>
<li>手机版</li>
</ul>
</div>
</header>
<!-- logo 搜索框 购物车 -->
<div class="bgSearchCar">
<div class="logoBg"></div>
<div class="search">
<input type="text" placeholder="请输入关键字">
<button>搜索</button>
<div class="searchHotText">
<ul>
<li>咖啡</li>
<li>iphone 6S</li>
<li>新鲜美食</li>
<li>蛋糕</li>
<li>日用品</li>
<li>连衣裙</li>
</ul>
</div>
</div>
<div class="car">
<span>购物车</span>
</div>
</div>
<!-- 全部商品分类 购买位置 手机下单 -->
<div class="commodity">
<div class="titleLeft">
全部商品分类
</div>
<div class="titleMiddle">
<ul>
<li>首页</li>
<li>自营超市</li>
<li>1号团</li>
<li>1号超市</li>
<li>女装</li>
<li>美妆</li>
<li>1号海购</li>
<li>团购</li>
</ul>
</div>
<div class="titleRight">
<img src="../material/Snipaste_2020-10-28_00-53-30.png">
<p>手机下单惊喜多!</p>
</div>
<div class="commodityClass">
<ul>
<li>
<div class="navBg"></div>
进口食品、生鲜
</li>
<li>
<div class="navBg2"></div>
食品、饮料、酒
</li>
<li>
<div class="navBg3"></div>
母婴、玩具、童装
</li>
<li>
<div class="navBg4"></div>
家具、家庭清洁、纸品
</li>
<li>
<div class="navBg5"></div>
美妆、个人护理、洗护
</li>
<li>
<div class="navBg6"></div>
女装、内衣、中老年
</li>
<li>
<div class="navBg7"></div>
鞋靴、箱包、腕表配饰
</li>
<li>
<div class="navBg8"></div>
男装、运动
</li>
<li>
<div class="navBg8"></div>
手机、小家电、电脑
</li>
<li>
<div class="navBg10"></div>
礼品、充值
</li>
</ul>
</div>
<div class="commodityMiddleBg">
<div class="bgLeft"></div>
<div class="bgRight"></div>
<div class="number">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<!-- 快讯 -->
<div class="commodityRightNews">
<div class="kuaixun">
<ul>
<li>
<div class="left">快讯</div>
<div class="right">更多</div>
</li>
<li><span>【特惠】</span>掏一轮明月 表无尽惦念<div class="zhezhao"></div>
</li>
<li><span>【公告】</span>好奇金装成长裤新品上市<div class="zhezhao"></div>
</li>
<li><span>【特惠】</span>大牌闪购 · 抢！<div class="zhezhao"></div>
</li>
<li><span>【公告】</span>发福利 买车就抢千元油卡<div class="zhezhao"></div>
</li>
<li><span>【公告】</span>家电低至五折<div class="zhezhao"></div>
</li>
</ul>
</div>
</div>
<!-- 1号钱包 -->
<div class="oneMoney">1号钱包</div>
<div class="oneMoneybody">
<div class="moneyTitle">收益日结，收益赚High！</div>
<div class="moneyBG">
<div class="bg"></div>
</div>
</div>
</div>
<!-- 热门商品-->
<div class="hotCommodity">
<div class="hotOne">
<div class="hotOnebg"></div>
<div class="hotOnePrice">
<div class="priceNum">
￥53.00
</div>
<div class="HotNum">16R</div>
</div>
</div>
<div class="hotNav">
<ul>
<li>
<h3>德国进口</h3>
<p>德亚全脂纯牛奶200ml*48盒</p>
<span class="price">￥189</span>
<span class="allHotNum">26R</span>
</li>
<li>
<h3>iphone 6S</h3>
<p>Apple/苹果 iphone 6S Plus公开版</p>
<span class="price">￥5288</span>
<span class="allHotNum">25R</span>
</li>
<li>
<h3>倩碧特惠组合套装</h3>
<p>倩碧补水组合套装8折促销</p>
<span class="price">￥368</span>
<span class="allHotNum">18R</span>
</li>
<li>
<h3>品利特级橄榄油</h3>
<p>750ml*4瓶装组合 西班牙进口</p>
<span class="price">￥280</span>
<span class="allHotNum">30R</span>
</li>
</ul>
</div>
</div>
<!-- 广告 -->
<div class="ad1"></div>
<!-- 进口生鲜 -->
<div class="importFresh">
<div class="freshTitle">
<div class="leftbg">1F</div>
<div class="leftText">进口·生鲜</div>
<ul>
<li>进口奶粉</li>
<li>进口酒</li>
<li>进口母婴</li>
<li>新鲜蔬菜</li>
<li>新鲜水果</li>
</ul>
</div>
<div class="importFershNav">
<div class="slideShow"></div>
<div class="slideText">
<div class="textOne">
<ul>
<li>进口水果</li>
<li>奇异果</li>
<li>西柚</li>
</ul>
</div>
<div class="textTwo">
<ul>
<li>海鲜水产</li>
<li>品质牛肉</li>
</ul>
</div>
<div class="textThree">
<ul>
<li>奶粉</li>
<li>鲜活禽蛋</li>
<li>进口酒</li>
</ul>
</div>
<div class="textFour">
<ul>
<li>进口奶粉</li>
<li>新鲜水果</li>
</ul>
</div>
</div>
<div class="freshMiddle">
<ul>
<li>
<div class="freshMiddleTitle">
<span class="TitleName">贝思客 草莓先生&蓝莓小姐</span>
<span class="TiTlePrice">￥98.00</span>
</div>
<div class="freshMiddlePhoto"></div>
</li>
<li>
<div class="freshMiddleTitle">
<span class="TitleName">微笑果园SMILE智利进口绿奇异果</span>
<span class="TiTlePrice">￥84.00</span>
</div>
<div class="freshMiddlePhoto2"></div>
</li>
<li>
<div class="freshMiddleTitle">
<span class="TitleName">新鲜美味 进口美食</span>
<span class="TiTlePrice">￥98.00</span>
</div>
<div class="freshMiddlePhoto3"></div>
</li>
<li>
<div class="freshMiddleTitle">
<span class="TitleName">新鲜美味 进口美食</span>
<span class="TiTlePrice">￥24.00</span>
</div>
<div class="freshMiddlePhoto4"></div>
</li>
<li>
<div class="freshMiddleTitle">
<span class="TitleName">新鲜美味 纯牛奶</span>
<span class="TiTlePrice">￥142.00</span>
</div>
<div class="freshMiddlePhoto5"></div>
</li>
<li>
<div class="freshMiddleTitle">
<span class="TitleName">莫斯利安</span>
<span class="TiTlePrice">￥62.00</span>
</div>
<div class="freshMiddlePhoto6"></div>
</li>
</ul>
</div>
<div class="freshLeft">
<div class="freshLeftTop"></div>
<div class="freshLeftBottom"></div>
</div>
</div>
</div>
<!-- 个人美妆 -->
<div class="personal">
<div class="personalTitle">
<div class="leftbg">2F</div>
<div class="leftText">个人·美妆</div>
<ul>
<li>洗发护发</li>
<li>面膜</li>
<li>洗面奶</li>
<li>香水</li>
<li>沐浴露</li>
</ul>
</div>
<div class="personalNav">
<div class="slideshow"></div>
<div class="slideText">
<div class="textOne">
<ul>
<li>洗发护发</li>
<li>牙刷牙膏</li>
</ul>
</div>
<div class="textTwo">
<ul>
<li>面膜</li>
<li>补水面膜</li>
<li>香水</li>
</ul>
</div>
<div class="textThree">
<ul>
<li>面霜</li>
<li>洗面奶</li>
<li>脱毛膏</li>
</ul>
</div>
<div class="textFour">
<ul>
<li>沐浴露</li>
</ul>
</div>
</div>
<div class="personalMiddle">
<ul>
<li>
<div class="personalMiddleTitle">
<span class="meibaolian">美宝莲</span>
<span class="meibaolianprice">￥260.00</span>
</div>
<div class="personalMiddlePhoto"></div>
</li>
<li>
<div class="personalMiddleTitle">
<span class="TitleName">洗衣液</span>
<span class="TiTlePrice">￥60.00</span>
</div>
<div class="personalMiddlePhoto2"></div>
</li>
<li>
<div class="personalMiddleTitle">
<span class="TitleName">洗发水</span>
<span class="TiTlePrice">￥160.00</span>
</div>
<div class="personalMiddlePhoto3"></div>
</li>
<li>
<div class="personalMiddleTitle">
<span class="TitleName">男士洗发水</span>
<span class="TiTlePrice">￥120.00</span>
</div>
<div class="personalMiddlePhoto4"></div>
</li>
<li>
<div class="personalMiddleTitle">
<span class="TitleName">美宝莲粉饼</span>
<span class="TiTlePrice">￥260.00</span>
</div>
<div class="personalMiddlePhoto5"></div>
</li>
<li>
<div class="personalMiddleTitle">
<span class="TitleName">男士设计 洗面奶</span>
<span class="TiTlePrice">￥90.00</span>
</div>
<div class="personalMiddlePhoto6"></div>
</li>
</ul>
</div>
<div class="personalLeft">
<div class="personalLeftTop"></div>
<div class="personalLeftBottom"></div>
</div>
</div>
</div>
<!-- 广告 -->
<div class="ad1"></div>
</div>
<!-- 母婴玩具 -->
<div class="mab">
<div class="mabTitle">
<div class="leftbg">3F</div>
<div class="leftText">母婴·玩具</div>
<ul>
<li>营养品</li>
<li>孕妈背带裤</li>
<li>儿童玩具</li>
<li>婴儿床</li>
<li>喂奶器</li>
</ul>
</div>
<div class="mabNav">
<div class="slideshow"></div>
<div class="slideText">
<div class="textOne">
<ul>
<li>孕妈必备</li>
<li>儿童玩具</li>
</ul>
</div>
<div class="textTwo">
<ul>
<li>童装童鞋</li>
<li>辅助食品</li>
</ul>
</div>
<div class="textThree">
<ul>
<li>奶粉</li>
<li>摇摇床</li>
<li>维生素</li>
</ul>
</div>
<div class="textFour">
<ul>
<li>童装童鞋</li>
<li>儿童床</li>
</ul>
</div>
</div>
<div class="mabMiddle">
<ul>
<li>
<div class="mabMiddleTitle">
<span class="meibaolian">儿童推车</span>
<span class="meibaolianprice">￥560.00</span>
</div>
<div class="mabMiddlePhoto"></div>
</li>
<li>
<div class="mabMiddleTitle">
<span class="TitleName">妈咪纸尿裤</span>
<span class="TiTlePrice">￥260.00</span>
</div>
<div class="mabMiddlePhoto2"></div>
</li>
<li>
<div class="mabMiddleTitle">
<span class="TitleName">儿童玩具 挖掘机</span>
<span class="TiTlePrice">￥160.00</span>
</div>
<div class="mabMiddlePhoto3"></div>
</li>
<li>
<div class="mabMiddleTitle">
<span class="TitleName">纸尿裤</span>
<span class="TiTlePrice">￥260.00</span>
</div>
<div class="mabMiddlePhoto4"></div>
</li>
<li>
<div class="mabMiddleTitle">
<span class="TitleName">儿童推车</span>
<span class="TiTlePrice">￥86.00</span>
</div>
<div class="mabMiddlePhoto5"></div>
</li>
<li>
<div class="mabMiddleTitle">
<span class="TitleName">奶粉</span>
<span class="TiTlePrice">￥660.00</span>
</div>
<div class="mabMiddlePhoto6"></div>
</li>
</ul>
</div>
<div class="mabLeft">
<div class="mabLeftTop"></div>
<div class="mabLeftBottom"></div>
</div>
</div>
</div>
<!-- 网站特点 -->
<div class="pointe">
<ul>
<li>
<span class="top">正品保障</span>
<span class="bottom">正品行货 放心购买</span>
</li>
<li>
<span class="top">满38包邮</span>
<span class="bottom">满38包邮 免运费</span>
</li>
<li>
<span class="top">天天低价</span>
<span class="bottom">天天低价 畅选无忧</span>
</li>
<li>
<span class="top">准时送达</span>
<span class="bottom">收货时间由你做主</span>
</li>
</ul>
</div>
<!-- 页脚导航 -->
<div class="footerNav">
<div class="navTitle">
<ul>
<li>新手上路</li>
<li>配送与支付</li>
<li>会员中心</li>
<li>服务保证</li>
<li>联系我们</li>
</ul>
</div>
<div class="navIntroduce">
<div class="navIntroduceOne">
<ul>
<li>售后流程</li>
<li>购物流程</li>
<li>订购方式</li>
<li>隐私声明</li>
<li>推荐分享说明</li>
</ul>
</div>
<div class="navIntroduceTwo">
<ul>
<li>货到付款区域</li>
<li>配送支付查询</li>
<li>支付方式说明</li>
</ul>
</div>
<div class="navIntroduceThree">
<ul>
<li>资金管理</li>
<li>我的收藏</li>
<li>订购方式</li>
<li>我的订单</li>
</ul>
</div>
<div class="navIntroduceFour">
<ul>
<li>退换货原则</li>
<li>售后服务保证</li>
<li>产品质量保证</li>
</ul>
</div>
<div class="navIntroduceFive">
<ul>
<li>网站故障报告</li>
<li>购物资讯</li>
<li>投诉与建议</li>
</ul>
</div>
</div>
<div class="footerErWeiMa">
<div class="xlwb">
新浪微博
</div>
<div class="txwb">
腾讯微博
</div>
<div class="fwrx">
<div class="top">服务热线：</div>
<div class="bottom">400-123-4567</div>
</div>
</div>
</div>
<div class="footers">
<p>备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua Copyright© 1号店网上超市 2007-2016 ，All Right Reserved.复制必究.Technical Support: Dgg Group</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
更多推荐
一号店(1号店)静态网页布局HTML5+CSS
发布评论