奔驰4s店：联系页面HTML+CSS+JS实践-CSDN博客

本文链接：https://blog.csdn.net/qq_41101110/article/details/118052147
HTML期末作业-汽车奔驰4s店，期末作业HTML奔驰，HTML作业汽车HTML+css+JavaScript,4个页面!

部分源码


<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联系</title>
<link rel=stylesheet type="text/css" href="css/contact.css">
<link rel="stylesheet" href="css/gallery.css">

<script type="text/javascript" src="./js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="./js/common.js"></script>

</head>
<section class="first-top-section">
  <div class="first-header">
      <img class="first-header-img" src="img/header.png" alt="Header">
      <h1 class="first-set-name">联系</h1>
      <div class="first-nav-container">
        <nav class="first-nav">
          <ul>
           <li><a href="index.html">首页</a></li>
           <li><a href="products.html">产品</a></li>
           <li><a href="service.html">服务</a></li>
           <li><a href="gallery.html"  >展览</a></li>
           <li><a href="contact.html" class="active">联系</a></li>
         </ul>
       </nav> 
     </div>
   </div>
   <div class="first-welcome">
      <div class="img"><img src="img/welcome-img.png" alt=""></div>
  </div>
  </section>

    <div class="fcnt" id="ppt">
  <div class="mimg" id="mpc">
    <div style="display:block"><img src="./img/11.jpg" width="650" height="460"/></div>
    <div><a href="#"><img src="./img/22.png"  width="650" height="460"/></a></div>
    <div><a href="#"><img src="./img/33.png"  width="650" height="460"/></a></div>
    <div><a href="#"><img src="./img/44.png"   width="650" height="460"/></a></div>
  </div>
  
  
  <ul class="ul2">
    <li class="cur1"><img src="./img/55.png"  width="250" height="115"/></li>
    <li class="cur2"><img src="./img/66.png"  width="250" height="115"/></li>
    <li class="cur3"><img src="./img/22.png"  width="250" height="115"/></li>
    <li cur4><img src="./img/11.jpg"  width="250" height="115"/></li>
  </ul>
</div>

<div class="jd">
  <div class="title">图书介绍<br><i>Introduction</i></div>
  <div class="xz_nr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《目送》是作家龙应台继《孩子你慢慢来》《亲爱的安德烈》后，龙应台再推出思考“生死大问”的作品，是一本感悟性的人生之书。
    <img class="imgs" src="./img/99.png" width="400" height="200" align="right"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《目送》是一本生死笔记，深邃，忧伤，美丽。《目送》的七十三篇散文，写父亲的逝、母亲的老、儿子的离、朋友的牵挂、兄弟的携手共行，写失败和脆弱、失落和放手，写缠绵不舍和绝然的虚无。她写尽了幽微，如烛光冷照山壁。
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《目送》散文集共由七十三篇散文组成，是为一本情感性的文集。书中，龙应台写父亲的死亡、母亲的衰老和失智；写对父母的怜惜和体恤，写兄弟携手共行，儿子的离别，朋友的牵挂；写自己的失败和脆弱，失落和放手，以及一个人的走路、赏树、观鸟、拍照、生活等。从牵着孩子幼小的手、情意满满的亲情，到青春后期孩子与自己渐行渐远的背影；从陪着年迈母亲如带着女儿一般，思及自己也曾是父母眼前一去不返的背影，龙应台娓娓道来。正如作者所说：“我慢慢地、慢慢地了解到，所谓父女母子一场，只不过意味着，你和他的缘分就是今生今世不断地在目送他的背影渐行渐远。你站在小路的这一端，看着他逐渐消失在小路转弯的地方，而且，他用背影默默地告诉你，不用追。”
</div>

<div class="rm">
  <div class="title">美书欣赏<br><i>Appreciate</i></div>
   <div id=demo style="overflow:hidden;width:880px;color:#ffffff; padding-top:10px; margin-left:10px; margin: 0 auto;;">
        <table border=0 align=left cellpadding=0 cellspacing="0" cellspace=0>
          <tr>
            <td valign=top id=demo1>
                <table width="880"  padding-left:10px; cellspacing="5" cellpadding="0">
                        <tr>
                            <td><a href="#">
                              <img src="./img/11.jpg" width="420" height="250" style="padding-left:10px;"></a>
                            </td>
                           <td><a href="#">
                              <img src="./img/99.png" width="420" height="250" style="padding-left:10px;"></a>
                            </td>
                            <td><a href="#">
                              <img src="./img/55.png" width="420" height="250" style="padding-left:10px;"></a>
                            </td>
                            <td><a href="#">
                              <img src="./img/44.png" width="420" height="250" style="padding-left:10px;"></a>
                            </td>
                            <td><a href="#">
                              <img src="./img/88.png" width="420" height="250" style="padding-left:10px;"></a>
                            </td>
                            <td><a href="#">
                              <img src="./img/77.png" width="420" height="250" style="padding-left:10px;"></a>
                            </td>
                        </tr>
              </table>
            </td>
            <td id=demo2 valign=top></td>
          </tr>
        </table>
  </div>
  <footer class="footer">
      <div class="main" style="background: transparent;">
      <div class="main-menu">
        <h3 class="footer-title">主&nbsp;菜&nbsp;单</h3>
        <ul class="ul3">
          <li><a href="">主页</a></li>
          <li><a href="">关于我们</a></li>
          <li><a href="">目录</a></li>
          <li><a href="">服务</a></li>
        </ul>
      </div>
      <div class="about">
        <h3>关于我们</h3>
        <p>北京奔驰汽车有限公司（简称北京奔驰）成立于2005年8月8日，是北京汽车股份有限公司与戴姆勒股份公司、戴姆勒大中华区投资有限公司共同投资，集研发、发动机与整车生产、销售和售后服务为一体的中德合资企业。</p>
      </div>
      <div class="social">
        <h3>社交</h3>
        <div class="social-link">
          <a href="">脸书</a>
          <a href="">QQ</a>
          <a href="">微信</a>
          <a href="">微博</a>
          <a href="">知乎</a>
        </div>
      </div>
    </div>
    </footer>

    <script type="text/javascript">
        var speed=30
        demo2.innerHTML=demo1.innerHTML
        function Marquee(){
        if(demo2.offsetWidth-demo.scrollLeft<=0)
            demo.scrollLeft-=demo1.offsetWidth
        else{
            demo.scrollLeft++
            }
        }
        var MyMar=setInterval(Marquee,speed)
        demo.onmouseover=function() {clearInterval(MyMar)}
        demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    </script>
  
</body>
</html>