|
@@ -0,0 +1,206 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="en">
|
|
|
|
|
+
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
+ <title>Document</title>
|
|
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5060986_y3nqnoflco.css">
|
|
|
|
|
+ <style>
|
|
|
|
|
+ /* css reset */
|
|
|
|
|
+ * {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ li {
|
|
|
|
|
+ list-style: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .container {
|
|
|
|
|
+ width: 1226px;
|
|
|
|
|
+ height: 460px;
|
|
|
|
|
+ margin: 100px auto;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ .img-list{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .img-list img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .img-list .img-list-item {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .img-list .active {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .control-content {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ /* background-color: rgba(0,0,0,0.5); */
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .left-nav{
|
|
|
|
|
+ width: 234px;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ background-color: rgba(105,101,101,.6);
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .left-nav ul{
|
|
|
|
|
+ padding: 20px 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .left-nav ul li{
|
|
|
|
|
+ padding-left: 30px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ height: 42px;
|
|
|
|
|
+ line-height: 42px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .left-nav ul li:hover{
|
|
|
|
|
+ background-color: #ff6700;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .left-nav ul li .iconfont{
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ margin-right: 30px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .right-btn{
|
|
|
|
|
+ width: 992px;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ /* background-color: red; */
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .arr-btn{
|
|
|
|
|
+ height: 69px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ /* background-color: blue; */
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ margin-top: -35px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .arr-btn .arr-left, .control-content .arr-btn .arr-right{
|
|
|
|
|
+ width: 41px;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background-image: url("./img/icon-slides.png");
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .arr-btn .arr-left{
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ background-position: -84px 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .arr-btn .arr-left:hover{
|
|
|
|
|
+ background-position: 0 0;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .arr-btn .arr-right{
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ background-position: -125px 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .control-content .arr-btn .arr-right:hover{
|
|
|
|
|
+ background-position: -42px 0;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+
|
|
|
|
|
+<body>
|
|
|
|
|
+ <div class="container">
|
|
|
|
|
+ <div class="img-list">
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li class="img-list-item active">
|
|
|
|
|
+ <img src="./img/slider1.jpg" alt="slider1">
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li class="img-list-item">
|
|
|
|
|
+ <img src="./img/slider2.jpg" alt="slider2">
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li class="img-list-item">
|
|
|
|
|
+ <img src="./img/slider3.jpg" alt="slider3">
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li class="img-list-item">
|
|
|
|
|
+ <img src="./img/slider4.jpg" alt="slider4">
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li class="img-list-item">
|
|
|
|
|
+ <img src="./img/slider5.jpg" alt="slider5">
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li class="img-list-item">
|
|
|
|
|
+ <img src="./img/slider6.jpg" alt="slider6">
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="control-content">
|
|
|
|
|
+ <div class="left-nav">
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">手机</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">电脑</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">平板</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">笔记本</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">手机</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">手机</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">手机</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">手机</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">手机</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <span class="nav-text">手机</span>
|
|
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="right-btn">
|
|
|
|
|
+ <div class="arr-btn">
|
|
|
|
|
+ <div class="arr-left"></div>
|
|
|
|
|
+ <div class="arr-right"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="dot-btn">
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li class="dot-btn-item"></li>
|
|
|
|
|
+ <li class="dot-btn-item"></li>
|
|
|
|
|
+ <li class="dot-btn-item"></li>
|
|
|
|
|
+ <li class="dot-btn-item"></li>
|
|
|
|
|
+ <li class="dot-btn-item"></li>
|
|
|
|
|
+ <li class="dot-btn-item"></li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</body>
|
|
|
|
|
+
|
|
|
|
|
+</html>
|
