本文章为博主写的小米官网的网页，包含html5，css3和javascript
文件的结构如下：
一共有三个文件夹，分别命名为css、img和js。
css用来存放css文件，一共有三个css文件，index.css用来存放首页的css，reset.css用来存放重置样式表，也就是清楚浏览器的默认样式。style.css是网页的公共样式，也就是每个网页的公共部分。
img用来存放网页的所有的图片
js用来存放Javascript文件
下面是html的全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha，小米电视官方网站</title>
<!--引用公共的css-->
<link rel="stylesheet" href="./css/style.css" type="text/css">
<!--引入压缩后的公共css-->
<link rel="stylesheet" href="css/style-mini.css" type="text/css">
<!--引入首页的css-->
<link rel="stylesheet" href="css/index.css" type="text/css">
<!--引入重置样式表-->
<link rel="stylesheet" href="./css/reset.css" type="text/css">
<!--引入图标字体-->
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.css" rel="stylesheet">
<!--引入网页图标-->
<link rel="shortcut icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
<!--引入js文件-->
<script src="js/style.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a name="top"></a>
<div class="top-top" id="top">
<div class="top-top-center">
<img src="./img/top.png" alt="">
</div>
<div id="del"><a href="javascript:;">X</a></div>
</div>
<div class="top">
<div class="top-center">
<div class="top-center-left">
<ul>
<li><a href="javascript:;">小米商城</a></li>
<span></span>
<li><a href="javascript:;">MIUI</a></li>
<span></span>
<li><a href="javascript:;">loT</a></li>
<span></span>
<li><a href="javascript:;">云服务</a></li>
<span></span>
<li><a href="javascript:;">金融</a></li>
<span></span>
<li><a href="javascript:;">有品</a></li>
<span></span>
<li><a href="javascript:;">小爱开放平台</a></li>
<span></span>
<li><a href="javascript:;">企业团购</a></li>
<span></span>
<li><a href="javascript:;">资质认照</a></li>
<span></span>
<li><a href="javascript:;">协议规则</a></li>
<span></span>
<li class="down"><a href="javascript:;">下载app</a>
<div class="show-down">
<img src="./img/二维码.jpg" alt="">
<p>扫码下载APP</p>
</div>
</li>
<span></span>
<li><a href="javascript:;">智能生活</a></li><span></span>
<li><a href="javascript:;">Select Location</a></li>
</ul>
</div>
<div class="buy">
<i class="fas fa-shopping-cart"></i> 购物车 (0)
<div class="buy-show">
购物车中还没有商品，赶紧选购吧！
</div>
</div>
<div class="top-center-right">
<ul>
<li><a href="javascript:;">登录</a></li>
<span></span>
<li><a href="javascript:;">注册</a></li>
<span></span>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
</div>
<div class="header">
<div class="header-center">
<div class="logo">
<a class="mi" href="javascript:;">
</a>
<a class="home" href="javascript:;">
<i class="fas fa-home"></i>
</a>
</div>
<div class="header-title">
<ul>
<li class="null">
<a href="javascript:;"></a>
<ul class="left-menu">
<li><a href="javascript:;">手机 电话卡<i class="fas fa-chevron-right"></i></a></li>
<li><a href="javascript:;">电视 盒子<i class="fas fa-chevron-right"></i></a></li>
<li><a href="javascript:;">笔记本 显示器<i class="fas fa-chevron-right"></i></a></li>
<li><a href="javascript:;">家电 插线板<i class="fas fa-chevron-right"></i></a></li>
<li><a href="javascript:;">出行 穿戴<i class="fas fa-chevron-right"></i></a></li>
<li><a href="javascript:;">智能 路由器<i class="fas fa-chevron-right"></i></a>
</li>
<li><a href="javascript:;">电源 配件<i class="fas fa-chevron-right"></i></a></li>
<li><a href="javascript:;">健康 儿童<i class="fas fa-chevron-right"></i></a></li>
<li><a href="javascript:;">耳机 音箱<i class="fas fa-chevron-right"></i></a></li>
<li><a href="javascript:;">生活 箱包<i class="fas fa-chevron-right"></i></a></li>
</ul>
</li>
<li class="goods-01"><a href="javascript:;">小米手机</a></li>
<li class="goods-02"><a href="javascript:;">Redmi红米</a></li>
<li class="goods-03"><a href="javascript:;">电视</a></li>
<li class="goods-04"><a href="javascript:;">笔记本</a></li>
<li class="goods-05"><a href="javascript:;">家电</a></li>
<li class="goods-06"><a href="javascript:;">路由器</a></li>
<li class="goods-01"><a href="javascript:;">智能硬件</a></li>
<li><a href="javascript:;">服务</a></li>
<li><a href="javascript:;">社区</a></li>
<!--小米商品菜单-->
<div class="goods-show-02">
<div class="ipone-02">
<ul>
<li><a href="javascript:;">
<img src="./img/小米01.webp" alt="">
<h3>Redmi K30 至尊纪念版</h3>
<p>1999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/小米02.webp" alt="">
<h3>Redmi K30 Pro 系列</h3>
<p>2999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/小米03.webp" alt="">
<h3>Redmi K30 系列</h3>
<p>1399元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/小米04.webp" alt="">
<h3>Redmi 10X 至尊纪念版</h3>
<p>999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/小米05.webp" alt="">
<h3>Redmi Note 8</h3>
<p>888元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机1.webp" alt="">
<h3>Redmi 9</h3>
<p>799元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- Redmi红米的商品列表* -->
<div class="goods-show-01">
<div class="ipone-01">
<ul>
<li><a href="javascript:;">
<img src="./img/手机1.webp" alt="">
<h3>Redmi K30 至尊纪念版</h3>
<p>1999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机2.webp" alt="">
<h3>Redmi K30 Pro 系列</h3>
<p>2999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机3.webp" alt="">
<h3>Redmi K30 系列</h3>
<p>1399元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机4.webp" alt="">
<h3>Redmi 10X 至尊纪念版</h3>
<p>999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机5.webp" alt="">
<h3>Redmi Note 8</h3>
<p>888元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机6.webp" alt="">
<h3>Redmi 9</h3>
<p>799元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 电视的商品列表* -->
<div class="goods-show-03">
<div class="ipone-03">
<ul>
<li><a href="javascript:;">
<img src="./img/手机1.webp" alt="">
<h3>Redmi K30 至尊纪念版</h3>
<p>1999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机2.webp" alt="">
<h3>Redmi K30 Pro 系列</h3>
<p>2999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机3.webp" alt="">
<h3>Redmi K30 系列</h3>
<p>1399元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机4.webp" alt="">
<h3>Redmi 10X 至尊纪念版</h3>
<p>999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机5.webp" alt="">
<h3>Redmi Note 8</h3>
<p>888元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机6.webp" alt="">
<h3>Redmi 9</h3>
<p>799元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 笔记本的商品列表* -->
<div class="goods-show-04">
<div class="ipone-04">
<ul>
<li><a href="javascript:;">
<img src="./img/手机1.webp" alt="">
<h3>Redmi K30 至尊纪念版</h3>
<p>1999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机2.webp" alt="">
<h3>Redmi K30 Pro 系列</h3>
<p>2999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机3.webp" alt="">
<h3>Redmi K30 系列</h3>
<p>1399元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机4.webp" alt="">
<h3>Redmi 10X 至尊纪念版</h3>
<p>999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机5.webp" alt="">
<h3>Redmi Note 8</h3>
<p>888元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机6.webp" alt="">
<h3>Redmi 9</h3>
<p>799元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 家电的商品列表* -->
<div class="goods-show-05">
<div class="ipone-05">
<ul>
<li><a href="javascript:;">
<img src="./img/手机1.webp" alt="">
<h3>Redmi K30 至尊纪念版</h3>
<p>1999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机2.webp" alt="">
<h3>Redmi K30 Pro 系列</h3>
<p>2999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机3.webp" alt="">
<h3>Redmi K30 系列</h3>
<p>1399元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机4.webp" alt="">
<h3>Redmi 10X 至尊纪念版</h3>
<p>999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机5.webp" alt="">
<h3>Redmi Note 8</h3>
<p>888元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机6.webp" alt="">
<h3>Redmi 9</h3>
<p>799元起</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 路由器的商品列表* -->
<div class="goods-show-06">
<div class="ipone-06">
<ul>
<li><a href="javascript:;">
<img src="./img/手机1.webp" alt="">
<h3>Redmi K30 至尊纪念版</h3>
<p>1999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机2.webp" alt="">
<h3>Redmi K30 Pro 系列</h3>
<p>2999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机3.webp" alt="">
<h3>Redmi K30 系列</h3>
<p>1399元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机4.webp" alt="">
<h3>Redmi 10X 至尊纪念版</h3>
<p>999元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机5.webp" alt="">
<h3>Redmi Note 8</h3>
<p>888元起</p>
</a>
</li>
<span></span>
<li><a href="javascript:;">
<img src="./img/手机6.webp" alt="">
<h3>Redmi 9</h3>
<p>799元起</p>
</a>
</li>
</ul>
</div>
</div>
</ul>
</div>
<div class="header-look">
<input type="text" placeholder="Redmi K30 Rro" class="look" />
<div class="look-box">
<i class="fas fa-search"></i>
</div>
</div>
</div>
</div>
<!--创建banner容器-->
<div class="banner-warp ">
<div class="banner ">
<ul class="banner-img">
<li><a href="#">
<img src="./img/banner01.webp" id="img" alt=""></a></li>
<!-- <li><a href="#">
<img src="./img/banner02.webp" alt=""></a></li>
<li><a href="#">
<img src="./img/banner03.webp" alt=""></a></li>
<li><a href="#">
<img src="./img/banner04.webp" alt=""></a></li>
<li><a href="#">
<img src="./img/banner01.webp" alt=""></a></li> -->
</ul>
<div class="poniter">
<a class="active" href="javascrpit:;" class="lbt"></a>
<a href="javascrpit:;" class="lbt"></a>
<a href="javascrpit:;" class="lbt"></a>
<a href="javascrpit:;" class="lbt"></a>
<a href="javascrpit:;" class="lbt"></a>
</div>
<div class="banner-last" >
<a href="javascript:;" id="left"><i class="fas fa-chevron-left"></i></a>
</div>
<div class="banner-next">
<a href="javascript:;" id="right"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="tool">
<ul>
<li class="uesr"><a href="#">
<i class="fas fa-mobile-alt"></i>
<p>手机APP</p>
</a>
</li>
<li><a href="#">
<i class="fas fa-user"></i>
<p>个人中心</p>
<div class="user-show">
</div>
</a>
<li><a href="#">
<i class="fas fa-tools"></i>
<p>售后服务</p>
</a>
<li><a href="#">
<i class="fas fa-headset"></i>
<p>人工客服</p>
</a>
<li><a href="#">
<i class="fas fa-shopping-cart"></i>
<p>购物车</p>
</a>
<li><a href="#top">
<i class="fas fa-angle-up"></i>
<p>回顶部</p>
</a>
</ul>
</div>
<div class="advertisement">
<div class="advertisement-left">
<ul>
<li>
<a href="#">
<i class="far fa-clock"></i>
<p>小米秒杀</p>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
<p>企业团购</p>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-facebook-square"></i>
<p>F码通道</p>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-sim-card"></i>
<p>米粉卡</p>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-undo-alt"></i>
<p>以旧换新</p>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-yen-sign"></i>
<p>话费充值</p>
</a>
</li>
</ul>
</div>
<div class="advertisement-boxs">
<a href="#"><img src="./img/advertisement01.jpg" alt=""></a>
</div>
<div class="advertisement-boxs">
<a href="#"><img src="img/advertisement02.jpg" alt=""></a>
</div>
<div class="advertisement-boxs">
<a href="#"><img src="./img/advertisement03.jpg" alt=""></a>
</div>
</div>
<!--商品销售和介绍-->
<div class="body">
<div class="body-center">
<div class="shangou">
<div class="shangou-title">
<h2 class="title">小米闪购</h2>
<div class="shangou-left">
<a href="javascript"></i><i class="fas fa-chevron-right"></i></a>
</div>
<div class="shangou-right">
<a href="#"><i class="fas fa-chevron-left"></i></a>
</div>
</div>
<div class="shangou-boxs-left">
<div class="time">
14:00 场
</div>
<div class="shandian">
<i class="fas fa-bolt"></i>
</div>
<div class="desc">
本场进行中
</div>
<div class="dates">
<div class="date">02</div>
<span>:</span>
<div class="date" id="time01">00</div>
<span>:</span>
<div class="date" id="time02">00</div>
</div>
</div>
<div class="shangou-boxs">
<img src="./img/手机2.webp" alt="">
<p class="title">Redmi K30 至尊纪念版</p>
<p class="span">
拍照快人一步
</p>
<p class="monney">
1899元
<span>
1999元
</span>
</p>
</div>
<div class="shangou-boxs">
<img src="./img/手机3.webp" alt="">
<p class="title">Redmi K30 Pro系列</p>
<p class="span">
宝强用了都说好
</p>
<p class="monney">
1499元
<span>
1799元
</span>
</p>
</div>
<div class="shangou-boxs">
<img src="./img/手机6.webp" alt="">
<p class="title">Redmi K10 至尊纪念版</p>
<p class="span">
据说打游戏自带外挂哦
</p>
<p class="monney">
3088元
<span>
3200元
</span>
</p>
</div>
<div class="shangou-boxs">
<img src="./img/手机1.webp" alt="">
<p class="title">Redmi s20 定制版</p>
<p class="span">
企业团队定制版
</p>
<p class="monney">
2099元
<span>
2199元
</span>
</p>
</div>
</div>
<!--小米10标题栏-->
<div class="body-center-01">
<a href=""><img src="./img/小米10.webp" alt=""></a>
</div>
<!--手机内容块-->
<div class="body-center-02">
<div class="body-center-02-title">
<h2 class="title">手机</h2>
<h3>查看全部 <i class="fas fa-chevron-circle-right"></i></h3>
</div>
<div class="body-center-02-left w">
<img src="./img/body-center-02-left.webp" alt="">
</div>
<div class="body-center-02-boxs">
<div class="body-center-02-box">
<img src="./img/手机01.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-02-box">
<img src="./img/手机02.webp" alt="">
<p class="tit">Redmi K30 至尊版</p>
<p class="txt">120Hz弹出全面屏，天玑1000+旗舰处理器</p>
<span>1999元起</span>
</div>
<div class="body-center-02-box">
<img src="./img/手机03.webp" alt="">
<p class="tit">腾讯黑鲨3S</p>
<p class="txt">晓龙865处理器，120Hz刷新率</p>
<span>3799元起</span>
</div>
<div class="body-center-02-box">
<img src="./img/手机04.webp" alt="">
<p class="tit">Redmi 9A</p>
<p class="txt">5000mAh长循环大电量。6.53超大屏幕</p>
<span>599元起</span>
</div>
<div class="body-center-02-box">
<img src="./img/手机05.webp" alt="">
<p class="tit">小米10 青春版 5G</p>
<p class="txt">50倍潜望式变焦/轻薄5G手机</p>
<span>1899元起</span>
</div>
<div class="body-center-02-box">
<img src="./img/手机06.webp" alt="">
<p class="tit">小米10</p>
<p class="txt">骁龙865/1亿像素相机</p>
<span>3799元起</span>
</div>
<div class="body-center-02-box">
<img src="./img/手机07.webp" alt="">
<p class="tit">Redmi k30 Pro</p>
<p class="txt">双模5G,晓龙865，弹出全面屏</p>
<span>2999元起</span>
</div>
<div class="body-center-02-box">
<img src="./img/手机08.webp" alt="">
<p class="tit">Redmi K30 Pro 变焦版</p>
<p class="txt">双模5G，晓龙865，弹出全面屏</p>
<span>3399元起</span>
</div>
</div>
</div>
<!--家电内容板块-->
<div class="body-center-03">
<div class="body-center-03-title sss">
<a class="sss1" href="#">
<img src="img/电视.webp" alt="" class="sssimg">
</a>
</div>
<div class="body-center-02">
<div class="body-center-02-title">
<h2 class="title">家电</h2>
<h3>查看全部 <i class="fas fa-chevron-circle-right"></i></h3>
</div>
<div class="body-center-02-boxs">
<div class="left w">
<img src="./img/家电01.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/家电03.webp" alt="">
<p class="tit">小米电视4C 32英寸</p>
<p class="txt">高清液晶屏，人工智能系统</p>
<span>899元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/家电04.webp" alt="">
<p class="tit">全面屏电视 55英寸E55X</p>
<p class="txt">潮流全面屏设计</p>
<span>2299元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/家电05.webp" alt="">
<p class="tit">小米电视4A 70英寸</p>
<p class="txt">大屏更享受</p>
<span>3499元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/家电06.webp" alt="">
<p class="tit">小米电视4C 43英寸</p>
<p class="txt">FHD全清高屏，钢琴烤漆</p>
<span>1399元起</span>
</div>
<div class="left w">
<img src="./img/家电02.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/家电07.jpg" alt="">
<p class="tit">小米电视4S 75英寸</p>
<p class="txt">4KHDR，人工智能语音</p>
<span>4499元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/家电08.webp" alt="">
<p class="tit">小米全面屏电视65英寸 E65</p>
<p class="txt">震撼大屏，时尚全面屏</p>
<span>2799元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/家电09.webp" alt="">
<p class="tit">小米全面屏电视E32C</p>
<p class="txt">全面屏设计，人工智能系统</p>
<span>899元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/家电10.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
</div>
</div>
<!-- 智能内容板块 -->
<div class="body-center-03">
<div class="body-center-03-title sss">
<a class="sss1" href="#">
<img src="./img/智能.webp" alt="" class="sssimg">
</a>
</div>
<div class="body-center-02">
<div class="body-center-02-title">
<h2 class="title">智能</h2>
<h3>查看全部 <i class="fas fa-chevron-circle-right"></i></h3>
</div>
<div class="body-center-02-boxs">
<div class="left w">
<img src="./img/智能01.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/智能02.webp" alt="">
<p class="tit">小米[小爱老师]</p>
<p class="txt">英语提分利器</p>
<span>499元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/智能03.webp" alt="">
<p class="tit">小米智能门锁 E</p>
<p class="txt">告别钥匙，畅享便携生活</p>
<span>999元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/智能04.webp" alt="">
<p class="tit">小米小爱音箱 Play</p>
<p class="txt">听音乐、语音遥控家电</p>
<span>99元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/智能05.webp" alt="">
<p class="tit">小爱音箱万能遥控板</p>
<p class="txt">传统家电秒变智能</p>
<span>149元起</span>
</div>
<div class="left w">
<img src="./img/智能06.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/智能07.webp" alt="">
<p class="tit">米家电饭煲4L</p>
<p class="txt">890W 立体加热</p>
<span>299元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/智能08.webp" alt="">
<p class="tit">米家智能窗帘</p>
<p class="txt">窗帘开合随心控</p>
<span>799元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/智能09.webp" alt="">
<p class="tit">小米体脂秤2</p>
<p class="txt">轻松掌握身体脂肪率</p>
<span>99元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/智能03.webp" alt="">
<p class="tit">小米小爱音箱Play</p>
<p class="txt">听音乐、语音遥控家电</p>
<span>99元起</span>
</div>
</div>
</div>
</div>
</div>
<!-- 搭配内容板块 -->
<div class="body-center-03">
<div class="body-center-03-title sss">
<a class="sss1" href="#">
<img src="./img/搭配.webp" alt="" class="sssimg">
</a>
</div>
<div class="body-center-02">
<div class="body-center-02-title">
<h2 class="title">搭配</h2>
<h3>查看全部 <i class="fas fa-chevron-circle-right"></i></h3>
</div>
<div class="body-center-02-boxs">
<div class="left w">
<img src="./img/搭配1.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/搭配2.webp" alt="">
<p class="tit">小米真无线蓝牙耳机Air 2 Pro</p>
<p class="txt">主动降噪/持久续航/无线充电</p>
<span>699元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/搭配3.webp" alt="">
<p class="tit">小米真无线蓝牙耳机 Air 2</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/搭配4.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/搭配5.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="left w">
<img src="./img/搭配6.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/搭配7.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/搭配8.jpg" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/搭配9.jpg" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/搭配3.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
</div>
</div>
<!-- 配件内容块 -->
<div class="body-center-03">
<div class="body-center-03-title sss">
<a class="sss1" href="#">
<img src="./img/配件.webp" alt="" class="sssimg">
</a>
</div>
<div class="body-center-02">
<div class="body-center-02-title">
<h2 class="title">配件</h2>
<h3>查看全部 <i class="fas fa-chevron-circle-right"></i></h3>
</div>
<div class="body-center-02-boxs">
<div class="left w">
<img src="./img/配件1.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/配件2.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/配件3.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/配件4.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/配件5.jpg" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="left w">
<img src="./img/配件6.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/配件7.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/配件8.jpg" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/配件9.jpg" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/配件3.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">120X变焦/120W秒充/120Hz屏幕</p>
<span>5299元起</span>
</div>
</div>
</div>
<!-- 周边内容块 -->
</div>
</div>
<div class="body-center-03">
<div class="body-center-03-title sss">
<a class="sss1" href="#">
<img src="./img/周边.webp" alt="" class="sssimg">
</a>
</div>
<div class="body-center-02">
<div class="body-center-02-title">
<h2 class="title">周边</h2>
<h3>查看全部 <i class="fas fa-chevron-circle-right"></i></h3>
</div>
<div class="body-center-02-boxs">
<div class="left w">
<img src="./img/周边1.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/周边2.webp" alt="">
<p class="tit">小米10 至尊版</p>
<p class="txt">米家飞行号太阳镜 Pro</p>
<span>199元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/周边3.webp" alt="">
<p class="tit">小米巨能写中性笔10支笔</p>
<p class="txt">一支顶4支，超长顺滑书写</p>
<span>9.99元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/周边4.webp" alt="">
<p class="tit">米家迷你保温杯</p>
<p class="txt">可以随身携带的温度</p>
<span>49元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/周边5.jpg" alt="">
<p class="tit">贝医生巴氏牙刷 四色装</p>
<p class="txt">进口刷毛，好品质</p>
<span>39.9元起</span>
</div>
<div class="left w">
<img src="./img/周边6.webp" alt="">
</div>
<div class="body-center-03-box">
<img src="./img/周边7.webp" alt="">
<p class="tit">米家运动鞋4</p>
<p class="txt">轻盈若絮，弹若脱兔</p>
<span>179元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/周边8.webp" alt="">
<p class="tit">米家指甲刀五间套</p>
<p class="txt">轻巧多用，优雅随行</p>
<span>39.9元起</span>
</div>
<div class="body-center-03-box">
<img src="./img/周边9.webp" alt="">
<p class="tit">8H乳胶床垫2</p>
<p class="txt">软硬双面可睡</p>
<span>599元起</span>
</div>
<div class="body-center-03-box clean">
<img src="./img/周边3.webp" alt="">
<p class="tit">小米巨能写中心笔10支装</p>
<p class="txt">一支顶4支，超长顺滑书写</p>
<span>9.99元起</span>
</div>
</div>
</div>
</div>
</div>
<!--这是body下面的结束部分-->
</div>
</div>
<!--预约服务内容-->
<div class="foot">
<div class="foot-center">
<div class="foot-center-title">
<ul>
<li><a href="#"><i class="fas fa-hammer"></i> 预约维修服务</a></li>
<span></span>
<li><a href="#"><i class="fas fa-sync-alt"></i> 7天无理由退货</a></li>
<span></span>
<li><a href="#"><i class="fas fa-coins"></i> 15天免费换货</a></li>
<span></span>
<li><a href="#"><i class="fas fa-gift"></i> 满99元包邮</a></li>
<span></span>
<li><a href="#"><i class="fas fa-map-marker-alt"></i> 520余家售后网点</a></li>
</ul>
</div>
<div class="foot-nav">
<ul class="foot-01">
<li class="foot-02">
帮助中心
<ul class="foot-03">
<li><a href="">账户管理</a></li>
<li><a href="">购物指南</a></li>
<li><a href="">订单操作</a></li>
</ul>
</li>
<li class="foot-02">服务支持
<ul class="foot-03">
<li><a href="#">售后服务</a></li>
<li><a href="#">自助服务</a></li>
<li><a href="#">相关下载</a></li>
</ul>
</li>
<li class="foot-02">线下门店
<ul class="foot-03">
<li><a href="#">小米之家</a></li>
<li><a href="#">服务网点</a></li>
<li><a href="#">授权体验店</a></li>
</ul>
</li>
<li class="foot-02">关于小米
<ul class="foot-03">
<li><a href="#">了解小米</a></li>
<li><a href="#">加入小米</a></li>
<li><a href="#">投资者关系</a></li>
<li><a href="#">企业社会责任</a></li>
<li><a href="#">廉洁举报</a></li>
</ul>
</li>
<li class="foot-02">关注我们
<ul class="foot-03">
<li><a href="#">新浪微博</a></li>
<li><a href="#">官方微信</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">公益基金会</a></li>
</ul>
</li>
<li class="foot-02">特色服务
<ul class="foot-03">
<li><a href="#">F码通道</a></li>
<li><a href="#">礼物码</a></li>
<li><a href="#">防伪查询</a></li>
</ul>
</li>
</ul>
</div>
<div class="foot-right">
<p class="num">
400-100-5678
</p>
<p class="num-01">
8:00-18:00 (仅收市话费)
</p>
<div class="num-03">
<p><i class="fas fa-newspaper"></i> 人工客服</p>
</div>
<div class="num-04">
<p class="num-04">关注小米: <a href="#"> <i class="fab fa-weibo"></i></a> <a href="#"><i class="fab fa-weixin"></i></a></p>
</div>
</div>
<!---->
</div>
</div>
<!--网页版权信息-->
<div class="end">
<div class="end-center">
<div class="left">
<img src="./img/mi-logo.png" alt="">
</div>
<div class="right">
<ul>
<li><a href="#">小米商城</a></li>
<span>|</span>
<li><a href="#">MIUI</a></li>
<span>|</span>
<li><a href="#">米家</a></li>
<span>|</span>
<li><a href="#">米聊</a></li>
<span>|</span>
<li><a href="#">多看</a></li>
<span>|</span>
<li><a href="#">游戏</a></li>
<span>|</span>
<li><a href="#">政务服务</a></li>
<span>|</span>
<li><a href="#">小米天猫店</a></li>
<span>|</span>
<li><a href="#">小米集团隐私政策</a></li>
<span>|</span>
<li><a href="#">小米公司儿童信息保护规则</a></li>
<span>|</span>
<li><a href="#">小米商城隐私政策</a></li>
<span>|</span>
<li><a href="#">小米商城用户协议</a></li>
<span>|</span>
<li><a href="#">问题反馈</a></li>
<span>|</span>
<li><a href="#">Select Location</a></li>
</ul>
<div class="center">
<a href="#">© mi.com</a> <span>京ICP证110507号</span> <a href="#"> 京ICP备10046444号</a> <a href="#"> 京公网安备11010802020134号</a> <a href="#">京网文[2020]0276-042号</a><br>
<a href="#">（京）网械平台备字（2018）第00005号</a> <a href="#"> 互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="#">营业执照
</a> <a href="#">医疗器械质量公告
</a>
<br>
<a href="#">增值电信业务许可证</a><span>网络食品经营备案</span><a href="#">京食药网食备202010048 </a><a href="#">食品经营许可证</a><br>
<span>违法和不良信息举报电话：171-5104-4404</span>
<a href="#">知识产权侵权投诉</a>
<span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span><br>
<div class="end-01">
<a href="#"><img src="./img/end-01.png" alt=""></a>
</div>
<div class="end-02">
<a href="#"><img src="./img/end-02.png" alt=""></a>
</div>
<div class="end-03">
<a href="#"><img src="./img/end-03.png" alt=""></a>
</div>
<div class="end-04">
<a href="#"><img src="./img/end-04.png" alt=""></a>
</div>
<div class="end-05">
<a href="#"><img src="./img/end-05.png" alt=""></a>
</div>
</div>
<!--right结束-->
</div>
<!---->
</div>
</div>
</div>
</div>
</body>
</html>以下为style.css的全部代码
.top-top{
width: 100%;
height: 120px;
background-color: #fe5038;
}
.top-top .top-top-center{
width: 1226px;
height: 100%;
margin: 0 auto;
}
.top-top img{
width: 100%;
height: 100%;
}
.top{
width: 100%;
height: 40px;
background-color: #333;
color: #b0b0b0;
font: 12px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
.top .top-center{
width: 1226px;
height: 40px;
margin: 0 auto;
}
.top .top-center .top-center-left li{
float: left;
line-height: 40px;
}
.top .top-center span{
float: left;
width: 1px;
height: 10px;
margin: 15px 9px;
background-color: #424242;
}
.top-center a{
text-decoration: none;
color: #b0b0b0;
}
.top-center a:hover{
color: white;
}
.top .top-center .top-center-right{
float: right;
line-height: 40px;
}
.top-center .top-center-right li{
float: left;
}
.top-center .buy{
width: 100px;
height: 40px;
margin-left: 20px;
background-color: #424242;
float: right;
text-align: center;
line-height: 40px;
position: relative;
cursor: pointer;
}
.top-center-left ul li.down .show-down{
width: 120px;
height: 140px;
background-color: white;
margin-left: -30px;
position: absolute;
text-align: center;
display: none;
cursor: pointer;
transition: height 1s;
box-shadow: 0px 1px 10px #B0B0B0;
padding-top: 20px;
padding-bottom: 10px;
z-index: 999;
}
.top-center-left ul li.down{
position: relative;
}
/*设置小三角*/
.top-center-left ul li.down::after{
content: '';
position: absolute;
border: 10px solid transparent;
border-top: none;
/* width: 0;
height: 0; */
bottom: 0;
left: 15px;
}
.top-center-left ul li.down:hover::after{
border-bottom-color:white ;
}
.top-center-left ul li.down:hover .show-down{
display: block;
}
.top-center-left .down .show-down img{
width: 100px;
height: 100px;
margin: 0px 10px;
}
.top-center-left ul li.down .show-down p{
margin-top: -10px;
color: #333333;
font-size: 14px;
}
.top .top-center .buy .buy-show{
width: 300px;
height: 100px;
position: absolute;
left: -200px;
display: none;
color: #333333;
line-height: 100px;
font-size: 13px;
box-shadow: 0px 1px 3px #B0B0B0;
}
.top .top-center .buy:hover .buy-show{
display: block;
}
.top .top-center .buy:hover{
background-color: white;
color: #ff6700;
}
.header{
width: 100%;
height: 100px;
clear: both;
position: relative;
}
.header .header-center{
width: 1226px;
height: 100%;
margin: 0 auto;
}
.header-center .logo{
width: 55px;
height: 55px;
background-color: #FF6700;
float: left;
margin: 22.5px 0;
position: relative;
background-image: url(../img/mi-logo.png);
overflow: hidden;
}
.header .logo .home
{
width: 55px;
height: 55px;
font-size: 25px;
text-align: center;
line-height: 55px;
color: white;
left: -55px;
}
.header-center .logo a.mi{
background-image: url(../img/mi-logo.png);
}
.header-center .logo a{
position: absolute;
width: 55px;
height: 55px;
left: 0;
background-color: #FF6700;
transition: left 0.3s;
}
.header-center .logo:hover .mi{
left: 55px;
}
.header-center .logo:hover .home{
left: 0;
}
.header-center .logo img{
margin: 2.5px;
}
.header-center .home img{
margin-top: 12px;
margin-left: 13px;
width: 30px;
height: 30px;
}
.header-center .header-title li.null{
width: 142px;
margin-right: 30px;
position: relative;
}
.header-center .header-title li{
float: left;
line-height: 100px;
height: 100px;
margin-left: 0px;
text-align: center;
}
.header-center .header-title a{
text-decoration: none;
font: 16px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333333;
height: 100px;
width: 80px;
padding-top: 40px;
padding-bottom: 42px;
padding-right: 20px;
}
.header-center .header-title a:hover{
color: #FF6700;
}
.header-center .header-look{
line-height: 100px;
float: right;
}
.header-center .header-look .look-box{
width: 52px;
height: 48px;
float: right;
margin: 25px 0;
border: #B0B0B0 1px solid;
font-size: 18px;
color: #616161;
text-align: center;
line-height: 55px;
cursor: pointer;
border-left: none;
z-index: 100;
}
.header-center .header-look .look-box:hover{
color: white;
background-color: #FF6700;
}
.header-center .header-look .look{
width: 245px;
height: 44px;
z-index: 100;
}
.header-center .header-look .look:hover{
border: #FF6700 1px solid;
}
.header-title .goods-02:hover ~ .goods-show-02,
.header-title .goods-show-02:hover{
height: 228px;
box-shadow: 0 5px 3px rgba(0,0,0,.2) ;
border-top:#B0B0B0 1px solid ;
}
.header-title .goods-01:hover ~ .goods-show-01,
.header-title .goods-show-01:hover{
height: 228px;
box-shadow: 0 5px 3px rgba(0,0,0,.2) ;
border-top:#B0B0B0 1px solid ;
}
.header-title .goods-03:hover ~ .goods-show-03,
.header-title .goods-show-03:hover{
height: 228px;
box-shadow: 0 5px 3px rgba(0,0,0,.2) ;
border-top:#B0B0B0 1px solid ;
}
.header-title .goods-04:hover ~ .goods-show-04,
.header-title .goods-show-04:hover{
height: 228px;
box-shadow: 0 5px 3px rgba(0,0,0,.2) ;
border-top:#B0B0B0 1px solid ;
}
.header-title .goods-05:hover ~ .goods-show-05,
.header-title .goods-show-05:hover{
height: 228px;
box-shadow: 0 5px 3px rgba(0,0,0,.2) ;
border-top:#B0B0B0 1px solid ;
}
.header-title .goods-06:hover ~ .goods-show-06,
.header-title .goods-show-06:hover{
height: 228px;
box-shadow: 0 5px 3px rgba(0,0,0,.2) ;
border-top:#B0B0B0 1px solid ;
}
.header-title .goods-show-01,
.header-title .goods-show-02,
.header-title .goods-show-03,
.header-title .goods-show-04,
.header-title .goods-show-05,
.header-title .goods-show-06{
width: 100%;
height: 0px;
position: absolute;
top: 100px;
left: 0;
overflow: hidden;
z-index: 9990;
background-color: white;
transition: height 0.3s;
}
.header-title .goods-show-02 .ipone-02,
.header-title .goods-show-01 .ipone-01,
.header-title .goods-show-03 .ipone-03,
.header-title .goods-show-04 .ipone-04,
.header-title .goods-show-05 .ipone-05,
.header-title .goods-show-06 .ipone-06{
width: 80%;
height: 100%;
margin: 0 auto;
clear: both;
}
.header-title .goods-show-01 .ipone-01 img,
.header-title .goods-show-02 .ipone-02 img,
.header-title .goods-show-03 .ipone-03 img,
.header-title .goods-show-04 .ipone-04 img,
.header-title .goods-show-05 .ipone-05 img,
.header-title .goods-show-06 .ipone-06 img{
width:100% ;
}
.header-title .goods-show-01 .ipone-01 span,
.header-title .goods-show-02 .ipone-02 span,
.header-title .goods-show-03 .ipone-03 span,
.header-title .goods-show-04 .ipone-04 span,
.header-title .goods-show-05 .ipone-05 span,
.header-title .goods-show-06 .ipone-06 span{
width: 2px;
height: 150px;
background-color: #B0B0B0;
float: left;
margin: 25px 6px;
}
.header-title .goods-show-01 .ipone-01 h3,
.header-title .goods-show-02 .ipone-02 h3,
.header-title .goods-show-03 .ipone-03 h3,
.header-title .goods-show-04 .ipone-04 h3,
.header-title .goods-show-05 .ipone-05 h3,
.header-title .goods-show-06 .ipone-06 h3{
margin-top: -35px;
font-size: 13px;
}
.header-title .goods-show-01 .ipone-01 p,
.header-title .goods-show-02 .ipone-02 p,
.header-title .goods-show-03 .ipone-03 p,
.header-title .goods-show-04 .ipone-04 p,
.header-title .goods-show-05 .ipone-05 p,
.header-title .goods-show-06 .ipone-06 p{
font-size: 13px;
color: red;
margin-top: 10px;
}
.header-title .goods-show-01 .ipone-01 li,
.header-title .goods-show-02 .ipone-02 li,
.header-title .goods-show-03 .ipone-03 li,
.header-title .goods-show-04 .ipone-04 li,
.header-title .goods-show-05 .ipone-05 li,
.header-title .goods-show-06 .ipone-06 li{
height: 228px;
width: 190px;
padding-top: 20px;
}
.header .header-center .header-title .null .left-menu{
width: 234px;
height: 420px;
background-color: #21222d;
position: absolute;
left: -55px;
color: white;
padding: 20px 0px;
opacity: 0.9;/*透明度*/
z-index: 100;
}
.header .header-center .header-title .null .left-menu li{
width: 100%;
height: 41px;
display: block;
text-align: left;
}
.header .header-center .header-title .null .left-menu i{
float: right;
}
.header .header-center .header-title .null .left-menu a{
font-size: 15px;
display: block;
width: 214px;
line-height: 16px;
padding-top: 16px;
padding-bottom: 16px;
height: 10px;
color: black;
text-indent: 2em;
color: white;
}
.header .header-center .header-title .null .left-menu a:hover{
background-color: #FF6700;
}
.banner-warp{
width: 1226px;
margin: 0 auto;
height: 420px;
position: relative;
}
.banner-warp img{
width: 100%;
height: 100%;
/*去掉边线，使其对齐*/
vertical-align: top;
}
.banner-warp .banner-img li{
position: absolute;
}
.poniter{
position: absolute;
bottom: 0px;
right: 0px;
margin-right: 35px;
margin-bottom: -15px;
}
.poniter a{
float: left;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(0,0,0,.4);
border: 3px rgba(255,255,255,.4) solid;
margin-right: 6px;
}
.poniter a:hover,
.poniter a.active{
background-color:white;
border-color: rgba(0,0,0,.4);
}
.banner .banner-last a{
width: 40px;
height: 70px;
line-height: 80px;
font-size: 40px;
color: #B0B0B0;
text-align: center;
font-weight: lighter;
position: absolute;
left: 234px;
/*这里只能存过下面三行的方式对其执行垂直居中，使用行高等于高度不会生效*/
top: 0;
bottom: 0;
margin: auto 0;
}
.banner .banner-last a:hover{
background-color: #B0B0B0;
color: whitesmoke;
}
.banner .banner-next a{
display: block;
width: 40px;
height: 70px;
position: absolute;
right: 0;
line-height: 70px;
font-size: 40px;
text-align: center;
color: #B0B0B0;
top: 0;
bottom: 0;
margin: auto;
}
.banner .banner-next a:hover{
color: white;
background-color: #B0B0B0;
}
.tool{
width: 60px;
height: 50px;
position: fixed;
right: 0;
top: 200px;
z-index: 9999;
}
.tool a{
display: block;
width: 100%;
color: #757575;
text-align: center;
line-height: 30px;
border: gainsboro 1px solid;
text-decoration: none;
background-color: white;
}
.tool a:hover{
color: coral;
}
.tool ul li i{
margin-top: 20px;
font-size: 20px;
}
.tool ul li p{
margin-top: -6px;
font-size: 14px;
}
.tool .uesr .user-show{
width: 100px;
height: 100px;
background-color: #FF0000;
position: fixed;
right: 100px;
top: 800px;
}
.advertisement{
width: 1226px;
height: 170px;
margin: 0 auto;
margin-top: 55px;
}
.advertisement-left{
width: 234px;
height: 100%;
float: left;
background-color: #5F5750;
margin-right: 2px;
}
.advertisement-left a{
width: 78px;
height: 59px;
float: left;
text-decoration: none;
text-align: center;
padding-top: 20px;
color: #CFCCCA;
font-size: 15px;
}
.advertisement-left a{
position: relative;
}
/*设置边框*/
.advertisement-left a::before{
content: '';
position: absolute;
width: 64px;
height: 1px;
background-color: #665e57;
left: 0;
top: 0;
right: 0;
margin: 0 auto;
}
.advertisement-left a:hover{
color: white;
}
.advertisement-left p{
margin-top: 10px;
}
.advertisement-boxs{
width: 316px;
float: left;
margin-left: 14px;
height: 170px;
background-color: #FF7F50;
}
.advertisement-boxs img{
width: 100%;
}
.body{
margin-top: 30px;
clear: all;
width: 100%;
height: 5200px;/*可改变高度*/
background-color: #f5f5f5;
}
.body-center{
width: 1226px;
height: 100%;
margin: 0 auto;
/* background-color: #FF0000; */
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
.body .body-center .title{
margin: 0px;
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
float: left;
}
.body .body-center .shangou-left{
width: 36px;
height: 20px;
border: #CFCCCA 1px solid;
float: right;
margin-top: 20px;
text-align: center;
padding: 2px 0;
}
.body .body-center .shangou-right{
width: 36px;
height: 20px;
border: #CFCCCA 1px solid;
float: right;
margin-top: 20px;
text-align: center;
padding: 2px 0;
border-right: none;
cursor: pointer;
}
.shangou-title{
width: 100%;
height: 58px;
}
.body .body-center a{
padding: 10px 13px;
line-height: 20px;
font-size: 16px;
color: #b2b0b0;
}
.body .body-center .shangou-right a:hover,
.body .body-center .shangou-left a:hover{
color: #FF6700;
}
.shangou .shangou-boxs-left{
width: 234px;
height: 300px;
background-color: #FF7F50;
float: left;
text-align: center;
padding-top: 39px;
background-color: #f1eded;
position: relative;
margin-bottom: 25px;
}
.shangou .shangou-boxs-left .time{
width: 100%;
height: 46.2px;
color: #EF3A3B;
padding: 15px 0 0;
font-size: 22px;
}
.shangou-boxs-left .shandian{
width: 100%;
height: 53px;
color: #EF3A3B;
font-size: 60px;
}
.shangou-boxs-left .desc{
width: 100%;
height: 22.4px;
color: #0000008A;
margin-top: 50px;
margin-bottom: 20px;
}
.shangou-boxs-left .dates{
width: 100%;
height: 46px;
padding-left: 30px;
}
.shangou-boxs-left .date{
width: 46px;
height: 46px;
color: white;
background-color: #605751;
font-size: 24px;
float: left;
line-height: 46px;
}
.shangou-boxs-left span{
float: left;
line-height: 46px;
font-size: 24px;
margin: 0 4px;
}
.shangou .shangou-boxs{
width: 234px;
height: 339px;
background-color: white;
float: left;
margin-left: 14px;
text-align: center;
}
.shangou .shangou-boxs img{
width: 100%;
margin-top: 20px;
}
.shangou .shangou-boxs .title{
font-size: 16px;
text-align: center;
clear: float;
display: block;
width: 100%;
margin-top: 20px;
margin-bottom: -14px;
color: black;
}
.shangou .shangou-boxs .span{
font-size: 13px;
color: #aaaaaa;
margin-bottom: 14px;
}
.shangou .shangou-boxs .monney{
color: red;
font-size: 16px;
}
.shangou .shangou-boxs span{
/*给文字加下划线*/
text-decoration: line-through;
color: #AAAAAA;
font-size: 15px;
}
.body .body-center .body-center-01{
width: 100%;
height: 120px;
clear: both;
margin-bottom: 25px;
padding: 0px;
}
.body-center-01 a{
padding: 0;
margin: 0;
margin-left: -13px;
}
.body-center-01 img{
width: 100%;
height: 120px;
}
.body-center-02-title{
width: 100%;
height: 58px;
transition: all 0.6s;
}
.body-center-02-left{
width: 234px;
height: 614px;
float: left;
}
.body-center-02-left:hover{
top:-3px
}
.body-center-02-left img{
width: 100%;
height: 100%;
}
.body-center-02-box{
width: 234px;
height: 260px;
float: left;
margin-left: 14px;
margin-bottom: 14px;
text-align: center;
padding:20px 0;
background-color: #ffffff;
cursor: pointer;
transition: all 0.6s;
position: relative;
}
.body-center-02 .body-center-02-title h3{
font-size: 16px;
float: right;
color: #424242;
line-height: 58px;
}
.body-center-02 .body-center-02-title i{
font-size: 17px;
line-height: 59px;
color: #AAAAAA;
}
.body-center-02 .body-center-02-title h3:hover,
.body-center-02 .body-center-02-title i:hover{
color: #FF7F50;
cursor: pointer;
}
.body-center-02-box:hover{
top:-2px;
background-color: white;
box-shadow:0 15px 30px rgba(0,0,0,.1);
}
.body-center-02-box img{
width: 160px;
height: 160px;
}
.body-center-02-box p.tit{
clear: float;
width: 100%;
color: #333333;
font-size: 14px;
margin-top: 10px;
}
.body-center-02-box .txt{
font-size: 12px;
color: #B0B0B0;
margin-top: 7px;
}
.body-center-02-box span{
color: #FF6700;
display: block;
margin-top: 10px;
}
/*电视里面的样式*/
.body-center-03-box{
width: 234px;
height: 260px;
float: left;
margin-right: 14px;
margin-bottom: 14px;
text-align: center;
padding:20px 0;
background-color: #ffffff;
cursor: pointer;
transition: all 0.6s;
position: relative;
}
.body-center-03-box:after{
content:'';
margin-right: 0;
}
/*设置最左边的元素的样式*/
.left{
width: 234px;
height: 300px;
float: left;
margin-right: 14px;
margin-bottom: 14px;
text-align: center;
background-color: #ffffff;
cursor: pointer;
transition: all 0.6s;
position: relative;
}
.left img{
width: 100%;
height: 100%;
}
/*去除最后一个元素的右边距*/
.clean{
margin-right: 0px;
}
.body-center-03 .body-center-03-title h3{
font-size: 16px;
float: right;
color: #424242;
line-height: 58px;
}
.body-center-03 .body-center-03-title i{
font-size: 17px;
line-height: 59px;
color: #AAAAAA;
}
.body-center-03 .body-center-03-title h3:hover,
.body-center-03 .body-center-03-title i:hover{
color: #FF7F50;
cursor: pointer;
}
.body-center-03-box:hover{
top:-2px;
background-color: white;
box-shadow:0 15px 30px rgba(0,0,0,.1);
}
.left:hover{
top:-2px;
background-color: white;
box-shadow:0 15px 30px rgba(0,0,0,.1);
}
.body-center-03-box img{
width: 160px;
height: 160px;
}
.body-center-03-box p.tit{
clear: float;
width: 100%;
color: #333333;
font-size: 14px;
margin-top: 10px;
}
.body-center-03-box .txt{
font-size: 12px;
color: #B0B0B0;
margin-top: 7px;
}
.body-center-03-box span{
color: #FF6700;
display: block;
margin-top: 10px;
}
.foot{
width: 100%;
height: 329.8px;
background-color: white;
margin-top: -40px;
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
.foot-center{
width: 1226px;
height: 100%;
margin: 0 auto;
}
.foot-center-title{
width: 100%;
height: 80px;
background-color: white;
border-bottom: 1px solid #e9e9e9;
}
.foot-center-title li{
float: left;
height: 0px;
width: 243px;
text-align: center;
line-height: 80px;
padding-top: 20px;
padding-bottom: 20px;
line-height: 40px;
padding-left: 1px;
padding-right:1px: ;
}
.foot-center-title a{
font-size: 16px;
color: #616161;
text-decoration: none;
display: block;
/* height: 20px; */
}
.foot-center-title a:hover{
color: #FF6700;
}
.foot-center-title span{
width: 1px;
height: 25px;
background-color: #e9e9e9;
float: left;
line-height: 40px;
margin-top: 26px;
}
.foot-nav .foot-01 li.foot-02{
float: left;
margin-top: 40px;
margin-right: 105px;
}
.foot-nav .foot-01 li.foot-02 ul.foot-03 li{
margin-top: 30px;
margin-bottom: -15px;
}
.foot-nav .foot-01 li.foot-02 ul.foot-03 a{
text-decoration: none;
color: #757575;
font-size: 12px;
}
.foot-nav .foot-01 li.foot-02 ul.foot-03 a:hover{
color: #FF6700;
}
.foot-right{
width: 252px;
height: 130px;
/* background-color: #EF3A3B; */
float: right;
margin-top: -125px;
border-left:#e9e9e9 1px solid ;
text-align: center;
}
.foot-right .num{
color: #FF6700;
font-size: 22px;
margin-bottom: 1px;
}
.foot-right .num-01{
font-size: 12px;
color: #616161;
}
.num-03{
width: 120px;
height: 30px;
border: #FF6700 1px solid;
color: #FF6700;
background-color: white;
text-align: center;
margin: 10px auto;
font-size: 12px;
line-height: 30px;
cursor: pointer;
}
.num-03:hover{
background-color: #FF6700;
color: white;
}
.num-04 a{
color: #616161;
text-decoration: none;
font-size: 16px;
}
.num-04 a:hover{
color: #FF7F50;
cursor: pointer;
}
.end{
margin-top: 30px;
width: 100%;
height: 245.6px;
padding: 30px 0;
background-color: #fafafa;
font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif ;
}
.end .end-center{
width: 1226px;
height: 100%;
margin: 0 auto;
}
.end .end-center .left{
float: left;
clear: all;
width: 57px;
height: 57px;
background-color: #FF6700;
}
.end .end-center .right{
width: 1150px;
height: 300px;
float: right;
}
.end .end-center .right li{
float: left;
}
.end .end-center .right a{
font-size: 13px;
color: #757575;
text-decoration: none;
}
.end .end-center .right span{
float: left;
color: #757575;
margin: 0 3px;
}
.end .end-center .center{
float: left;
margin-top: 7px;
color:#B0B0B0 ;
font-size: 12px;
line-height: 16px;
}
.end .end-center .center a{
text-decoration: none;
}
.end .end-center .center a:hover{
color: #FF6700;
}
.end .end-center .end-01 img{
margin-top: 10px;
width: 83px;
height: 28px;
float: left;
}
.end .end-center .end-02 img{
margin: 0 2px;
margin-top: 10px;
width: 85px;
height: 28px;
float: left;
}
.end .end-center .end-03 img{
margin: 0 2px;
margin-top: 10px;
width: 85px;
height: 28px;
float: left;
}
.end .end-center .end-04 img{
margin: 0 2px;
margin-top: 10px;
width: 85px;
height: 28px;
float: left;
}
.end .end-center .end-05 img{
margin: 0 2px;
margin-top: 10px;
width: 105.6px;
height: 40px;
float: left;
}以下为index.css全部代码
.w{
cursor: pointer;
transition: all 0.6s;
position: relative;
}
/*电视内容板块*/
/*小广告上面的共同属性 sss*/
.sss{
width: 100%;
height: 120px;
clear: both;
margin-bottom: 25px;
padding: 0px;
margin-top: 635px;
background-color: red;
position: relative;
}
.ssss{
width: 100%;
height: 120px;
clear: both;
margin-bottom: 25px;
padding: 0px;
margin-top: 25px;
background-color: red;
position: relative;
}
.body-center .sss .sss1{
padding: 0;
margin: 0;
}
.body-center .sss .sssimg{
width: 100%;
height: 120px;
}
.top-top #del{
text-align: center;
line-height: 20px;
}
.top-top #del a{
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 10px;
right: 20px;
color: white;
background-color: #5F5750;
opacity: 0.5;
border-radius: 50%;
overflow: hidden;
text-decoration: none;
}
.top-top #del a:hover{
background-color: #21222D;
}
/**/以下为reset.css的全部代码
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}以下为style.js文件的全部代码
window.onload = function(){
var del = document.getElementById("del");
var top = document.getElementById("top");
del.onclick = function(){
top.style.display = "none";
};
var time01 = document.getElementById("time01");
var time02 = document.getElementById("time02");
var math2=0;
setInterval(function(){
math2++;
if(math2<10)
{
time02.innerHTML = "0"+math2;
}
if(math2>=10&&math2<=59)
{
time02.innerHTML = math2;
}
if(math2>=59)
{
math2=0;
}
},1000)
var math1 =0;
setInterval(function(){
math1++;
if(math1<10)
{
time01.innerHTML = "0"+math1;
}
if(math1>10&&math1<=59)
{
time01.innerHTML = math1;
}
if(math1>59)
{
math1=0;
}
},60000);
var imgArr = ["./img/banner01.webp","./img/banner02.webp","./img/banner03.webp","./img/banner04.webp","./img/banner01.webp"];
var img = document.getElementById("img");
// img.src = imgArr[1];
var left = document.getElementById("left");
var right = document.getElementById("right");
var index = 0;
left.onclick = function(){
index--;
if(index<0)
{
index = imgArr.length-1;
}
img.src = imgArr[index];
};
right.onclick = function(){
index++;
if(index>imgArr.length-1)
{
index=0;
}
img.src = imgArr[index];
};
var lbt = document.getElementsByClassName("lbt");
for(var i=0;i<lbt.length;i++)
{
lbt[i].num = i;
lbt[i].onmousemove = function(){
img.src = imgArr[this.num];
};
}
};
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
