仿小米商城页面和简单效果|江阴雨辰互联

2023年11月26日发(作者：华为p9手机参数配置)

仿⼩⽶商城页⾯和简单效果

DOCTYPE html>

<html>

<head>

<title>⼩⽶商城title>

head>

<body>

<a href="#">MIUIa>

<a href="#">⼩爱开放平台a>

<a href="#">政企服务a>

<a href="#">资质证照a>

div>

购物车(0)

div>

<a href="#">消息通知a>

div>

div>

<li>

⼿机电话卡

ul>

li>

<li>

电视盒⼦

ul>

li>

<li>

笔记本平板

ul>

li>

<li>

家电插线板

ul>

li>

<li>

出⾏穿戴

ul>

li>

ul>

li>

<li>

电源配件

ul>

li>

<li>

健康⼉童

ul>

li>

<li>

⽿机⾳响

ul>

li>

<li>

⽣活箱包

ul>

li>

ul>

div>

li>

<li>

li>

<li>

li>

<li>

li>

<li>

<a href="#">智能硬件a>

li>

<li>

li>

<li>

li>

ul>

div>

查看全部

div>

<li>

<i>i>

<h3>⼿机APPh3>

li>

<li>

<i>i>

<h3>⼿机APPh3>

li>

<li>

<i>i>

<h3>⼿机APPh3>

li>

<li>

<i>i>

<h3>⼿机APPh3>

li>

<li>

<i>i>

<h3>⼿机APPh3>

li>

div>

div>

<li>

选购⼿机

li>

<li>

企业团购

li>

<li>

F码通道

li>

<li>

⽶粉卡

li>

<li>

以旧换新

li>

<li>

话费充值

li>

ul>

div>

div>

查看全部

div>

div>

<ul>

<li>

div>

⼩⽶9 6GB+128GB

h3>

<p class="desc">骁龙855，索尼4800万超⼴⾓微距三摄p>

<span class="num">2999span>元

<div class="flag flag-new">新品div>

li>

<li>

div>

⼩⽶9 6GB+128GB

h3>

<p class="desc">骁龙855，索尼4800万超⼴⾓微距三摄p>

<span class="num">2999span>元

<div class="flag flag-new">新品div>

li>

<li>

div>

⼩⽶9 6GB+128GB

h3>

<p class="desc">骁龙855，索尼4800万超⼴⾓微距三摄p>

<span class="num">2999span>元

<div class="flag flag-new">新品div>

li>

<li>

div>

⼩⽶9 6GB+128GB

h3>

<p class="desc">骁龙855，索尼4800万超⼴⾓微距三摄p>

<span class="num">2999span>元

<div class="flag flag-new">新品div>

li>

<li>

div>

⼩⽶9 6GB+128GB

h3>

<p class="desc">骁龙855，索尼4800万超⼴⾓微距三摄p>

<span class="num">2999span>元

<div class="flag flag-new">新品div>

li>

<li>

div>

⼩⽶9 6GB+128GB

h3>

<p class="desc">骁龙855，索尼4800万超⼴⾓微距三摄p>

<span class="num">2999span>元

<div class="flag flag-new">新品div>

li>

<li>

div>

⼩⽶9 6GB+128GB

h3>

<p class="desc">骁龙855，索尼4800万超⼴⾓微距三摄p>

<span class="num">2999span>元

<div class="flag flag-new">新品div>

li>

ul>

div>

预约维修服务

li>

<li>

预约维修服务

li>

<li>

预约维修服务

li>

<li>

预约维修服务

li>

<li>

预约维修服务

li>

ul>

div>

<dd>账户管理dd>

<dd>购物指南dd>

<dd>订单操作dd>

dl>

<dd>账户管理dd>

<dd>购物指南dd>

<dd>订单操作dd>

dl>

<p>

周⼀⾄周⽇ 8:00-18:00

<br>

（仅收市话费）

联系客服

div>

body>

html>

CSS

body{

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

color: #333;

}

/*css*/

⼩⽶顶部

.topBar{

width: 100%;

height: 40px;

background-color: #333;

}

.container{

width: 1226px;

height: 100%;

margin: 0 auto;

}

.topBar .topBar_list{

float: left;

}

.topBar .shop{

float: right;

width: 120px;

margin-left: 15px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: #424242;

}

.topBar .login{

float: right;

}

.topBar a{

color: #b0b0b0;

font-size: 12px;

display: inline-block;

line-height: 40px;

}

.topBar .shop a{

width: 120px;

height: 40px;

display: inline-block;

}

.topBar a:hover{

color: #fff;

}

.topBar span{

color: #424242;

margin: 0 .5em;

}

/*end*/

⼩⽶顶部

/*start*/

⼩⽶导航栏

.header{

height: 100px;

}

.header .site-logo{

float: left;

width: 62px;

margin-top: 22px;

}

.header .site-logo a{

display: block;

width: 56px;

height: 56px;

}

.header .site-list{

float: left;

width: 850px;

}

.header .site-list>ul{

width: 820px;

height: 88px;

padding: 12px 0 0 30px;

font-size: 16px;

}

.header .site-list>ul>li{

float: left;

}

.header .site-list>ul>li>a{

/*24px*/

display: block;

padding: 26px 10px 38px;

color: #333;

}

.header .site-list>ul>li>a:hover{

color: #ff6700;

}

.header .site-list>ul .site-category>a{

padding: 0;

}

.header .site-list>ul>li.site-category{

position: relative;

z-index: 3;

}

.header .site-list>ul>li.site-category .category-list{

position: absolute;

top: 88px;

left: -92px;

width: 234px;

height: 460px;

background-color: rgba(0,0,0,0.6);

}

.category-list>ul {

width: 234px;

height: 420px;

padding: 20px 0;

}

.category-list>ul>li{

height: 42px;

}

.category-list>ul>li>a{

padding-left: 30px;

display: block;

height: 42px;

line-height: 42px;

font-size: 14px;

color: #fff;

position: relative;

}

.category-list>ul>li>a:hover{

background-color: #ff6700;

}

.category-list>ul>li>a>span{

position: absolute;

top: 12px;

right: 20px;

font-size: 16px;

line-height: 16px;

}

.header .site-search{

float: right;

width: 296px;

margin-top: 25px;

}

.header .site-search form {

position: relative;

width: 296px;

height: 50px;

}

.header .site-search form .search-text{

/*245px*/

width: 223px;

height: 48px;

border: 1px solid #e0e0e0;

font-size: 14px;

padding: 0 10px;

float: left;

}

.header .site-search form .search-btn{

margin-left: -1px;

float: left;

width: 50px;

height: 50px;

border: 1px solid #e0e0e0;

}

.header .site-search form .search-word{

position: absolute;

font-size: 12px;

top: 14px;

right: 65px;

}

.header .site-search form .search-word a{

display: inline-block;

margin-left: 5px;

padding: 0 5px;

background-color: #eee;

color: #757575;

}

.header .site-search form .search-word a:hover{

background-color: #ff6700;

color: #fff;

}

.box-01 ul{

height: 460px;

width: 992px;

position: absolute;

left: 234px;

top:0;

background-color: #fff;

display: none;

}

.box-01 ul li{

margin-left: 60px;

margin-top: 20px;

float: left;

}

/* */

右侧侧边栏

.arrow-right{

height: 460px;

width: 84px;

position: fixed;

top:20px;

right: 0px;

background-color: #fff;

}

.arrow-right li{

list-style: none;

height: 92px;

width: 100%;

border: 1px solid #b0b0b0;

}

.arrow-right li a{

height: 92px;

line-height: 92px;

text-align: center;

color: black;

}

/*end*/

⼩⽶导航栏

/* */

中间轮播图

.boby{

position: relative;

}

.banner {

height: 460px;

width: 1226px;

overflow: hidden;

}

.banner-son{

height: 100%;

width: 100%;

background-color: blue;

}

/*start*/

向导样式

.content-sub{

margin-top: 18px;

overflow: hidden;

}

.content-sub .content-channel{

float: left;

width: 234px;

}

.content-sub .content-channel ul{

background: #5f5750;

font-size: 12px;

text-align: center;

}

.content-sub .content-channel ul li{

float: left;

width: 33.33%;

height: 85px;

}

.content-sub .content-channel ul li a{

display: block;

padding-top: 18px;

font-size: 12px;

color: rgba(255,255,255,0.7);

}

.content-sub .content-channel ul li a i{

display: block;

font-size: 24px;

}

.content-sub .content-list{

float: left;

width: 992px;

}

.content-sub .content-list{

float: left;

width: 992px;

}

.content-sub .content-list ul {

width: 100%;

}

.content-sub .content-list ul li{

float: left;

width: 33.33%;

text-align: right;

}

.content-sub .content-list ul li a{

display: block;

height: 170px;

}

.content-sub .content-list ul li a img{

width: 316px;

height: 170px;

}

/*end*/

向导样式

.content-banner{

margin-top: 36px;

margin-bottom: 30px;

}

.content-banner a{

display: block;

width: 1226px;

height: 120px

}

.content-banner a img{

width: 1226px;

height: 120px

}

/*end*/

⼩⽶站点内容

/*start*/

⼩⽶内容描述

.content-desc{

padding-top: 22px;

background-color: #f5f5f5;

}

/*start*/

内容详情标题

.content-desc .box-hd{

margin-bottom: 15px;

height: 58px;

position: relative;

}

.content-desc .box-hd h2{

font-size: 22px;

font-weight: 200;

line-height: 58px;

color: #333;

margin-left: 20px;

}

.content-desc .box-hd .more{

height: 58px;

line-height: 58px;

position: absolute;

right: 0;

top: 0;

margin-right: 30px;

}

.content-desc .box-hd .more a{

font-size: 16px;

line-height: 58px;

color: #424242;

}

.content-desc .box-hd .more a i{

width: 12px;

height: 12px;

padding: 4px;

margin-left: 8px;

border-radius: 12px;

background-color: #b0b0b0;

color: #fff;

font-size: 12px;

vertical-align:2px;

}

.content-desc .box-hd .more:hover a{

color: #ff6700;

}

.content-desc .box-hd .more:hover a i{

background-color: #ff6700;

}

/*start*/

内容详情

.box-bd .row-l{

float: left;

width: 234px;

}

.box-bd .row-r{

float: left;

width: 992px;

}

.box-bd .row-l a{

display: block;

width: 100%;

height: 100%;

}

.box-bd .row-l a img{

width: 234px;

height: 614px;

}

.box-bd .row-r ul{

overflow: hidden;

}

.box-bd .row-r ul li{

float: left;

height: 260px;

padding: 20px 0;

background-color: #fff;

width: 234px;

/*234*4 = 936 + 56 = 992px*/

position: relative;

margin-left: 14px;

margin-bottom: 14px;

}

.box-bd .row-r ul li .figure{

width: 160px;

height: 160px;

margin: 0 auto 18px;

}

.box-bd .row-r ul li .figure a{

display: block;

}

.box-bd .row-r ul li .figure a img{

width: 160px;

height: 160px;

}

.box-bd .row-r ul li .title{

font-size: 14px;

font-weight: 400;

text-align: center;

}

.box-bd .row-r ul li .title a{

color: #333;

}

.box-bd .row-r ul li .desc{

height: 18px;

font-size: 12px;

text-align: center;

color: #b0b0b0;

margin: 0 10px 10px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.box-bd .row-r ul li .price{

text-align: center;

color: #ff6700;

}

.box-bd .row-r ul li .flag{

position: absolute;

top: 0;

left: 0;

width: 64px;

height: 20px;

background-color: #83c44e;

text-align: center;

color: #fff;

left: 50%;

margin-left: -32px;

}

/*start*/

⼩⽶脚部样式

.footer .footer-service{

padding: 27px 0;

border-bottom: 1px solid #e0e0e0;

}

.footer .footer-service ul li{

float: left;

width: 19.8%;

height: 25px;

font-size: 16px;

line-height: 25px;

text-align: center;

border-left: 1px solid #e0e0e0;

}

.footer .footer-service ul li.first{

border-left: 0;

}

.footer .footer-service ul li a{

color: #616161;

}

.footer .footer-service ul li .iconfont{

font-size: 24px;

margin-right: 6px;

line-height: 24px;

vertical-align: -4px;

}

.footer .footer-links{

padding: 40px 0;

}

.footer .footer-links dl{

float: left;

width: 160px;

height: 112px;

}

.footer .footer-links dl dt{

margin-bottom: 26px;

font-size: 14px;

color: #424242;

}

.footer .footer-links dl dd{

font-size: 12px;

margin-top: 10px;

color: #757575;

cursor: pointer;

}

.footer .footer-links dl dd:hover{

color: #ff6700;

}

.footer .footer-links .col-contact{

float: right;

width: 251px;

height: 112px;

border-left: 1px solid #e0e0e0;

text-align: center;

}

.footer .footer-links .col-contact .iphone{

margin-bottom: 5px;

font-size: 22px;

color: #ff6700;

}

.footer .footer-links .col-contact p{

margin-bottom: 16px;

font-size: 12px;

}

.footer .footer-links .col-contact a{

display: inline-block;

width: 118px;

height: 28px;

border: 1px solid #ff6700;

color: #ff6700;

font-size: 12px;

}

.footer .footer-links .col-contact a:hover{

background-color: #ff6700;

color: #fff;

}

/*end*/

⼩⽶脚部样式

.clearfix::after{

content: '';

clear: both;

display: block;

}

js部分：轮播图上运⽤了slick插件来实现，商品导航栏的弹出⽤了jq的hover来实现。

$(function(){

$('.banner').slick({

autoplay: true,

autoplaySpeed: 2000,

});

$('.box-01>li').hover(function(){

$(this).find('ul').stop().toggle();

})

});

发布者：admin，转转请注明出处：http://www.yc00.com/num/1700941656a1038488.html

仿小米商城页面和简单效果

发表回复

评论列表（0条）

联系我们

400-800-8888

仿小米商城页面和简单效果

相关推荐

发表回复

评论列表（0条）

联系我们

400-800-8888