當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時間：2025/3/15 HTML 21 豆豆

生活随笔收集整理的這篇文章主要介紹了学生汽车网页设计作品静态HTML网页模板源码大学生汽车网站制作简单汽车网页设计成品小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

學生奧迪汽車靜態(tài)網(wǎng)頁設計作品

作品介紹
作品截圖
網(wǎng)頁代碼
作品地址

作品介紹

本網(wǎng)頁設計期末大作業(yè)成品使用DIV CSS布局制作，題材為奧迪概念車。頂部LOGO區(qū)及首頁的汽車區(qū)使用 CSS3動畫屬性制作了鼠標經(jīng)過動畫特效（鼠標經(jīng)過圖片緩慢放大，鼠標離開緩慢縮小）。同時頂部LOGO區(qū)域使用 CSS3動畫屬性制作了響應式加載效果。
網(wǎng)頁整體簡潔大氣，每個頁面都配了不同的BANNER大圖，每個頁面也制作了返回頂部按鈕，子頁面頂部制作了返回首頁按鈕。除了CSS文件中有幾行CSS3動畫樣式（可刪除），其他代碼均為基礎代碼。大圖及導航背景區(qū)域寬度為100%自適應屏幕，主體內容區(qū)域為1200PX。整體寬屏設計十分漂亮。

作品截圖

網(wǎng)頁代碼

說明：本作品為LILIXING.com原創(chuàng)作品，為了保障作品原創(chuàng)性，以下僅為首頁部分代碼供參考

<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>