学生汽车网页设计作品静态HTML网页模板源码大学生汽车网站制作简单汽车网页设计成品

最新推荐文章于 2025-11-14 05:53:13 发布

原创最新推荐文章于 2025-11-14 05:53:13 发布 · 置顶 · 6.3k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #html5 #网页设计 #dreamweaver

品牌汽车 / 科技产品专栏收录该内容

2 篇文章

订阅专栏

这是一份学生创作的奥迪概念车静态网页设计作品，采用DIV+CSS布局，包含CSS3动画效果，如鼠标悬停图片放大缩小，响应式加载。网页设计风格简洁大气，每个页面有不同BANNER大图，配有返回顶部和首页按钮，代码结构清晰，主要使用基础HTML和CSS，部分使用CSS3。作品链接提供以供查看。

作品介绍

本网页设计期末大作业成品使用DIV CSS布局制作，题材为奥迪概念车。顶部LOGO区及首页的汽车区使用 CSS3动画属性制作了鼠标经过动画特效（鼠标经过图片缓慢放大，鼠标离开缓慢缩小）。同时顶部LOGO区域使用 CSS3动画属性制作了响应式加载效果。
网页整体简洁大气，每个页面都配了不同的BANNER大图，每个页面也制作了返回顶部按钮，子页面顶部制作了返回首页按钮。除了CSS文件中有几行CSS3动画样式（可删除），其他代码均为基础代码。大图及导航背景区域宽度为100%自适应屏幕，主体内容区域为1200PX。整体宽屏设计十分漂亮。

作品截图

学生静态HTML网页设计作品

网页代码

说明：本作品为LILIXING.com原创作品，为了保障作品原创性，以下仅为首页部分代码供参考

<body>
<div class="head shadow">
	<a href="index.html"><img src="images/logo.png" height="100px"></a>
</div>
<div class="banner"><img src="images/banner.jpg" width="100%"></div>
<div class="menu">
	<ul>
		<li><a href="chea.html">奥迪Aicon</a></li><li><a href="cheb.html">奥迪PB18 e-tron</a></li>
		<li><a href="chec.html">奥迪Elaine</a></li><li><a href="ched.html">奥迪e-tron Vision Gran Turismo</a></li>
	</ul>
</div>
<div class="foot">奥迪概念车</div>
<a href="#top" style="position:fixed; right:20px; bottom:20px;"><img src="images/top.png" width="50px"></a>
</body>