覃冠森 / training · Commits

Commit 96d0cb15bbed30108678360f5a0885930254540e

Authored by 钟艺
1 parent cdfbef3d

修改了list.html文件，优化index.html

Inline Side-by-side
Showing 2 changed files with 117 additions and 92 deletions
... ... @@ -7,16 +7,16 @@
7 7 <link rel="stylesheet" href="js/bootstrap.min.css">
8 8 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
9 9 <!-- /* Slick主题层叠样式表 */ -->
10   - <link rel="stylesheet" href="js/slick.css">
  10 + <link rel="stylesheet" href="slick/slick.css">
  11 + <link rel="stylesheet" href="slick/slick-theme.css">
11 12 <link rel="stylesheet" href="css/style.css">
12   - <link rel="stylesheet" href="js/slick-theme.css">
13 13 <title>首页</title>
14 14 </head>
15   -<body>
  15 +<body class="boxed index-img">
16 16 <div class="page index-page">
17 17 <div class="index-content">
18 18 <div class="index-top-box">
19   - <div class="container">
  19 + <div class="container-fluid">
20 20 <div class="row">
21 21 <div class="outside-nav collapse navbar-collapse" id="responsive-navbar">
22 22 <ul class="outside-nav-1 nav navbar-nav">
... ... @@ -31,12 +31,12 @@
31 31 </div>
32 32 <div class="col-xs-9 col-sm-5">
33 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>
  34 + <div class="index-top-lan nav language-box">
  35 + <a class="btn language-click" href="javascript:void(0)">Language</a>
  36 + <ul class="language-option">
  37 + <li class="active"><a href="#">English</a></li>
  38 + <li><a href="#">Francais</a></li>
  39 + <li><a href="#">Deutsch</a></li>
40 40 </ul>
41 41 </div>
42 42 </div>
... ... @@ -52,7 +52,7 @@
52 52 </div>
53 53 <!-- header内容 -->
54 54 <header>
55   - <div class="header-wrapper">
  55 + <div class="header-wrapper container-fluid">
56 56 <div class="outside-header collapse navbar-collapse" id="responsive-header">
57 57 <ul class="nav navbar-nav">
58 58 <li>
... ... @@ -66,7 +66,7 @@
66 66 </li>
67 67 </ul>
68 68 </div>
69   - <div class="container header-body">
  69 + <div class=" header-body">
70 70 <div class="row">
71 71 <div class="col-xs-6 logo-box">
72 72 <div class="logo"><img src="http://progressive.nikadevs.com/sites/all/themes/progressive/progressive_sub/logo.png" class="logo-img" alt="图片挂了">
... ... @@ -95,8 +95,8 @@
95 95 </div>
96 96 </div>
97 97
98   - <div class="wrapper-2">
99   - <div class="container">
  98 + <div class="wrapper-2 container-fluid">
  99 + <div class="">
100 100 <div class="slick" id="wrapper-2-1">
101 101 <div>
102 102 <div class="wrapper-2-1">
... ... @@ -160,7 +160,7 @@
160 160 </div>
161 161
162 162 <div class="index-content-1">
163   - <div class="container">
  163 + <div class="container-fluid">
164 164 <div class="pub_title">
165 165 <h3>Features</h3>
166 166 </div>
... ... @@ -196,12 +196,12 @@
196 196 </div>
197 197 </div>
198 198 </div>
199   - <div class="index-content-2" style="background-image: url('./img/band-1.jpg');">
200   - <div class="content-2-mar">
  199 + <div class="index-content-2" container-fluid>
  200 + <div class="container-fluid">
201 201 <div class="row">
202 202 <div class="col-xs-12 col-sm-3">
203 203 <div class="content-2-1 shop-box">
204   - <div class="container">
  204 + <div class="">
205 205 <div class="title">
206 206 <a href="#">First Package</a>
207 207 </div>
... ... @@ -219,8 +219,8 @@
219 219 <li class="active">Styled elements</li>
220 220 <li>Easy Setup</li>
221 221 </ul>
222   - <div class="bottom-box" style="background-color: rgb(255, 242, 242);">
223   - <div class="container">
  222 + <div class="bottom-box">
  223 + <div class="">
224 224 <div class="bottom-body">
225 225 <a href="#">Read More ></a>
226 226 <button type="submit">Buy Now</button>
... ... @@ -231,7 +231,7 @@
231 231 </div>
232 232 <div class="col-xs-12 col-sm-3">
233 233 <div class="content-2-2 shop-box">
234   - <div class="container">
  234 + <div class="">
235 235 <div class="title">
236 236 <a href="#">Second Package</a>
237 237 </div>
... ... @@ -250,7 +250,7 @@
250 250 <li>Easy Setup</li>
251 251 </ul>
252 252 <div class="bottom-box">
253   - <div class="container">
  253 + <div class="">
254 254 <div class="bottom-body">
255 255 <a href="#">Read More ></a>
256 256 <button type="submit">Buy Now</button>
... ... @@ -260,8 +260,8 @@
260 260 </div>
261 261 </div>
262 262 <div class="col-xs-12 col-sm-3">
263   - <div class="content-2-3 shop-box">
264   - <div class="container">
  263 + <div class="content-2-3 shop-box">
  264 + <div class="">
265 265 <div class="title">
266 266 <a href="#">First Package</a>
267 267 </div>
... ... @@ -280,7 +280,7 @@
280 280 <li>Easy Setup</li>
281 281 </ul>
282 282 <div class="bottom-box">
283   - <div class="container">
  283 + <div class="">
284 284 <div class="bottom-body">
285 285 <a href="#">Read More ></a>
286 286 <button type="submit">Buy Now</button>
... ... @@ -290,8 +290,8 @@
290 290 </div>
291 291 </div>
292 292 <div class="col-xs-12 col-sm-3">
293   - <div class="content-2-4 shop-box">
294   - <div class="container">
  293 + <div class="content-2-4 shop-box">
  294 + <div class="">
295 295 <div class="title">
296 296 <a href="#">First Package</a>
297 297 </div>
... ... @@ -310,7 +310,7 @@
310 310 <li>Easy Setup</li>
311 311 </ul>
312 312 <div class="bottom-box">
313   - <div class="container">
  313 + <div class="">
314 314 <div class="bottom-body">
315 315 <a href="#">Read More ></a>
316 316 <button type="submit">Buy Now</button>
... ... @@ -322,8 +322,8 @@
322 322 </div>
323 323 </div>
324 324 </div>
325   - <div class="index-content-3">
326   - <div class="container">
  325 + <div class="index-content-3 container-fluid">
  326 + <div class="">
327 327 <div class="content-3-1">
328 328 <div class="content-box" style="text-align: center;">
329 329 <p><span style="font-size: 16px">Welcome to our site. There are many variations alteration in some form, by injected humour, or randomised words which don't look even slightly believable. Donec pharetra, lectus nec dignissim pharetra quis libero.</span></p>
... ... @@ -333,55 +333,71 @@
333 333 </div>
334 334 </div>
335 335 </div>
336   - <div class="index-content-4" style="background-image: url(./img/band-12.jpg);">
  336 + <div class="index-content-4 container-fluid" style="background-image: url(./img/band-12.jpg);">
337 337 <div class="content-4-1">
338 338 <div class="wrapper-3">
339 339 <div class="slick" id="wrapper-3-1">
340 340 <div>
341 341 <a href="">
342 342 <div class="content-4-hover" style="background-image: url('img/slide-1.jpg')">
343   - </div>
  343 + <h4>Placeat accusamus quia quos</h4>
  344 + <p>Graphic design/Uberoart</p>
  345 + </div>
344 346 </a>
345 347 </div>
346 348 <div>
347   - <a href="">
348   - <div class="content-4-hover" style="background-image: url('img/slide-2.jpg')">
349   - </div>
350   - </a>
  349 + <a href="">
  350 + <div class="content-4-hover" style="background-image: url('img/slide-2.jpg')">
  351 + <h4>Dignissmos suscipit magni vitae</h4>
  352 + <p>Graphic design/Uberoart</p>
  353 + </div>
  354 + </a>
351 355 </div>
352 356 <div>
353   - <a href="">
354   - <div class="content-4-hover" style="background-image: url('img/slide-3.jpg')">
355   - </div>
356   - </a>
  357 + <a href="">
  358 + <div class="content-4-hover" style="background-image: url('img/slide-3.jpg')">
  359 + <h4>Eius quo sed vero bladitiis dignissimos</h4>
  360 + <p>Graphic design/Uberoart</p>
  361 + </div>
  362 + </a>
357 363 </div>
358 364 <div>
359 365 <a href="">
360 366 <div class="content-4-hover" style="background-image: url('img/slide-4.jpg')">
  367 + <h4>sunt maiores libero odio in</h4>
  368 + <p>Graphic design/Uberoart</p>
361 369 </div>
362 370 </a>
363 371 </div>
364 372 <div>
365 373 <a href="">
366 374 <div class="content-4-hover" style="background-image: url('img/slide-5.jpg')">
  375 + <h4>Iusto accusantium sapiente quam</h4>
  376 + <p>Graphic design/Uberoart</p>
367 377 </div>
368 378 </a>
369 379 </div>
370 380 <div>
371 381 <a href="">
372 382 <div class="content-4-hover" style="background-image: url('img/slide-1.jpg')">
  383 + <h4>Sunt maiores libero doio in totam illunm</h4>
  384 + <p>Graphic design/Uberoart</p>
373 385 </div>
374 386 </a>
375 387 </div>
376 388 <div>
377 389 <a href="">
378 390 <div class="content-4-hover" style="background-image: url('img/slide-2.jpg')">
  391 + <h4>Provident distinctio tempora corporis</h4>
  392 + <p>Graphic design/Uberoart</p>
379 393 </div>
380 394 </a>
381 395 </div>
382 396 <div>
383 397 <a href="">
384 398 <div class="content-4-hover" style="background-image: url('img/slide-3.jpg')">
  399 + <h4>Temporibus eligendi fugiat corrupt</h4>
  400 + <p>Graphic design/Uberoart</p>
385 401 </div>
386 402 </a>
387 403 </div>
... ... @@ -389,36 +405,36 @@
389 405 </div>
390 406 </div>
391 407 </div>
392   - <div class="index-content-5">
393   - <div class="content-5-1 container">
  408 + <div class="index-content-5 container-fluid">
  409 + <div class="content-5-1">
394 410 <div class="row">
395 411 <div>
396 412 <div class="col-xs-12 col-sm-6">
397 413 <div class="pub_title">
398 414 <h3>Our partners</h3>
399 415 </div>
400   - <ul class="row content-5-icon">
401   - <li>
402   - <a href="" class="make">
403   - <img src="img/make-2.png" alt="img/make-2.png">
404   - </a>
405   - </li>
406   - <li>
407   - <a href="" class="make">
408   - <img src="img/make-3.png" alt="img/make-3.png">
409   - </a>
410   - </li>
411   - <li>
412   - <a href="" class="make">
413   - <img src="img/make-4.png" alt="img/make-4.png">
414   - </a>
415   - </li>
416   - </ul>
417   - <div class="content-5-p">
418   - <p>Duis bibendum pulvinar laoreet. Ut eu arcu sit amet elit placerat pharetra sit amet a tortor. Fusce vestibulum auctor rhoncus. Nullam rhoncus, tellus a congue elementum, leo ipsum tincidunt justo, ut condimentum velit eros et lectus. Phasellus ultrices rhoncus vehicula.</p>
419   - <p>Integer ultricies semper massa non condimentum. Phasellus eu ipsum justo. Nullam non pulvinar purus. Ut ante ipsum, venenatis at tristique quis, congue vitae felis. Aliquam cursus diam in massa dapibus auctor. In volutpat, risus non egestas luctus, justo tellus laoreet justo.</p>
420   - </div>
421   - </div>
  416 + <div class="row col-xs-12 content-5-icon">
  417 + <div class="col-xs-12 col-sm-4">
  418 + <a href="" class="make">
  419 + <img src="img/make-2.png" alt="img/make-2.png">
  420 + </a>
  421 + </div>
  422 + <div class="col-xs-12 col-sm-4">
  423 + <a href="" class="make">
  424 + <img src="img/make-3.png" alt="img/make-3.png">
  425 + </a>
  426 + </div>
  427 + <div class="col-xs-12 col-sm-4">
  428 + <a href="" class="make">
  429 + <img src="img/make-4.png" alt="img/make-4.png">
  430 + </a>
  431 + </div>
  432 + </div>
  433 + <div class="col-xs-12 content-5-p">
  434 + <p>Duis bibendum pulvinar laoreet. Ut eu arcu sit amet elit placerat pharetra sit amet a tortor. Fusce vestibulum auctor rhoncus. Nullam rhoncus, tellus a congue elementum, leo ipsum tincidunt justo, ut condimentum velit eros et lectus. Phasellus ultrices rhoncus vehicula.</p>
  435 + <p>Integer ultricies semper massa non condimentum. Phasellus eu ipsum justo. Nullam non pulvinar purus. Ut ante ipsum, venenatis at tristique quis, congue vitae felis. Aliquam cursus diam in massa dapibus auctor. In volutpat, risus non egestas luctus, justo tellus laoreet justo.</p>
  436 + </div>
  437 + </div>
422 438 <div class="col-xs-12 col-sm-6">
423 439 <div class="pub_title">
424 440 <h3>Latest Posts</h3>
... ... @@ -456,7 +472,7 @@
456 472 </div>
457 473 <footer class="footer">
458 474 <div class="footer-item-4">
459   - <div class="container">
  475 + <div class="">
460 476 <div class="row">
461 477 <div class="footer-item-4-1 col-xs-12 col-sm-3">
462 478 <div class="title-box">
... ... @@ -509,22 +525,26 @@
509 525 </div>
510 526 </div>
511 527 <div class="footer-item-5">
512   - <div class="container"><p>Copyright ◎ Progressive, 2019</p></div>
  528 + <div class=""><p>Copyright ◎ Progressive, 2019</p></div>
513 529 </div>
514 530 </footer>
515 531 </div>
516 532 </div>
517 533
518 534 <!-- /* Slick底部脚本库调用，建议调用在HTML文档底部 */ -->
  535 +<script type="text/javascript" src="js/a-click.js"></script>
519 536 <script type="text/javascript" src="js\jquery-3.3.1.min.js"></script>
520 537 <script type="text/javascript" src="js\bootstrap.min.js"></script>
521   -<script type="text/javascript" src="js\slick.js"></script>
  538 +<script type="text/javascript" src="slick\slick.js"></script>
522 539 <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
523   -<script type="text/javascript" src="js/slick.min.js"></script>
524   -<script type="text/javascript">
  540 +<script type="text/javascript" src="slick/slick.min.js"></script>
  541 +<script type="text/javascript" src="js/slick-4-1.js"></script>
  542 +
  543 +<script>
525 544 // var slick = document.getElemetnById('slick');
526 545 $(function(){
527 546 var sm = window.matchMedia('(min-width: 768px)');
  547 + var vWidth = $(window).width();
528 548 if(sm.matches){
529 549 $('#wrapper-1-1').slick({
530 550 accessibility:true,
... ... @@ -554,9 +574,9 @@
554 574 $(window).scroll(function(){
555 575 var scroH = $(this).scrollTop();
556 576 if(scroH >= navH)
557   - $('.header-wrapper').css({'position':'fixed','top':'0','z-index':'200','background-color':'white','width':'70%'});
  577 + $('.header-wrapper').css({'position':'fixed','top':'0','z-index':'10','background-color':'white','width':'1450px'});
558 578 else if(scroH < navH)
559   - $('.header-wrapper').css({'position':'relative','width':'auto'});
  579 + $('.header-wrapper').css({'position':'relative','width':'100%'});
560 580 });
561 581 }
562 582 else{
... ...
... ... @@ -17,26 +17,31 @@
17 17 <div class="page">
18 18 <button type="button" class="open navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar"><i class="fas fa-bars"></i>
19 19 </button>
20   - <div class="outside-nav collapse navbar-collapse" id="responsive-navbar">
21   - <ul class="outside-nav-1 nav navbar-nav">
22   - <li>
23   - <a href="#">Compare List</a>
24   - <a href="#">My Wishlist</a>
25   - <a href="#">My Cart</a>
26   - <a href="#">Checkout</a>
27   - <a href="#">Log In</a>
28   - </li>
29   - </ul>
30   - </div>
31   - <div class="top-box nav">
32   - <div class="top-box-nav dropdown">
33   - <button type="button" class="btn dropdown-toggle lang-1" id="dropdownMenu1" data-toggle="dropdown">Language</button>
34   - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
35   - <li role="presentation"><a href="#" role="presentation" tabindex="-1">English</a></li>
36   - <li role="presentation"><a href="#" role="presentation" tabindex="-1">Francais</a></li>
37   - <li role="presentation"><a href="#" role="presentation" tabindex="-1">Deutsch</a></li>
  20 + <div class="container">
  21 + <div class="row">
  22 + <div class="outside-nav collapse navbar-collapse" id="responsive-navbar">
  23 + <ul class="outside-nav-1 nav navbar-nav">
  24 + <li>
  25 + <a href="#">Compare List</a>
  26 + <a href="#">My Wishlist</a>
  27 + <a href="#">My Cart</a>
  28 + <a href="#">Checkout</a>
  29 + <a href="#">Log In</a>
  30 + </li>
38 31 </ul>
  32 + </div>
  33 + <div class="top-box nav">
  34 + <div class="index-top-lan nav language-box">
  35 + <a class="btn language-click" href="javascript:void(0)">Language</a>
  36 + <ul class="language-option">
  37 + <li class="active"><a href="#">English</a></li>
  38 + <li><a href="#">Francais</a></li>
  39 + <li><a href="#">Deutsch</a></li>
  40 + </ul>
  41 + </div>
  42 + </div>
39 43 </div>
  44 +
40 45 </div>
41 46
42 47 <div class="header-wrapper">
... ... @@ -103,7 +108,7 @@
103 108
104 109 <div class="page-art-2">
105 110 <h3>Excepteur sint occaecat cupidatat</h3>
106   - <img src="" alt="图片挂了">
  111 + <img src="img/portfolio-13.jpg" alt="图片挂了">
107 112 <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
108 113 <div class="page-art-footer">
109 114 <p>Admin, 15.09.2014</p>
... ... @@ -134,7 +139,7 @@
134 139
135 140 <div class="page-art-5">
136 141 <h3>Lorem Ipsum</h3>
137   - <img src="" alt="图片挂了">
  142 + <img src="img/portfolio-8.jpg" alt="图片挂了">
138 143 <div class="page-art-footer">
139 144 <p>Admin, 15.09.2014</p>
140 145 <p>Posted in Sports, Ubercart</p>
... ... @@ -143,7 +148,7 @@
143 148
144 149 <div class="page-art-6">
145 150 <h3>Lorem Ipsum</h3>
146   - <img src="" alt="图片挂了">
  151 + <img src="img/portfolio-14.jpg" alt="图片挂了">
147 152 <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
148 153 <div class="page-art-footer">
149 154 <p>Admin, 15.09.2014</p>
... ...
Please register or login to post a comment