覃冠森 / training · Commits

Commit 2574c29896b6a414c3cfcc882fce781e60fa4434

Authored by 钟艺
1 parent e04dc1f9

修改了index.html文件，完成前面两个幻灯片

Inline Side-by-side
Showing 1 changed file with 323 additions and 35 deletions
1 1 <!DOCTYPE html>
2 2 <html lang="en">
3   -
4 3 <head>
5 4 <meta charset="UTF-8">
6 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8   - <link rel="stylesheet" href="./js/bootstrap.min.css">
9   - <link rel="stylesheet" href="css/index.css">
10   - <script src="./js/jquery-3.3.1.min.js"></script>
11   - <script src="./js/bootstrap.min.js"></script>
12   - <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
13   - crossorigin="anonymous">
  7 + <link rel="stylesheet" href="js/bootstrap.min.css">
  8 + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  9 + <!-- /* Slick主题层叠样式表 */ -->
  10 + <link rel="stylesheet" href="js/slick.css">
  11 + <link rel="stylesheet" href="css/style.css">
  12 + <link rel="stylesheet" href="js/slick-theme.css">
14 13 <title>首页</title>
15 14 </head>
16   -
17 15 <body>
18 16 <div class="page">
19   - <div class="top-box nav">
20   - <div class="top-box-nav">
21   - <ul class="nav nav-tabs">
22   - <li class="dropdown"><a class="dorpdown-doggle" data-toggle="dropdown" href="#">Language <i class="fas fa-angle-down"></i></a>
23   - <ul class="dropdown-menu">
24   - <li class=""><a href="">English</a></li>
25   - <li><a href="">Francais</a></li>
26   - <li><a href="">Deutsch</a></li>
27   - </ul>
28   - </li>
29   - </ul>
  17 + <div class="index-content">
  18 + <div class="index-top-box">
  19 + <div class="container">
  20 + <div class="row">
  21 + <div class="outside-nav collapse navbar-collapse" id="responsive-navbar">
  22 + <ul class="outside-nav-1 nav navbar-nav">
  23 + <li>
  24 + <a href="#">Compare List</a>
  25 + <a href="#">My Wishlist</a>
  26 + <a href="#">My Cart</a>
  27 + <a href="#">Checkout</a>
  28 + <a href="#">Log In</a>
  29 + </li>
  30 + </ul>
  31 + </div>
  32 + <div class="col-xs-9 col-sm-5">
  33 + <!-- 语言导航 -->
  34 + <div class="index-top-lan nav">
  35 + <button type="button" class="btn dropdown-toggle lang-1" id="dropdownMenu1" data-toggle="dropdown">Language</button>
  36 + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  37 + <li role="presentation"><a href="#" role="presentation" tabindex="-1">English</a></li>
  38 + <li role="presentation"><a href="#" role="presentation" tabindex="-1">Francais</a></li>
  39 + <li role="presentation"><a href="#" role="presentation" tabindex="-1">Deutsch</a></li>
  40 + </ul>
  41 + </div>
  42 + </div>
  43 + <div class="col-xs-3 col-sm-7">
  44 + <!-- 右上角菜单 -->
  45 + <div class="index-top-nav">
  46 + <button type="button" class="open navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar"><i class="fas fa-bars"></i>
  47 + </button>
  48 + </div>
  49 + </div>
  50 + </div>
  51 + </div>
30 52 </div>
31   - <div class="top-box-barbtn"><i class="fas fa-bars"></i></div>
32   - </div>
33   - <div class="header-wrapper">
34   - <div class="container header-body">
35   - <div class="row">
36   - <div class="col-xs-6 logo-box">
37   - <div class="logo"><img src="http://progressive.nikadevs.com/sites/all/themes/progressive/progressive_sub/logo.png"
38   - class="logo-img" alt="图片挂了">
  53 + <!-- header内容 -->
  54 + <header>
  55 + <div class="header-wrapper">
  56 + <div class="outside-header collapse navbar-collapse" id="responsive-header">
  57 + <ul class="nav navbar-nav">
  58 + <li>
  59 + <a href="#">Home</a>
  60 + <a href="#">Pages</a>
  61 + <a href="#">Shop</a>
  62 + <a href="#">Mega Menu</a>
  63 + <a href="#">Elements</a>
  64 + <a href="#">Bootstrap</a>
  65 + <a href="#">Buy</a>
  66 + </li>
  67 + </ul>
  68 + </div>
  69 + <div class="container header-body">
  70 + <div class="row">
  71 + <div class="col-xs-6 logo-box">
  72 + <div class="logo"><img src="http://progressive.nikadevs.com/sites/all/themes/progressive/progressive_sub/logo.png" class="logo-img" alt="图片挂了">
  73 + </div>
  74 + </div>
  75 +
  76 + <div class="col-xs-6">
  77 + <div class="btn-right-one">
  78 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#"><i class="fas fa-shopping-basket">Cart 0</i>
  79 + </div>
  80 + <div class="btn-right-two">
  81 + <button type="button" class="menu-open navbar-toggle" data-toggle="collapse" data-target="#responsive-header"><i class="fas fa-bars"> Menu</i>
  82 + </div>
  83 + </div>
  84 + </div>
  85 + </div>
  86 + </div>
  87 + </header>
  88 + <div class="index-slick">
  89 + <div class="wrapper-1">
  90 + <div class="slick" id="wrapper-1-1">
  91 + <div><img src="img/rs-slider1-bg.jpg" alt="图片挂了"></div>
  92 + <div><img src="img/rs-slider2-bg.jpg" alt="图片挂了"></div>
  93 + <div><img src="img/rs-slider3-bg.jpg" alt="图片挂了"></div>
  94 + <div><img src="img/rs-slider4-bg.jpg" alt="图片挂了"></div>
  95 + </div>
  96 + </div>
  97 +
  98 + <div class="wrapper-2">
  99 + <div class="container">
  100 + <div class="slick" id="wrapper-2-1">
  101 + <div>
  102 + <div class="wrapper-2-1">
  103 + <img src="img/slide-1.jpg" alt="">
  104 + </div>
  105 + <h3>Morbi non lacus ac sapien molestie</h3>
  106 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  107 + </div>
  108 + <div>
  109 + <div class="wrapper-2-1">
  110 + <img src="img/slide-2.jpg" alt="">
  111 + </div>
  112 + <h3>Placeat accusamus quiaquos</h3>
  113 + <p>orem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  114 + </div>
  115 + <div>
  116 + <div class="wrapper-2-1">
  117 + <img src="img/slide-3.jpg" alt="">
  118 + </div>
  119 + <h3>Morbi non lacus ac sapien molestie</h3>
  120 + <p>orem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  121 + </div>
  122 + <div>
  123 + <div class="wrapper-2-1">
  124 + <img src="img/slide-4.jpg" alt="">
  125 + </div>
  126 + <h3>Eum asperiores esse voluptatum</h3>
  127 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  128 + </div>
  129 + <div>
  130 + <div class="wrapper-2-1">
  131 + <img src="img/slide-5.jpg" alt="">
  132 + </div>
  133 + <h3>Eius quo sed vero blanditiis</h3>
  134 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  135 + </div>
  136 + <div>
  137 + <div class="wrapper-2-1">
  138 + <img src="img/slide-1.jpg" alt="">
  139 + </div>
  140 + <h3>Sunt maiores libero odio in</h3>
  141 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  142 + </div>
  143 + <div>
  144 + <div class="wrapper-2-1">
  145 + <img src="img/slide-2.jpg" alt="">
  146 + </div>
  147 + <h3>Morbi non lacus ac sapien molestie</h3>
  148 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  149 + </div>
  150 + <div>
  151 + <div class="wrapper-2-1">
  152 + <img src="img/slide-3.jpg" alt="">
  153 + </div>
  154 + <h3>Placeat accusamus quiaquos</h3>
  155 + <p>orem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  156 + </div>
39 157 </div>
40 158 </div>
41   - <div class="col-xs-6">
42   - <div class="btn-right-one">
43   - <span><i class="fas fa-shopping-basket"></i></span>
44   - <p>Cart 0</p>
  159 + </div>
  160 + </div>
  161 +
  162 + <div class="index-content-1">
  163 + <div class="container">
  164 + <div class="pub_title">
  165 + <h3>Features</h3>
  166 + </div>
  167 + <div class="row">
  168 + <div class="col-xs-10 col-sm-3">
  169 + <div class="small-i-icon">
  170 + <i class="fas fa-cogs"></i>
  171 + </div>
  172 + <h6>Easy Setup</h6>
  173 + <p>The readable content of a page when looking at its layout. The point of using. Duis aute irure dolor reprehenderit in voluptate velit esse cillum.</p>
45 174 </div>
46   - <div class="btn-right-two">
47   - <span><i class="fas fa-bars"></i></span>
48   - <p>Menu</p>
  175 + <div class="col-xs-10 col-sm-3">
  176 + <div class="small-i-icon">
  177 + <i class="fas fa-desktop"></i>
  178 + </div>
  179 + <h6>Repsonsive Design</h6>
  180 + <p>The readable content of a page when looking at its layout. The point of using. Duis aute irure dolor reprehenderit in voluptate velit esse cillum.</p>
  181 + </div>
  182 + <div class="col-xs-10 col-sm-3">
  183 + <div class="small-i-icon">
  184 + <i class="fas fa-wrench"></i>
  185 + </div>
  186 + <h6>Graphic Design</h6>
  187 + <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. It is a long established fact that.</p>
  188 + </div>
  189 + <div class="col-xs-10 col-sm-3">
  190 + <div class="small-i-icon">
  191 + <i class="fas fa-image"></i>
  192 + </div>
  193 + <h6>Web Design</h6>
  194 + <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
  195 + </div>
  196 + </div>
  197 + </div>
  198 + </div>
  199 + <div class="index-content-2" style="background-image: url('./img/band-1.jpg');">
  200 + <div class="index-content-mar">
  201 + <div class="row">
  202 + <div class="col-xs-12 col-sm-3">
  203 + <div class="content-2-1">
  204 + <div class="container">
  205 + <div class="title">
  206 + <a href="#">First Package</a>
  207 + </div>
  208 + <div class="point-box">
  209 + <div class="circle-img">
  210 + <i class="fas fa-shopping-cart"></i>
  211 + </div>
  212 + <div class="font-s-12">Starting at</div>
  213 + <div class="font-price">$199<p class="font-bold font-s-12">/month</p>
  214 + </div>
  215 + </div>
  216 + <ul class="options">
  217 + <li>Responsive Design</li>
  218 + <li>Styled elements</li>
  219 + <li>Easy Setup</li>
  220 + </ul>
  221 + </div>
  222 + <div class="bottom-box" style="background-color: rgb(255, 231, 231);">
  223 + <div class="container">
  224 + <a href="#">Read More ></a>
  225 + <button type="button">Buy Now</button>
  226 + </div>
  227 + </div>
  228 + </div>
49 229 </div>
  230 + <div class="col-xs-12 col-sm-3"></div>
  231 + <div class="col-xs-12 col-sm-3"></div>
  232 + <div class="col-xs-12 col-sm-3"></div>
50 233 </div>
51 234 </div>
52 235 </div>
  236 + <footer class="footer">
  237 + <div class="footer-item-4">
  238 + <div class="container">
  239 + <div class="row">
  240 + <div class="footer-item-4-1 col-xs-12 col-sm-3">
  241 + <div class="title-box">
  242 + <h3>FOLLOW US</h3>
  243 + </div>
  244 + <div class="footer-item-4-1-1">
  245 + <p>Follow us insocial media</p>
  246 + <span><a href=""></a></span>
  247 + <span><a href=""></a></span>
  248 + <span><a href=""></a></span>
  249 + <span><a href=""></a></span>
  250 + </div>
  251 + </div>
  252 + <div class="footer-item-4-2 col-xs-12 col-sm-3">
  253 + <div class="title-box">
  254 + <h3>NEWSLETTER SIGNUP</h3>
  255 + </div>
  256 + <div class="footer-item-4-2-1">
  257 + <p>Sign up for newsletter</p>
  258 + <input type="text">
  259 + </div>
  260 + </div>
  261 + <div class="footer-item-4-3 col-xs-12 col-sm-3">
  262 + <div class="title-box">
  263 + <h3>INFORMATION</h3>
  264 + </div>
  265 + <div class="footer-item-4-3-1">
  266 + <ul>
  267 + <li>About us</li>
  268 + <li>Privacy Policy</li>
  269 + <li>Terms & Condotions</li>
  270 + <li>Secure payment</li>
  271 + </ul>
  272 + </div>
  273 + </div>
  274 + <div class="footer-item-4-4 col-xs-12 col-sm-3">
  275 + <div class="title-box">
  276 + <h3>MY ACCOUNT</h3>
  277 + </div>
  278 + <div class="footer-item-4-4-1">
  279 + <ul>
  280 + <li>My account</li>
  281 + <li>Order History</li>
  282 + <li>Wish List</li>
  283 + <li>Newsletter</li>
  284 + </ul>
  285 + </div>
  286 + </div>
  287 + </div>
  288 + </div>
  289 + </div>
  290 + <div class="footer-item-5">
  291 + <div class="container"><p>Copyright ◎ Progressive, 2019</p></div>
  292 + </div>
  293 + </footer>
53 294 </div>
54 295 </div>
55   -</body>
56 296
  297 + <!-- /* Slick底部脚本库调用，建议调用在HTML文档底部 */ -->
  298 +<script type="text/javascript" src="js\jquery-3.3.1.min.js"></script>
  299 +<script type="text/javascript" src="js\bootstrap.min.js"></script>
  300 +<script type="text/javascript" src="js\slick.js"></script>
  301 +<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
  302 +<script type="text/javascript" src="js/slick.min.js"></script>
  303 +<script type="text/javascript">
  304 + // var slick = document.getElemetnById('slick');
  305 + $(function(){
  306 + var sm = window.matchMedia('(min-width: 768px)');
  307 + if(sm.matches){
  308 + $('#wrapper-1-1').slick({
  309 + accessibility:true,
  310 + autoplay: true,
  311 + arrow: true,
  312 + infinite: true,
  313 + arrow: true,
  314 + vertical: true,
  315 + speed: 500,
  316 + });
  317 + $('#wrapper-2-1').slick({
  318 + slidesToShow: 4,
  319 + slidesToScroll: 1,
  320 + autoplay: false,
  321 + dots: true
  322 + });
  323 + }
  324 + else{
  325 + $('#wrapper-1-1').slick({
  326 + accessibility:true,
  327 + autoplay: true,
  328 + arrow: true,
  329 + infinite: true,
  330 + arrow: true,
  331 + vertical: true,
  332 + speed: 500,
  333 + });
  334 + $('#wrapper-2-1').slick({
  335 + slidesToShow: 1,
  336 + slidesToScroll: 1,
  337 + autoplay: false,
  338 + dots: true
  339 + });
  340 + }
  341 + });
  342 +
  343 +</script>
  344 +</body>
57 345 </html>
\ No newline at end of file
... ...
Please register or login to post a comment