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

学生奥迪汽车静态网页设计作品

  • 作品介绍
  • 作品截图
  • 网页代码
  • 作品地址

作品介绍

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

作品截图

学生汽车网页设计作品静态HTML网页模板源码 大学生汽车网站制作 简单汽车网页设计成品_第1张图片

网页代码

说明:本作品为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">奥迪Aicona>li><li><a href="cheb.html">奥迪PB18 e-trona>li>
		<li><a href="chec.html">奥迪Elainea>li><li><a href="ched.html">奥迪e-tron Vision Gran Turismoa>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>

作品地址

stu-works.com/html/qiche/287.html

你可能感兴趣的:(品牌汽车,/,科技产品,html,css,html5,网页设计,dreamweaver)