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