一号店(1号店)静态网页布局HTML5+CSS

很多小伙伴刚学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);}.commodity {width: 1300px;height: 547px;margin: 41px auto;position: relative;}.commodity .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);}.commodity .titleLeft:hover {cursor: default;}.commodity .titleMiddle {position: absolute;left: 259px;top: -1px;width: 1041px;height: 55px;border-bottom: 2px solid rgb(244, 113, 60);}.commodity .titleMiddle ul li {font-size: 18px;color: rgb(34, 35, 36);float: left;padding-right: 40px;line-height: 55px;cursor: pointer;transition: all .5s;}.commodity .titleMiddle ul li:hover {color: red;text-decoration: underline;transform: scale(1.1);}.commodity .titleMiddle ul li:first-child {padding-left: 20px;color: rgb(236, 60, 47);}.commodity .titleMiddle ul li:nth-child(2) {color: rgb(236, 60, 47);}.commodity .titleRight {width: 260px;height: 55px;position: absolute;top: -1px;right: -1px;}.commodity .titleRight p {font-size: 12px;color: rgb(163, 156, 154);line-height: 55px;text-indent: 172px;cursor: pointer;}.commodity .titleRight p:hover {color: red;}.commodity .titleRight img {position: absolute;top: 18px;left: 153px;transition: all .2s;cursor: pointer;}.commodity .titleRight img:hover {transform: translateX(-10px);}/* 商品分类 */.commodity .commodityClass {width: 260px;height: 600px;position: absolute;top: 57px;left: -1px;}.commodity .commodityClass 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;}.commodity .commodityClass ul li:hover {color: blue;cursor: pointer;text-decoration: underline;background-color: rgba(176, 29, 29, 0.5);}.commodity .commodityClass ul li:first-child {border-top: 1px solid transparent;}.commodity .commodityClass 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;}.commodity .commodityClass 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;}.commodity .commodityClass 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;}.commodity .commodityClass 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;}.commodity .commodityClass 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;}.commodity .commodityClass 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;}.commodity .commodityClass 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;}.commodity .commodityClass 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;}.commodity .commodityClass 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;}.commodity .commodityClass 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;}.commodity .commodityMiddleBg {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;}.commodity .commodityMiddleBg .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%;}.commodity .commodityMiddleBg .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%;}.commodity .commodityMiddleBg .bgLeft:hover,.commodity .commodityMiddleBg .bgRight:hover {background-color: red;cursor: pointer;}.commodity .commodityMiddleBg .number {width: 106px;height: 20px;position: absolute;left: 50%;margin-left: -65px;bottom: 30px;}.commodity .commodityMiddleBg .number ul {text-align: center;}.commodity .commodityMiddleBg .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;}.commodity .commodityMiddleBg .number ul li:hover {cursor: pointer;background-color: red;color: #ffffff;transform: rotate(720deg);}.commodity .commodityMiddleBg .number ul li:first-child {background-color: red;color: #ffffff;}.commodityRightNews {width: 240px;height: 489px;border: 2px solid rgb(212, 212, 212);position: absolute;top: 56px;right: 0px;border-top: 0px solid transparent;}.commodityRightNews .kuaixun {position: absolute;top: 0px;left: 0px;width: 238px;height: 265px;}.commodityRightNews .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;}.commodityRightNews .kuaixun ul li:nth-child(1):hover {transform: scale(1);}.kuaixun ul li span {color: black;font-size: 16px;line-height: 35px;color: red;}.commodityRightNews .kuaixun ul li:first-child {height: 40px;width: 239px;position: relative;border-bottom: 1px dotted rgb(212, 212, 212);}.commodityRightNews .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);}.commodityRightNews .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><ahref="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.com Copyright&copy; 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相关推荐

前端静态网页布局经验谈
静态布局(Static Layout)是最传统的网页布局方式,也是前端的一个基本功之一,通常应用于PC端布局,当我们拿到UI提供的PC端PS设计稿,基本上就要用到静态布局了. 静态布局对前端来说是比较 ...
原！神静态网页布局详解，html+css布局实战，附详细代码
代码整体效果展示 1页面布局思路本次界面的布局主要采用定位流的方式来进行布局.因为界面具有很多透视效果,以及背景图片的重叠.接下来我将详细讲解布局第一层定位流: 素材: 此图片作为总体背景应该放在 ...
DivCSS网页布局中CSS无效的十个常见原因
在学习DivCSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持 ...
flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
html简单个人网页制作 HTML5+CSS大作业——程序员个人简历设计(5页)
HTML5+CSS大作业--程序员个人简历设计(5页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
div布局 HTML5+CSS大作业——兔小白个人博客网站 (1页)
HTML5+CSS大作业--兔小白个人博客网站 (1页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
大一html网页制作期末网页设计 HTML5+CSS大作业——个人旅游图片博客(7页)
HTML5+CSS大作业--个人旅游图片博客(7页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...
如何用css进行网页布局,用CSS进行网页布局的教程
如果你是一个初学者那么学习css.html" target="_blank">css的第一步就是布局,但是实现网页布局的方法很多,很多初学者都不知道如何应用,那么现 ...
web网页设计 HTML5+CSS大作业——传统节日--圣诞节(3页)
HTML5+CSS大作业--传统节日–圣诞节(3页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...
一号店(1号店)静态网页布局HTML5+CSS

一号店(1号店)静态网页布局HTML5+CSS相关推荐

最新文章

热门文章
