• 售前

  • 售后

热门帖子
入门百科

Web前端期末大作业---汽车主题网页筹划002(HTML+CSS+JavaScript+)实现

[复制链接]
咑啲呿迗嘡迗qc 显示全部楼层 发表于 2022-1-16 17:03:29 |阅读模式 打印 上一主题 下一主题
邻近期末, 你还在为HTML网页筹划结课作业,老师的作业要求感到头大?网页要求的总数目太多?HTML网页作业无从动手?没有符合的模板?等等一系列题目。你想要办理的题目,在这里常见网页筹划作业题材有 个人、 美食、 公司、体育、 扮装品、 物流、 环保、 册本、 婚纱、 军事、 游戏、 节日、 戒烟、 影戏、 照相 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 旅店、 舞蹈、 动漫、 明星、 服装、  文化、 故乡、 鲜花、 礼物、 汽车、 其他等网页筹划标题, A+水平作业, 可满意大门生网页大作业网页筹划需求都能满意你的需求。原始HTML+CSS+JS页面筹划, web大门生网页筹划作业源码,这是一个不错的汽车主题网页制作,画面夺目,非常得当初学者学习使用。把英文换成中文就可以当做前端大作业啦【文末免费获取
    视频演示: 大门生Web前端期末大作业--相应式玉人健身锻练瑜伽馆网页筹划.mp4https://www.bilibili.com/video/BV1sR4y1t749?spm_id_from=333.999.0.0https://www.bilibili.com/video/BV1sR4y1t749?spm_id_from=333.999.0.0https://www.bilibili.com/video/BV1sR4y1t749?spm_id_from=333.999.0.0

   常见网页筹划作业题材有 个人、 美食、 公司、体育、 扮装品、 物流、 环保、 册本、 婚纱、 军事、 游戏、 节日、 戒烟、 影戏、 照相 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 旅店、 舞蹈、 动漫、 明星、 服装、  文化、 故乡、 鲜花、 礼物、 汽车、 其他等网页筹划标题, A+水平作业, 可满意大门生网页大作业网页筹划需求都能满意你的需求。原始HTML+CSS+JS页面筹划, web大门生网页筹划作业源码,这是一个不错的相应式玉人健身锻练瑜伽馆网页筹划制作,画面夺目,非常得当初学者学习使用。
    网页实现截图:

  
 
 
 
 

  重要源码展示:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Home</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="keywords" content="Auto Portal Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
  8. Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
  9. <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  10. <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
  11. <link href="css/style.css" rel='stylesheet' type='text/css' />
  12. <script src="js/jquery.min.js"></script>
  13. <!---- start-smoth-scrolling---->
  14. <script type="text/javascript" src="js/move-top.js"></script>
  15. <script type="text/javascript" src="js/easing.js"></script>
  16. <script type="text/javascript">
  17.                         jQuery(document).ready(function($) {
  18.                                 $(".scroll").click(function(event){               
  19.                                         event.preventDefault();
  20.                                         $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
  21.                                 });
  22.                         });
  23.                 </script>
  24. <!--start-smoth-scrolling-->
  25. <!--script-->
  26.         <script src="js/modernizr.custom.97074.js"></script>
  27. <script src="js/jquery.chocolat.js"></script>
  28.                 <link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">
  29.                 <!--light-box-files -->
  30.                 <script type="text/javascript" charset="utf-8">
  31.                 $(function() {
  32.                         $('.gallery a').Chocolat();
  33.                 });
  34.                 </script>
  35.                 <script type="text/javascript" src="js/jquery.hoverdir.js"></script>
  36. </head>
  37. <body>
  38.         <!--start-banner-->
  39.         <div class="banner">
  40.                 <div class="container">
  41.                         <div class="header" id="home">
  42.                                         <div class="head">
  43.                                                 <div class="logo">
  44.                                                         <a href="index.html"><img src="images/logo.png" alt="" /></a>
  45.                                                 </div>
  46.                                                 <div class="navigation">
  47.                                                          
  48.                                                         <ul class="navig">
  49.                                                                 <li><a href="index.html"  class="active hvr-bounce-to-bottom scroll">Home</a></li>
  50.                                                                 <li><a href="#about" class="hvr-bounce-to-bottom scroll">About</a></li>
  51.                                                                 <li><a href="#gallery" class="hvr-bounce-to-bottom scroll">Gallery</a></li>
  52.                                                                 <li><a href="#typo" class="hvr-bounce-to-bottom scroll">Typo</a></li>
  53.                                                                 <li><a href="#news" class="hvr-bounce-to-bottom scroll">News</a></li>
  54.                                                                 <li><a href="#contact" class="hvr-bounce-to-bottom scroll">Contact</a></li>
  55.                                                         </ul>
  56.                                                 </div>
  57.                                                 <div class="clearfix"></div>
  58.                                         </div>
  59.                         </div>       
  60.                         <div class="banner-bottom">
  61.                                 <h1>Aliquam malesuada ipsum nec odio</h1>
  62.                                 <p>Suspendisse condimentum quam sed laoreet malesuada</p>
  63.                         </div>
  64.                         <div class="bnr-btm">
  65.                                 <a href="#auto" class="scroll"><img src="images/d-arw.png" alt=""></a>
  66.                         </div>
  67.                 </div>       
  68.         </div>
  69.         <!--end-banner-->
  70.         <!-- script-for-menu -->
  71.                 <script>
  72.                         $("span.menu").click(function(){
  73.                                 $(" ul.navig").slideToggle("slow" , function(){
  74.                                 });
  75.                         });
  76.                 </script>
  77.         <!--script-for-menu-->
  78.         <!--auto-starts-->
  79.         <div class="auto" id="auto">
  80.                 <div class="auto-1">
  81.                         <div class="col-md-4 auto-left">
  82.                                 <img src="images/a-1.jpg" alt="">
  83.                                 <div class="tool">
  84.                                         <a class="tooltips" href="#">
  85.                                         <span></a>
  86.                                 </div>
  87.                         </div>
  88.                         <div class="col-md-4 auto-left auto-middle">
  89.                                 <h2>Pellentesque</h2>
  90.                                 <p>Integer congue tristique</p>
  91.                         </div>
  92.                         <div class="col-md-4 auto-left auto-right">
  93.                                 <img src="images/a-2.jpg" alt="">
  94.                                 <div class="tool-1">
  95.                                         <a class="tooltips-1" href="#">
  96.                                         <span></a>
  97.                                 </div>
  98.                         </div>
  99.                         <div class="clearfix"></div>       
  100.                 </div>
  101.                 <div class="auto-1">
  102.                         <div class="col-md-4 auto-left auto-middle">
  103.                                 <h3>Consectetur</h3>
  104.                                 <p>Integer congue tristique</p>
  105.                         </div>
  106.                         <div class="col-md-4 auto-left">
  107.                                 <img src="images/a-3.jpg" alt="">
  108.                                 <div class="tool">
  109.                                         <a class="tooltips" href="#">
  110.                                         <span></a>
  111.                                 </div>
  112.                         </div>
  113.                         <div class="col-md-4 auto-left auto-middle">
  114.                                 <h3>Suspendisse</h3>
  115.                                 <p>Integer congue tristique</p>
  116.                         </div>
  117.                         <div class="clearfix"></div>       
  118.                 </div>
  119.         </div>
  120.         <!--auto-end-->
  121.         <!--about-starts-->
  122.         <div class="about" id="about">
  123.                 <div class="container">
  124.                         <div class="about-top heading">
  125.                                 <h3>About</h3>
  126.                         </div>
  127.                         <div class="about-bottom">
  128.                                 <div class="col-md-6 about-left">
  129.                                         <h4>Integer facilisis auctor ante. Praesent pellentesque, magna eu egestas varius, ligula ipsum pulvinar mauris, quis sodales urna enim eget enim. Donec sed gravida eros, et auctor enim.</h4>
  130.                                         <p>Praesent pulvinar libero at lectus vulputate blandit. Maecenas mauris dolor, commodo id congue nec, laoreet at turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nec bibendum arcu. Morbi pretium eleifend sapien et vulputate.</p>
  131.                                 </div>       
  132.                                 <div class="col-md-6 about-right">
  133.                                         <div class="abt-one">
  134.                                                 <div class="abt-left">
  135.                                                        
  136.                                                 </div>       
  137.                                                 <div class="abt-right">
  138.                                                         <p>Fusce vulputate vel nisl at condimentum. Etiam efficitur est eu mauris mattis, vestibulum semper libero tempus. Quisque at augue venenatis, varius est ut, tristique justo.</p>
  139.                                                 </div>       
  140.                                                 <div class="clearfix"></div>       
  141.                                         </div>
  142.                                         <div class="abt-one">
  143.                                                 <div class="abt-left">
  144.                                                        
  145.                                                 </div>       
  146.                                                 <div class="abt-right">
  147.                                                         <p>Fusce vulputate vel nisl at condimentum. Etiam efficitur est eu mauris mattis, vestibulum semper libero tempus. Quisque at augue venenatis, varius est ut, tristique justo.</p>
  148.                                                 </div>       
  149.                                                 <div class="clearfix"></div>       
  150.                                         </div>                                       
  151.                                 </div>       
  152.                                 <div class="clearfix"></div>       
  153.                         </div>
  154.                 </div>
  155.         </div>       
  156.         <!--about-end-->
  157.         <!--people-starts-->
  158.         <div class="people">
  159.                 <div class="container">
  160.                         <div class="people-top heading">
  161.                                 <h3>What People Say?</h3>
  162.                         </div>
  163.                         <div class="people-bottom">
  164.                                 <div class="col-md-6 people-left">
  165.                                         <div class="p-left">
  166.                                                 <img src="images/p-1.png" alt="" />
  167.                                         </div>       
  168.                                         <div class="p-right">
  169.                                                 <h4>Quisque gravida pharetra vehicula</h4>
  170.                                                 <p>Fusce vulputate vel nisl at condimentum. Etiam efficitur est eu mauris mattis, vestibulum semper libero tempus. Quisque at augue venenatis, varius est ut, tristique justo. Duis in nibh quis leo commodo auctor.</p>
  171.                                         </div>       
  172.                                         <div class="clearfix"></div>       
  173.                                 </div>       
  174.                                 <div class="col-md-6 people-left">
  175.                                         <div class="p-left">
  176.                                                 <img src="images/p-2.png" alt="" />
  177.                                         </div>       
  178.                                         <div class="p-right">
  179.                                                 <h4>Quisque gravida pharetra vehicula</h4>
  180.                                                 <p>Fusce vulputate vel nisl at condimentum. Etiam efficitur est eu mauris mattis, vestibulum semper libero tempus. Quisque at augue venenatis, varius est ut, tristique justo. Duis in nibh quis leo commodo auctor.</p>
  181.                                         </div>       
  182.                                         <div class="clearfix"></div>       
  183.                                 </div>       
  184.                                 <div class="clearfix"></div>       
  185.                         </div>
  186.                 </div>
  187.         </div>       
  188.         <!--people-end-->
  189.         <!--choose-starts-->
  190.         <div class="choose">
  191.                 <div class="container">
  192.                         <div class="choose-top heading">
  193.                                 <h3>Why Choose Us</h3>
  194.                         </div>
  195.                         <div class="choose-bottom">
  196.                                 <div class="choose-1">
  197.                                         <div class="col-md-6 choose-left">
  198.                                                 <div class="c-left">
  199.                                                         <h4>Fusce vulputate vel nisl at condimentum</h4>
  200.                                                         <p>Quisque at augue venenatis, varius est ut, tristique justo. Duis in nibh quis leo commodo auctor. Cras dictum quam eu risus dignissim tincidunt.</p>
  201.                                                 </div>
  202.                                                 <div class="c-right">
  203.                                                        
  204.                                                 </div>
  205.                                                 <div class="clearfix"></div>
  206.                                         </div>
  207.                                         <div class="col-md-6 choose-left">
  208.                                                 <div class="c-left">
  209.                                                         <h4>Fusce vulputate vel nisl at condimentum</h4>
  210.                                                         <p>Quisque at augue venenatis, varius est ut, tristique justo. Duis in nibh quis leo commodo auctor. Cras dictum quam eu risus dignissim tincidunt.</p>
  211.                                                 </div>
  212.                                                 <div class="c-right">
  213.                                                        
  214.                                                 </div>
  215.                                                 <div class="clearfix"></div>
  216.                                         </div>
  217.                                         <div class="clearfix"></div>
  218.                                 </div>
  219.                                 <div class="choose-1">
  220.                                         <div class="col-md-6 choose-left">
  221.                                                 <div class="c-left">
  222.                                                         <h4>Fusce vulputate vel nisl at condimentum</h4>
  223.                                                         <p>Quisque at augue venenatis, varius est ut, tristique justo. Duis in nibh quis leo commodo auctor. Cras dictum quam eu risus dignissim tincidunt.</p>
  224.                                                 </div>
  225.                                                 <div class="c-right">
  226.                                                        
  227.                                                 </div>
  228.                                                 <div class="clearfix"></div>
  229.                                         </div>
  230.                                         <div class="col-md-6 choose-left">
  231.                                                 <div class="c-left">
  232.                                                         <h4>Fusce vulputate vel nisl at condimentum</h4>
  233.                                                         <p>Quisque at augue venenatis, varius est ut, tristique justo. Duis in nibh quis leo commodo auctor. Cras dictum quam eu risus dignissim tincidunt.</p>
  234.                                                 </div>
  235.                                                 <div class="c-right">
  236.                                                        
  237.                                                 </div>
  238.                                                 <div class="clearfix"></div>
  239.                                         </div>
  240.                                         <div class="clearfix"></div>
  241.                                 </div>
  242.                                 <div class="choose-1">
  243.                                         <div class="col-md-6 choose-left">
  244.                                                 <div class="c-left">
  245.                                                         <h4>Fusce vulputate vel nisl at condimentum</h4>
  246.                                                         <p>Quisque at augue venenatis, varius est ut, tristique justo. Duis in nibh quis leo commodo auctor. Cras dictum quam eu risus dignissim tincidunt.</p>
  247.                                                 </div>
  248.                                                 <div class="c-right">
  249.                                                        
  250.                                                 </div>
  251.                                                 <div class="clearfix"></div>
  252.                                         </div>
  253.                                         <div class="col-md-6 choose-left">
  254.                                                 <div class="c-left">
  255.                                                         <h4>Fusce vulputate vel nisl at condimentum</h4>
  256.                                                         <p>Quisque at augue venenatis, varius est ut, tristique justo. Duis in nibh quis leo commodo auctor. Cras dictum quam eu risus dignissim tincidunt.</p>
  257.                                                 </div>
  258.                                                 <div class="c-right">
  259.                                                        
  260.                                                 </div>
  261.                                                 <div class="clearfix"></div>
  262.                                         </div>
  263.                                         <div class="clearfix"></div>
  264.                                 </div>
  265.                         </div>
  266.                 </div>
  267.         </div>       
  268.         <!--choose-end-->
  269.         <!--typo-starts-->
  270.         <div class="typo" id="typo">
  271.                 <div class="container">
  272.                         <div class="typo-top heading">
  273.                                 <h3>Typo</h3>
  274.                         </div>
  275.                         <div class="typo-bottom">
  276.                                 <div class="progress-bars">
  277.                                         <h3 class="ghj">Progress Bars</h3>
  278.                                                 <div class="tab-content">
  279.                                                         <div class="tab-pane active" id="domprogress">
  280.                                                                 <div class="progress">   
  281.                                                                         <div class="progress-bar progress-bar-primary" style="width: 20%"></div>
  282.                                                                 </div>
  283.                                                                 <p>Info with <code>progress-bar-info class.</p>
  284.                                                                 <div class="progress">   
  285.                                                                         <div class="progress-bar progress-bar-info" style="width: 60%"></div>
  286.                                                                 </div>
  287.                                                                 <p>Success with <code>progress-bar-success class.</p>
  288.                                                                 <div class="progress">
  289.                                                                         <div class="progress-bar progress-bar-success" style="width: 30%"></div>
  290.                                                                 </div>
  291.                                                                 <p>Warning with <code>progress-bar-warning class.</p>
  292.                                                                 <div class="progress">
  293.                                                                         <div class="progress-bar progress-bar-warning" style="width: 70%"></div>
  294.                                                                 </div>
  295.                                                                 <p>Danger with <code>progress-bar-danger class.</p>
  296.                                                                 <div class="progress">
  297.                                                                         <div class="progress-bar progress-bar-danger" style="width: 50%"></div>
  298.                                                                 </div>
  299.                                                                 <p>Inverse with <code>progress-bar-inverse class.</p>
  300.                                                                 <div class="progress">
  301.                                                                         <div class="progress-bar progress-bar-inverse" style="width: 40%"></div>
  302.                                                                 </div>
  303.                                                                 <p>Inverse with <code>progress-bar-inverse class.</p>
  304.                                                                 <div class="progress">
  305.                                                                         <div class="progress-bar progress-bar-success" style="width: 35%">35% Complete (success)</div>
  306.                                                                         <div class="progress-bar progress-bar-warning" style="width: 20%">20% Complete (warning)</div>
  307.                                                                         <div class="progress-bar progress-bar-danger" style="width: 10%">10% Complete (danger)</div>
  308.                                                                 </div>
  309.                                                         </div>
  310.                                                 </div>
  311.                                 </div>
  312.                         </div>
  313.                         <div class="pagenatin">
  314.                                 <h3 class="ghj">Pagination</h3>
  315.                                         <div class="col-md-6">
  316.                                           <nav>
  317.                                           <ul class="pagination pagination-lg">
  318.                                                 <li><a href="#" aria-label="Previous">«</a></li>
  319.                                                 <li><a href="#">1</a></li>
  320.                                                 <li><a href="#">2</a></li>
  321.                                                 <li><a href="#">3</a></li>
  322.                                                 <li><a href="#">4</a></li>
  323.                                                 <li><a href="#">5</a></li>
  324.                                                 <li><a href="#" aria-label="Next">»</a></li>
  325.                                           </ul>
  326.                                           </nav>
  327.                                           <nav>
  328.                                           <ul class="pagination">
  329.                                                 <li><a href="#" aria-label="Previous">«</a></li>
  330.                                                 <li><a href="#">1</a></li>
  331.                                                 <li><a href="#">2</a></li>
  332.                                                 <li><a href="#">3</a></li>
  333.                                                 <li><a href="#">4</a></li>
  334.                                                 <li><a href="#">5</a></li>
  335.                                                 <li><a href="#" aria-label="Next">»</a></li>
  336.                                           </ul>
  337.                                           </nav>
  338.                                           <nav>
  339.                                                 <ul class="pagination pagination-sm">
  340.                                                         <li><a href="#" aria-label="Previous">«</a></li>
  341.                                                         <li><a href="#">1</a></li>
  342.                                                         <li><a href="#">2</a></li>
  343.                                                         <li><a href="#">3</a></li>
  344.                                                         <li><a href="#">4</a></li>
  345.                                                         <li><a href="#">5</a></li>
  346.                                                         <li><a href="#" aria-label="Next">»</a></li>
  347.                                                 </ul>
  348.                                           </nav>
  349.                                         </div>
  350.                                         <div class="col-md-6">
  351.                                                 <nav>
  352.                                                         <ul class="pagination pagination-lg">
  353.                                                                         <li class="disabled"><a href="#"><i class="fa fa-angle-left">«</i></a></li>
  354.                                                                         <li class="active"><a href="#">1</a></li>
  355.                                                                         <li><a href="#">2</a></li>
  356.                                                                         <li><a href="#">3</a></li>
  357.                                                                         <li><a href="#">4</a></li>
  358.                                                                         <li><a href="#">5</a></li>
  359.                                                                         <li><a href="#"><i class="fa fa-angle-right">»</i></a></li>
  360.                                                         </ul>
  361.                                                 </nav>
  362.                                                 <nav>
  363.                                                   <ul class="pagination">
  364.                                                         <li class="disabled"><a href="#" aria-label="Previous">«</a></li>
  365.                                                         <li class="active"><a href="#">1 (current)</a></li>
  366.                                                         <li><a href="#">2</a></li>
  367.                                                         <li><a href="#">3</a></li>
  368.                                                         <li><a href="#">4</a></li>
  369.                                                         <li><a href="#">5</a></li>
  370.                                                         <li><a href="#" aria-label="Next">»</a></li>
  371.                                                  </ul>
  372.                                             </nav>
  373.                                             <nav>
  374.                                                          <ul class="pagination pagination-sm">
  375.                                                                 <li class="disabled"><a href="#"><i class="fa fa-angle-left"></i>«</a></li>
  376.                                                                 <li class="active"><a href="#">1</a></li>
  377.                                                                 <li><a href="#">2</a></li>
  378.                                                                 <li><a href="#">3</a></li>
  379.                                                                 <li><a href="#">4</a></li>
  380.                                                                 <li><a href="#">5</a></li>
  381.                                                                 <li><a href="#"><i class="fa fa-angle-right"></i>»</a></li>
  382.                                                         </ul>
  383.                                                 </nav>
  384.                                         </div>
  385.                                         <div class="clearfix"> </div>
  386.                         </div>
  387.                         <div class="appearance">
  388.                          <h3 class="ghj">Badges</h3>
  389.                                 <div class="col-md-6">
  390.                                         <p>Add modifier classes to change the appearance of a badge.</p>
  391.                                           <table class="table table-bordered">
  392.                                                 <thead>
  393.                                                         <tr>
  394.                                                                 <th width="50%">Classes</th>
  395.                                                                 <th width="50%">Badges</th>
  396.                                                         </tr>
  397.                                                 </thead>
  398.                                                 <tbody>
  399.                                                         <tr>
  400.                                                                 <td>No modifiers</td>
  401.                                                                 <td>42</td>
  402.                                                         </tr>
  403.                                                         <tr>
  404.                                                                 <td><code>.badge-primary</td>
  405.                                                                 <td>1</td>
  406.                                                         </tr>
  407.                                                         <tr>
  408.                                                                 <td><code>.badge-success</td>
  409.                                                                 <td>22</td>
  410.                                                         </tr>
  411.                                                         <tr>
  412.                                                                 <td><code>.badge-info</td>
  413.                                                                 <td>30</td>
  414.                                                         </tr>
  415.                                                         <tr>
  416.                                                                 <td><code>.badge-warning</td>
  417.                                                                 <td>412</td>
  418.                                                         </tr>
  419.                                                         <tr>
  420.                                                                 <td><code>.badge-danger</td>
  421.                                                                 <td>999</td>
  422.                                                         </tr>
  423.                                                 </tbody>
  424.                                         </table>                    
  425.                                 </div>
  426.                                 <div class="col-md-6">
  427.                                   <p>Easily highlight new or unread items with the <code>.badge class</p>
  428.                                         <div class="list-group list-group-alternate">
  429.                                                 <a href="#" class="list-group-item">201 <i class="ti ti-email"></i> Inbox </a>
  430.                                                 <a href="#" class="list-group-item">5021 <i class="ti ti-eye"></i> Profile visits </a>
  431.                                                 <a href="#" class="list-group-item">14 <i class="ti ti-headphone-alt"></i> Call </a>
  432.                                                 <a href="#" class="list-group-item">20 <i class="ti ti-comments"></i> Messages </a>
  433.                                                 <a href="#" class="list-group-item">14 <i class="ti ti-bookmark"></i> Bookmarks </a>
  434.                                                 <a href="#" class="list-group-item">30 <i class="ti ti-bell"></i> Notifications </a>
  435.                                         </div>
  436.                             </div>
  437.                            <div class="clearfix"> </div>
  438.                         </div>
  439.                 </div>
  440.         </div>
  441.         <!--typo-end-->
  442.         <!--gallery-starts-->
  443.         <div class="gallery" id="gallery">
  444.                         <div class="gallery-top heading">
  445.                                 <h3>Our Gallery</h3>
  446.                         </div>
  447.                         <div class="gallery-bottom">
  448.                         <section>
  449.                                 <ul id="da-thumbs" class="da-thumbs">
  450.                                         <li>
  451.                                                 <a href="images/g-1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  452.                                                         <img src="images/g-1.jpg" alt="" />
  453.                                                         <div>
  454.                                                                 <h5>Car</h5>
  455.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  456.                                                         </div>
  457.                                                 </a>
  458.                                         </li>
  459.                                         <li>
  460.                                                 <a href="images/g-2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  461.                                                         <img src="images/g-2.jpg" alt="" />
  462.                                                         <div>
  463.                                                                 <h5>Car</h5>
  464.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  465.                                                         </div>
  466.                                                 </a>
  467.                                         </li>
  468.                                         <li>
  469.                                                 <a href="images/g-3.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  470.                                                         <img src="images/g-3.jpg" alt="" />
  471.                                                         <div>
  472.                                                                 <h5>Car</h5>
  473.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  474.                                                         </div>
  475.                                                 </a>
  476.                                         </li>
  477.                                         <li>
  478.                                                 <a href="images/g-4.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  479.                                                         <img src="images/g-4.jpg" alt="" />
  480.                                                         <div>
  481.                                                                 <h5>Car</h5>
  482.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  483.                                                         </div>
  484.                                                 </a>
  485.                                         </li>
  486.                                         <li>       
  487.                                                 <a href="images/g-5.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  488.                                                         <img src="images/g-5.jpg" alt="" />
  489.                                                         <div>
  490.                                                                 <h5>Car</h5>
  491.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  492.                                                         </div>
  493.                                                 </a>
  494.                                         </li>
  495.                                         <li>
  496.                                                 <a href="images/g-6.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  497.                                                         <img src="images/g-6.jpg" alt="" />
  498.                                                         <div>
  499.                                                                 <h5>Car</h5>
  500.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  501.                                                         </div>
  502.                                                 </a>
  503.                                         </li>
  504.                                         <li>
  505.                                                 <a href="images/g-7.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  506.                                                         <img src="images/g-7.jpg" alt="" />
  507.                                                         <div>
  508.                                                                 <h5>Car</h5>
  509.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  510.                                                         </div>
  511.                                                 </a>
  512.                                         </li>
  513.                                         <li>
  514.                                                 <a href="images/g-8.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  515.                                                         <img src="images/g-8.jpg" alt="" />
  516.                                                         <div>
  517.                                                                 <h5>Car</h5>
  518.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  519.                                                         </div>
  520.                                                 </a>
  521.                                         </li>
  522.                                         <li>
  523.                                                 <a href="images/g-9.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  524.                                                         <img src="images/g-9.jpg" alt="" />
  525.                                                         <div>
  526.                                                                 <h5>Car</h5>
  527.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  528.                                                         </div>
  529.                                                 </a>
  530.                                         </li>
  531.                                         <li>
  532.                                                 <a href="images/g-10.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
  533.                                                         <img src="images/g-10.jpg" alt="" />
  534.                                                         <div>
  535.                                                                 <h5>Car</h5>
  536.                                                                 <span>non suscipit leo fringilla non suscipit leo fringilla molestie
  537.                                                         </div>
  538.                                                 </a>
  539.                                         </li>
  540.                                         <div class="clearfix"> </div>
  541.                                 </ul>
  542.                         </section>
  543.                         </div>       
  544.                 <script type="text/javascript">
  545.                         $(function() {
  546.                        
  547.                                 $(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );
  548.                         });
  549.                 </script>
  550.         </div>
  551.         <!--gallery-end-->
  552.         <!--news-starts-Here-->
  553.                 <div class="news" id="news">
  554.                         <div class="container">
  555.                                 <div class="news-main">
  556.                                         <div class="news-top heading">
  557.                                                 <h3>Our News</h3>
  558.                                                 <p>Proin aliquam purus quis diam fringilla, mollis pretium lorem euismod. Ut dictum eget tellus et sollicitudin. Sed sit amet leo et nisl maximus euismod. Pellentesque id dignissim massa a venenatis risus.</p>
  559.                                         </div>
  560.                                         <div class="news-bottom-one">
  561.                                                 <div class="col-md-2 news-bottom-left">                                       
  562.                                                         <h3>25</h3>
  563.                                                         <p>September</p>
  564.                                                 </div>
  565.                                                 <div class="col-md-10 news-bottom-right">
  566.                                                         <p>Cras pulvinar quam sed elit fringilla faucibus id ac nunc. Donec bibendum ligula odio, vitae tempus mi molestie nec. Nulla viverra egestas quam vel feugiat. Fusce vel elit scelerisque libero.</p>
  567.                                                         <div class="bn">
  568.                                                                 <a href="#">Read More</a>
  569.                                                         </div>                                                                                               
  570.                                                 </div>
  571.                                                 <div class="clearfix"> </div>
  572.                                         </div>
  573.                                         <div class="news-bottom-one">
  574.                                                 <div class="col-md-2 news-bottom-left">                                                       
  575.                                                         <h3>15</h3>
  576.                                                         <p>June</p>
  577.                                                 </div>                                                                               
  578.                                                 <div class="col-md-10 news-bottom-right">                                                                                               
  579.                                                         <p>Cras pulvinar quam sed elit fringilla faucibus id ac nunc. Donec bibendum ligula odio, vitae tempus mi molestie nec. Nulla viverra egestas quam vel feugiat. Fusce vel elit scelerisque libero.</p>
  580.                                                         <div class="bn">
  581.                                                                 <a href="#">Read More</a>
  582.                                                         </div>                                                                                       
  583.                                                 </div>
  584.                                                 <div class="clearfix"> </div>
  585.                                         </div>
  586.                                         <div class="news-bottom-one">
  587.                                                 <div class="col-md-2 news-bottom-left">                                                                               
  588.                                                         <h3>07</h3>
  589.                                                         <p>April</p>                                                                                               
  590.                                                 </div>
  591.                                                 <div class="col-md-10 news-bottom-right">                                                       
  592.                                                         <p>Cras pulvinar quam sed elit fringilla faucibus id ac nunc. Donec bibendum ligula odio, vitae tempus mi molestie nec. Nulla viverra egestas quam vel feugiat. Fusce vel elit scelerisque libero.</p>
  593.                                                         <div class="bn">
  594.                                                                 <a href="#">Read More</a>
  595.                                                         </div>
  596.                                                 </div>                                                                       
  597.                                                 <div class="clearfix"> </div>
  598.                                         </div>
  599.                                 </div>
  600.                         </div>
  601.                 </div>
  602.         <!--news-Ends-Here-->
  603.         <!--contact-starts-->
  604.         <div class="contact" id="contact">
  605.                 <div class="container">
  606.                         <div class="contact-top">
  607.                                 <div class="col-md-4 contact-left">
  608.                                         <div class="add1">
  609.                                                
  610.                                                 <p>The company name, Glasglow Dr 40 Fe 72.</p>
  611.                                         </div>
  612.                                         <div class="add1">
  613.                                                
  614.                                                 <p>+755 265 8822 , +955 326 3695</p>
  615.                                         </div>
  616.                                         <div class="add1">
  617.                                                
  618.                                                 <p>Email: <a href="mailto:example@email.com">contact@example.com</a></p>
  619.                                         </div>
  620.                                 </div>       
  621.                                 <div class="col-md-8 contact-right">
  622.                                         <input type="text" value="Your name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your name';}">
  623.                                 <input type="text" value="Your mail" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your mail';}">
  624.                                         <textarea value="Your message" onfocus="if(this.value == 'Your message') this.value='';" onblur="if(this.value == '') this.value='Your message';">Your message</textarea><br>
  625.                                       <div class="submit">
  626.                                               <input type="submit" value="Send Message">
  627.                                       </div>   
  628.                                 </div>       
  629.                                 <div class="clearfix"></div>       
  630.                         </div>
  631.                 </div>
  632.         </div>
  633.         <!--contact-end-->
  634.         <!--footer-starts-->
  635.         <div class="footer">
  636.                 <div class="container">
  637.                         <div class="footer-top">
  638.                                 <a href="#"><img src="images/logo.png" alt="" ></a>
  639.                                 <ul>
  640.                                         <li><a href="#"></a></li>
  641.                                         <li><a href="#"></a></li>
  642.                                         <li><a href="#"></a></li>
  643.                                         <li><a href="#"></a></li>
  644.                                 </ul>
  645.                                 <p>Copyright © 2015.Company name All rights reserved.<a target="_blank" href="http://h2design.taobao.com/">氢设计</a></p>
  646.                         </div>
  647.                 </div>
  648.                 <script type="text/javascript">
  649.                                                                         $(document).ready(function() {
  650.                                                                                 /*
  651.                                                                                 var defaults = {
  652.                                                                                           containerID: 'toTop', // fading element id
  653.                                                                                         containerHoverID: 'toTopHover', // fading element hover id
  654.                                                                                         scrollSpeed: 1200,
  655.                                                                                         easingType: 'linear'
  656.                                                                                  };
  657.                                                                                 */
  658.                                                                                
  659.                                                                                 $().UItoTop({ easingType: 'easeOutQuart' });
  660.                                                                                
  661.                                                                         });
  662.                                                                 </script>
  663.                 <a href="#home" id="toTop" class="scroll" style="display: block;">  </a>
  664.         </div>
  665.         <!--footer-end-->
  666. </body>
  667. </html>
复制代码


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作