admin管理员组文章数量:1607884
效果图
图标待完善、固定栏待完善、响应式待完善、Js链接到其他页面待完善
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米</title>
<!-- 网页图标 -->
<link rel="icon" href="images/favicon.ico">
<!-- 全局样式 -->
<link rel="stylesheet" href="css/reset.css">
<!-- 字体图标 -->
<link rel="stylesheet" href="css/iconfont.css">
<!-- 自己的css文件 -->
<link rel="stylesheet" href="css/mi.css">
</head>
<body>
<!--头部-->
<div class="header">
<div class="wrap">
<ul class="header-left">
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">loT</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">天星数科</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">小爱开放平台</a><span>|</span></li>
<li><a href="#">企业团购</a><span>|</span></li>
<li><a href="#">资质证照</a><span>|</span></li>
<li><a href="#">协议规则</a><span>|</span></li>
<li><a href="#">下载app</a><span>|</span>
<div class="download">
<img src="./images/download.png" alt="">
<p>小米商城app</p>
</div>
<div class="triangle">
</div>
</li>
<li><a href="#">智能生活</a><span>|</span></li>
<li><a href="#">Select Location</a></li>
</ul>
<ul class="header-right">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a></li>
<li class="cart"><a href="#"><i class="iconfont"></i>购物车(0)</a>
<div class="cart-list">
你还没有选中商品
</div>
</li>
</ul>
</div>
</div>
<!--导航栏-->
<div class="nav">
<div class="wrap">
<div class="logo">
<img src="./images/logo-footer.png" alt="">
</div>
<div class="nav-bar">
<ul>
<li><a href="#">Xiaomi手机</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="./images/4c87947d104ee5833913e4c520108f16.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">Redmi红米</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-bar-img">
<img src="images/2c16238f786e4f93bdb175d7bf21aa47.jpg" alt="">
</div>
<p>Xiaomi 12 pro</p>
<p>4699元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<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>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="search">
<form action="" >
<input type="text" placeholder="电视">
<button class="iconfont"></button>
<div class="hot-list">
<a href="#">商品1</a>
<a href="#">商品2</a>
<a href="#">商品3</a>
<a href="#">商品4</a>
<a href="#">商品5</a>
<a href="#">商品6</a>
<a href="#">商品7</a>
<a href="#">商品8</a>
</div>
</form>
</div>
</div>
</div>
<!--banner-->
<div class="banner">
<div class="wrap">
<div class="banner-box">
<a href="#">
<img src="images/a2938e547bc127b0014daa1f9b614fc0.jpg" alt="">
</a>
<!--轮播图、滑动图-->
<div class="slide">
<ul>
<li><a href="#">手机1</a><i class="iconfont"></i>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/07270cc09689eb9b13b29aa9f6bc41eb.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
</ul>
</div>
</li>
<li><a href="#">手机2</a><i class="iconfont"></i>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/53641901fbc28cbcdb495b17fdf69e46.jpg" alt="">
<span>Xiaomi 12 pro</span>
</a>
</li>
</ul>
</div>
</li>
<li><a href="#">手机</a><i class="iconfont"></i> </li>
<li><a href="#">手机</a><i class="iconfont"></i> </li>
<li><a href="#">手机</a><i class="iconfont"></i> </li>
<li><a href="#">手机</a><i class="iconfont"></i> </li>
<li><a href="#">手机</a><i class="iconfont"></i> </li>
<li><a href="#">手机</a><i class="iconfont"></i> </li>
<li><a href="#">手机</a><i class="iconfont"></i> </li>
<li><a href="#">手机</a><i class="iconfont"></i> </li>
</ul>
</div>
</div>
<div class="prev"></div>
<div class="next"></div>
</div>
</div>
<!--广告部分-->
<div class="adv">
<div class="wrap">
<div class="adv-aside">
<ul>
<li class="row col">
<a href="#">
<img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
<span>奥里给</span>
</a>
</li>
<li class="row col">
<a href="#">
<img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
<span>奥里给</span>
</a>
</li>
<li class="row">
<a href="#">
<img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
<span>奥里给</span>
</a>
</li>
<li class="col">
<a href="#">
<img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
<span>奥里给</span>
</a>
</li>
<li class="col">
<a href="#">
<img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
<span>奥里给</span>
</a>
</li>
<li>
<a href="#">
<img src="images/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
<span>奥里给</span>
</a>
</li>
</ul>
</div>
<div class="adv-img">
<a href="#"><img src="images/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""> </a>
</div>
<div class="adv-img">
<a href="#"><img src="images/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""> </a>
</div>
<div class="adv-img">
<a href="#"><img src="images/7bc54a61b927dd8c54ddd39a0acf0254.jpg" alt=""> </a>
</div>
</div>
</div>
<!--主体-->
<div class="contant">
<div class="wrap">
<div class="home-box">
<a href="#">
<img src="./images/11fc2ced4d8b5a924633f9a5b59f9fd2.jpg" alt="">
</a>
</div>
<!--手机-->
<div class="phone">
<h2 class="title">手机</h2>
<div class="phone-box">
<div class="phone-box-left">
<a href="#">
<img src="images/b67de5a8ce9025fb5d8bac66e019d1c3.jpg" alt="">
</a>
</div>
<div class="phone-box-right">
<div class="items">
<a href="#">
<img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/c924c3f3436b6934495fd98f159ee3f7.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--手表-->
<div class="contant">
<div class="wrap">
<div class="home-box">
<a href="#">
<img src="./images/41d16e66381cfeda7b6b39ab67678d5e.jpg" alt="">
</a>
</div>
<div class="phone">
<h2 class="title">手表</h2>
<div class="phone-box">
<div class="phone-box-left">
<a href="#">
<img src="images/b56fd90a60e3d9e5d87dae9fbd427ea8.jpg" alt="">
</a>
</div>
<div class="phone-box-right">
<div class="items">
<a href="#">
<img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
<div class="items">
<a href="#">
<img src="images/d295c4fb500d163a7045dc715b47f808.jpg" alt="" class="goods-img">
<p class="name">Xiaomi 12 Pro</p>
<p class="desc">全新一代 天机8</p>
<p class="price">4699元起</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--视频-->
<div class="video">
<div class="wrap">
<h2 class="title">视频</h2>
<div class="video-box">
<ul>
<li>
<a href="images/bb682b7e1c0fba0e4e1eac1d8c7f47ce.mp4"></a>
<div class="video-img">
<img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
<div class="play">
<span></span>
</div>
</div>
<p>好好学习天天向上</p>
</a>
</li>
<li>
<a href="images/bb682b7e1c0fba0e4e1eac1d8c7f47ce.mp4"></a>
<div class="video-img">
<img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
<div class="play">
<span></span>
</div>
</div>
<p>好好学习天天向上</p>
</a>
</li>
<li>
<a href="images/bb682b7e1c0fba0e4e1eac1d8c7f47ce.mp4"></a>
<div class="video-img">
<img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
<div class="play">
<span></span>
</div>
</div>
<p>好好学习天天向上</p>
</a>
</li>
<li>
<a href="images/bb682b7e1c0fba0e4e1eac1d8c7f47ce.mp4"></a>
<div class="video-img">
<img src="images/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt="">
<div class="play">
<span></span>
</div>
</div>
<p>好好学习天天向上</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--页脚-->
<div class="footer">
<div class="footer-top">
<div class="wrap">
<div class="footer-server">
<ul>
<li>
<a href="#">
<img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
<span>预约服务</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
<span>预约服务</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
<span>预约服务</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
<span>预约服务</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
<span>预约服务</span>
</a>
</li>
</ul>
</div>
<div class="footer-links">
<ul>
<li>帮助中心</li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
</ul>
<ul>
<li>帮助中心</li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
</ul>
<ul>
<li>帮助中心</li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
</ul>
<ul>
<li>帮助中心</li>
<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>
<ul>
<li>帮助中心</li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
</ul>
<ul>
<li>帮助中心</li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
<li><a href="#">财务管理</a></li>
</ul>
<!-- <div class="contant">-->
<!-- <p>400-100-5678</p>-->
<!-- <p>8:00-18:00(仅收市话费)</p>-->
<!-- <a href="#" class="btn">人工客服</a>-->
<!-- <p>-->
<!-- <span>关注小米:</span>-->
<!-- <a href="#" class="wb"> </a>-->
<!-- <a href="#" class="wx"> </a>-->
<!-- </p>-->
<!-- </div>-->
</div>
</div>
</div>
<div class="footer-bottom"></div>
</div>
<!--固定位置-->
<div class="fixed">
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
}
/*头部*/
.header{
width: 100%;
height:40px;
line-height: 40px;
background-color:#333;
}
.wrap{
width:1226px;
margin:0 auto;
}
.header-left{
float: left;
}
.header-right{
float: right;
}
.header li{
float: left;
position: relative;
height: 40px;
/*设置一下高度不然下面板块会有空隙*/
}
li{
list-style-type: none;
}
.header a{
color:#b0b0b0;
font-size:12px;
}
a{
text-decoration: none;
}
.header a:hover{
color:#fff;
}
.header span{
color:#424242;
margin: 0 3.6px;
font-size:12px;
}
.cart{
position: relative;
width:100px;
height:40px;
background-color:#424242;
margin-left: 25px;
text-align: center;
}
.cart:hover{
background-color:#fff;
}
.cart:hover>a{
color:#ff6700;
}
.cart-list{
z-index: 950;
position: absolute;
right:0;
top:40px;
width:316px;
height:0px;
/*隐藏文字高度设置为0*/
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0, .15);
color: #424242;
font-size:12px;
line-height:100px ;
transition: all .3s;
/*过渡*/
overflow: hidden;
}
.cart:hover>.cart-list{
height:100px;
}
.download{
/*被遮挡*/
z-index: 900;
position: absolute;
top:40px;
left:50%;
margin-left: -55px;
width:124px;
height:0px;
background-color:#fff;
box-shadow: 0 1px 5px #aaa;
overflow: hidden;
transition: all .3s;
}
.download>img{
width:90px;
margin: 18px 0 12px;
padding-left: 18px;
}
.download>p{
color: #333;
font-size: 14px;
line-height: 1;
text-align: center;
}
.header-left>li:hover>.download{
height:148px;
}
.triangle{
display: none;
position: absolute;
bottom: 0;
left:50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom:8px solid #fff;
border-left:8px solid transparent;
border-right:8px solid transparent;
}
.header-left>li:hover>.triangle{
display: block;
}
/*导航栏*/
.nav{
/*清除边距,也可以更改上面li高度*/
clear:both;
width: 100%;
height:100%;
background-color: #fff;
position: relative;
}
.logo{
float: left;
width: 234px;
height:100px;
/*background-color: red;*/
text-align: left;
}
.nav-bar{
float: left;
width: 696px;
height:100px;
/*background-color: sienna;*/
}
.search{
float: left;
width:296px;
height:50px;
/*background-color: seagreen;*/
margin-top: 25px;
position: relative;
}
.logo>img{
width: 56px;
margin-top:22px;
}
.nav-bar>ul>li{
float: left;
}
.nav-bar>ul>li>a{
display: block;
padding:38px 10px;
color: #333;
}
.nav-bar>ul>li>a:hover{
color: #ff6700;
}
.nav-bar-list{
z-index: 850;
/*写的时候打开,写完了就隐藏*/
display: none;
position: absolute;
top:100px;
left:0;
width: 100%;
height: 229px;
border-top:1px solid #e0e0e0;
background-color: #fff;
box-shadow: 0 3px 4px rgba(0,0,0, .18);
}
.nav-bar li:hover>.nav-bar-list{
display: block;
}
/*有遮挡上面下拉列表,添加z-index*/
.nav-bar-list li{
width: 204px;
/*height: 100px;*/
/*background-color:red;*/
padding-top:35px;
float: left;
}
.nav-bar-img{
width: 100%;
height:110px;
border-right:1px solid #e0e0e0;
}
.nav-bar-img img{
width:50%;
height:100px;
margin-left: 10px;
}
.nav-bar-list p{
line-height: 20px;
font-size: 12px;
color:#333;
margin-left: 20px;
}
.nav-bar-list p:last-of-type{
color: #ff6700;
margin-left: 30px;
}
.nav-bar-list li:last-child .nav-bar-img{
border-right: none;
}
.search input{
float: left;
width: 223px;
height:48px;
padding:0 10px;
border: 1px solid #e0e0e0;
border-right: none;
outline: none;
/*去自带边框*/
transition: all .2s;
}
.search button{
float: left;
width: 52px;
height: 50px;
background-color: #fff;
border: 1px solid #e0e0e0;
transition: all .2s;
}
.search button:hover{
background-color: #ff6700;
border-color: #ff6700;
color: #fff;
}
/*包含关系用空格或者大于,同级用加或波浪线*/
.search input:hover,.search input:hover+button{
border-color: #b0b0b0;
}
.search input:focus,.search input:focus+button{
border-color: #ff6700;
}
/*悬停+点击,换成焦点就好了*/
.hot-list{
z-index: 900;
display: none;
position: absolute;
top:50px;
left:0;
width: 243px;
height: 240px;
border: 1px solid #ff6700;
border-top:none;
background-color: #fff;
}
.hot-list a{
display: block;
color: #424242;
font-size: 12px;
padding: 6px 15px;
height: 18px;
}
.hot-list a:hover{
background-color: #e0e0e0;
}
.search input:focus~.hot-list{
display: block;
}
/*banner*/
.banner{
width: 100%;
height:460px;
/*background-color: red;*/
margin-top: 100px;
}
.banner-box{
position: relative;
width: 100%;
height: 460px;
/*background-color: sienna;*/
}
.banner-box img{
width: 100%;
height:460px;
}
/*滑动门*/
.slide{
position: absolute;
top:0px;
left:0px;
width: 234px;
height: 420px;
padding: 20px 0;
background-color: rgba(105,101,101, .6);
}
.slide>ul>li{
height: 42px;
line-height: 42px;
padding-left: 30px;
text-align: left;
}
.slide>ul>li:hover{
background-color: #ff6700;
}
.slide>ul>li>a{
color: #fff;
font-size: 14px;
}
.slide i{
float: right;
margin-right: 20px;
color: #e0e0e0;
}
.slide-list{
z-index: 700;
display: none;
position: absolute;
top:0;
left:100%;
width: 992px;
height: 456px;
border: 1px solid #e0e0e0;
border-left: none;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0,0,0, .18);
padding-top: 2px;
}
.slide li:hover>.slide-list{
display: block;
}
.slide-list>ul{
width: 245px;
float: left;
}
.slide-list li{
width: 100%;
height: 76px;
/*background-color: red;*/
padding: 18px 0 18px 20px;
box-sizing: border-box;
}
.slide-list li img{
position: relative;
width: 30px;
height:42px;
}
.slide-list li span{
position: absolute;
margin-top: 1.5px;
font-size: 12px;
color: #333;
}
.slide-list li:hover span{
color: #ff6700;
}
/*箭头*/
.prev,.next{
position: absolute;
top:50%;
margin-top: -34.5px;
width: 41px;
height:69px;
background: url("../images/icon-slides.png");
}
.prev{
left:400px;
background-position:-83px;
}
.prev:hover{
background-position: 0;
}
.next{
right: 180px;
background-position: -124px;
}
.next:hover{
background-position: -42px;
}
/*广告部分*/
.adv{
width:100%;
height: 170px;
margin: 14px 0 26px;
}
.adv-aside{
position: relative;
float: left;
width:228px;
height: 164px;
padding:3px;
background-color: #5f5750;
}
.adv-img{
float: left;
width:316px;
height:170px;
background-color: red;
margin-left: 14.66px;
transition: all .2s linear;
}
.adv-img img{
width:100%;
}
.adv-img :hover{
box-shadow:0 15px 30px rgba(0,0,0, .1) ;
}
.adv-aside li{
position: relative;
float: left;
width: 76px;
height: 82px;
}
.adv-aside img{
float: left;
width: 35px;
height:35px;
}
.adv-aside span{
float: left;
text-decoration: none;
margin-bottom: 4px;
display:block;
font-size: 16px;
}
.adv-aside img,span{
padding-left: 13px;
padding-top: 7px;
}
.adv-aside a{
display: block;
color: #fff;
font-size: 12px;
opacity: .7;
transition: all .2s;
}
.adv-aside a:hover{
opacity: 1;
}
.row::after{
position: absolute;
bottom: 0;
left:5px;
content: " ";
height: 1px;
width: 64px;
background-color: #665e57;
}
.col::before{
position: absolute;
right:0;
top:5px;
content: " ";
width: 1px;
height: 70px;
background-color:#665e57;
}
/*可以直接合并*/
/*.row::after,.col::before{*/
/* position: absolute;*/
/* content: " ";*/
/* background-color:#665e57;*/
/*}*/
/*.row::after{*/
/* bottom: 0;*/
/* left:5px;*/
/* height: 1px;*/
/* width: 64px;*/
/*}*/
/*.col::before{*/
/* right:0;*/
/* top:5px;*/
/* width: 1px;*/
/* height: 70px;*/
/*}*/
/*主体*/
.contant{
width: 100%;
background-color: #f5f5f5;
padding: 4px 0 12px;
}
.home-box{
width: 100%;
height: 120px;
margin: 22px 0;
}
.title{
text-align: left;
font-size: 22px;
font-weight: 200;
color:#333;
line-height: 58px;
}
.phone-box{
width: 100%;
height: 614px;
/*background-color: red;*/
}
.phone-box-left{
float: left;
width: 234px;
height:614px;
/*background-color: seagreen;*/
transition: all .2s linear;
}
.phone-box-left img{
width: 100%;
height: 100%;
}
.phone-box-right{
float: left;
width: 992px;
height:614px;
/*background-color: pink;*/
}
.items{
float: left;
width: 234px;
height: 300px;
background-color: #fff;
margin-bottom: 14px;
margin-left: 14px;
transition: all .2s linear;
}
.items:hover,.phone-box-left:hover,.video-box li:hover{
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(0,0,0, .1);
}
.goods-img{
width: 160px;
margin: 30px 20px 10px 35px;
}
.items p{
text-align: center;
}
.name{
width: 214px;
height: 21px;
margin: 0 auto 2px;
/*background-color: red;*/
font-size: 14px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.desc{
width: 214px;
height: 18px;
color: #b0b0b0;
font-size: 12px;
margin: 0 auto 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*可合并写*/
.price{
color: #ff6700;
font-size: 14px;
}
/*视频*/
.video-box li{
width: 296px;
height:285px;
margin-bottom: 14px;
background-color: #fff;
float: left;
margin-left: 14px;
transition: all .2s linear;
}
.video-box li:first-child{
margin-left: 0;
}
.video-img{
position: relative;
width: 100%;
height: 180px;
margin-bottom: 28px;
}
.video-box p{
width: 268px;
height: 21px;
color: #333;
font-size: 14px;
margin: 0 auto 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.video-box a{
display: block;
}
.play{
position: absolute;
left:20px;
bottom: 10px;
width: 32px;
height:20px;
border: 2px solid #fff;
border-radius: 12px;
background-color: rgba(0,0,0, .6);
transition: all .2s;
}
.play>span{
padding: 0;
margin: 0;
width: 0;
height:0;
display: inline-block;
border-left: 10px solid #fff;
border-top:6px solid transparent;
border-bottom: 6px solid transparent;
position: relative;
left:12px;
top:-1px;
}
.video-img:hover>.play{
background-color: #ff6700;
border-color: #ff6700;
}
/*页脚*/
.footer-top{
background-color: #fff;
}
.footer-bottom{
background-color: #fafafa;
padding: 30px 0;
}
.footer-server{
width: 100%;
height:25px;
line-height: 25px;
padding:27px 45px;
border-bottom: 1px solid #e0e0e0;
}
.footer-server li{
float: left;
width:19.8%;
border-right: 1px solid #e0e0e0;
}
.footer-server li:last-child{
border-right: none;
}
.footer-server img{
width: 20px;
height: 20px;
margin-right: 6px;
position: relative;
left:20px;
top:4px;
}
.footer-server a{
color:#616161;
transition: all .2s;
}
.footer-server a:hover{
color: #ff6700;
}
.footer-links{
padding:40px 0;
height:172px;
}
.footer-links ul{
float: left;
width: 160px;
text-align: left;
padding-left: 43px;
margin-top: 30px;
}
.footer-links li{
height: 18px;
margin-top: 10px;
font-size: 14px;
color: #424242;
}
.footer-links li:first-child{
height:17px;
margin: -1px 0 26px;
}
.footer-links li a{
font-size: 12px;
color: #757575;
}
.footer-links li a:hover{
color: #ff6700;
}
/*.contant{*/
/* float: right;*/
/* width: 251px;*/
/* height: 111px;*/
/* border-left: 1px solid #e0e0e0;*/
/* padding-top: 50px;*/
/*}*/
/*.contant>p:first-of-type{*/
/* font-size: 22px;*/
/* line-height: 22px;*/
/* color: #ff6700;*/
/* margin-bottom: 5px;*/
/*}*/
/*.contant>p:nth-of-type(2){*/
/* color: #616161;*/
/* font-size: 12px;*/
/* margin-bottom: 5px;*/
/*}*/
/*.btn{*/
/* width: 118px;*/
/* height:28px;*/
/* border: 1px solid #ff6700;*/
/* display: inline-block;*/
/* line-height:28px;*/
/* background-color: #fff;*/
/* color: #ff6700;*/
/* font-size: 12px;*/
/* transition: all .4s;*/
/*}*/
/*.btn:hover{*/
/* background-color: #ff6700;*/
/* color: #fff;*/
/*}*/
/*.contant p:last-of-type{*/
/* font-size: 12px;*/
/* color: #616161;*/
/* margin-top: 10px;*/
/*}*/
/*.contant p:last-of-type span{*/
/* position: relative;*/
/* top:-5px;*/
/*}*/
/*.xb,wx{*/
/* width: 24px;*/
/* height: 24px;*/
/* margin-left: 6px;*/
/* display: inline-block;*/
/*}*/
/*.wb{*/
/* background-image: url("../images");*/
/* background-size: 100%;*/
/*}*/
/*.wb:hover{*/
/* background-image: url("../images");*/
/*}*/
/*.wx{*/
/* background-image: url("../images");*/
/* background-size: 100%;*/
/*}*/
/*.wx:hover{*/
/* background-image: url("../images");*/
/*}*/
.fixed{
position: fixed;
right:0;
bottom: 70px;
width: 84px;
height: 455px;
background-color: pink;
}
版权声明:本文标题:完整小米网页制作 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726413957a1069581.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论