HTML期末作业-汽车奔驰4s店

 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>

 页面截图

  • 10
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
界面查看: https://blog.csdn.net/weixin_40228600/article/details/121188844 摘 要 V 关键字:html;css;jQuery;网站美化;交互设计。 VI 1.1 选题背景及意义 III 1.2 研究内容和拟解决的问题 III (1) 排版 III (2) 单页布局的设计 III (3) 交互性 III 1.3 本章小结 IV 第2章 前端开发工具及相关技术 IV 1.4 前端开发环境 IV 1.5 前端开发工具 IV 1.6 前端开发相关技术 V 1.6.1 Java script 简介 V 1.6.2 Java script 基本特点 V 1.6.3 CSS简介 VI 1.6.4 JQuery VI (1) 提供了强大的功能函数 VII (2) 解决浏览器兼容性问题 VII (3) 实现丰富的UI VII (4) 纠正错误的脚本知识 VII 1.6.5 HTML VIII 1.7 本章小结 IX 第2章 前端布局分析与设计 IX 1.8 前端总体开发流程及设计 IX 1.8.1 分层开发 X 1.8.2 代码编写 X 1.8.3 内部测试与后续优化 X 1.8.4 CSS元素 XI 1.9 网站结构布局及设计 XII 1.9.1 网站首页结构 XII 1.9.2 主题鲜明,富有特色 XIV 1.9.3 商品版式编排布局合理性 XIV 1.9.4 登录页排布局合理性 XV 1.9.5 注册页排布局合理性 XVI 1.10 网站前台页面设计 XVII 1.10.1 首页 XVII 1.11 本章小结 XVII 第2章 主要功能的实现 XVII 2.1 界面设计 XVII 2.2 具体设计文档 XVIII 2.3 可视化设计 XVIII 2.4 具体实现技术 XVIII 2.4.1 CSS在"数字媒体技术系网站"中的应用实例 XVIII 2.4.2 应用JavaScript设计网页 XIX 2.5 本章小结 XXI 第3章 可行性分析 XXI 3.1.1技术可行性 XXI 3.1.2经济可行性 XXII 第4章 需求分析 XXII 4.1 设计目标 XXII 第3章 总结 XXIII 3.1 总结 XXIII 参考文献 24
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值