整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
?? 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術博主
作者主頁: 【主頁——獲取更多優質源碼】
web前端期末大作業： 【畢設項目精品實戰案例 (1000套) 】
程序員有趣的告白方式：【HTML七夕情人節表白網頁制作 (110套) 】
超炫酷的大屏可視化源碼：【 大屏展示大數據平臺可視化(150套) 】
HTML+CSS+JS實例代碼：
免費且實用的WEB前端學習指南：
關于作者: 歷任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 堅持原創，熱衷分享，初心未改，繼往開來！
文章目錄
一、?網站題目
汽車網站、汽車介紹、汽車官網、汽車租賃、企業網頁 、等網站的設計與制作。
二、??網站描述
? 此作品為學生汽車網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。
一套優質的網頁設計應該包含 (具體可根據個人要求而定)
頁面分為頁頭、菜單導航欄（最好可下拉）、中間內容板塊、頁腳四大部分。所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成。頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。菜單美觀、醒目，二級菜單可正常彈出與跳轉。要有JS特效，如定時切換和手動切換圖片輪播。頁面中有多媒體元素，如gif、視頻、音樂，表單技術的使用。頁面清爽、美觀、大方，不雷同。 。不僅要能夠把用戶要求的內容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。 三、網站介紹
網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網站的效果。
網站素材方面：計劃收集各大平臺好看的圖片素材網站制作，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。
網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、網頁圖片文件；
網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁、其他html為二級頁面；
（2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3） js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等（個別網頁中運用到js代碼）。
四、網站演示
五、?? 網站代碼 HTML結構代碼
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=GB2312" />
<meta name="keywords" />
<meta name="description"/>
<title>title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<style type="text/css">
#div3 {width:100px; height:100px; background:url('images/1.jpg'); position:absolute; top:200px; left:50px; display:block; cursor:pointer; text-align:right; z-index:999999;}
span {color:#000; font-size:16px; margin-top:16px; margin-right:5px; font-weight:bold; cursor:pointer}
#div1 { left:0; top:50%; background:url('images/2.jpg');position:absolute; width:100px; height:250px; text-align:right;}
#div2 { right:0; top:50%; background:url('images/2.jpg'); position:absolute; width:100px; height:250px;text-align:right;}
.menu{ height:40px; line-height:40px;}
.menu ul{ padding-left:35px;}
.menu ul li{ float:left; width:136px; text-align:center; position:relative; margin-right:46px;}
.menu ul li.nobg{ background:none;}
.menu ul li.nobg:hover{ background:#921e14;width:136px; height:37px;}
.menu ul li a{ color:#FFF; font-weight:bold;display:block;}
.menu ul li ul{ position:absolute; top:38px; text-align:center;width:100px; left:0px; padding-left:0px; display:none;}
.menu ul li ul li{display:block; clear:both; float:none; background:none; margin:0}
.nav td a { padding:0;}
style>
<script type="text/javascript" src="JS/jquery-1.8.1.min.js">script>
<script type="text/javascript">
$(function(){
$('.menu li').bind({
mouseover:function(){ $(this).find("ul").show();},
mouseout:function(){ $(this).find("ul").hide(); }
});
});
script>
head>
<body>
<center>
<table width="1000" border="0" cellspacing="0" cellpadding="0" border-spacing="0">
<tr><td colspan="5"><img src="images/photo.jpg" width="1000" height="200"/>td>tr>
<tr class="nav ">
<td height="50" colspan="5" >
<div class="menu">
<ul>
<li class="hover"> <a class="active" href="index-2.html">網站首頁a>li>
<li><a href="http://www.foreseebio.com/chengpinb/biao26/about.html">關于我們a>
li>
<li><a href="news.html">新聞咨詢a>
<ul>
<li><a href="news.html">普通運輸汽車a>li>
<li><a href="news.html">專用汽車a>li>
<li><a href="news.html">特殊用途汽車a>li>
ul>
li>
<li><a href="contact.html">聯系我們a>
<ul>
<li><a href="contact.html">聯系方式a>li>
<li><a href="liuyan.html">給我留言a>li>
ul>
li>
<li><a href="liuyan.html">給我留言a>li>
ul>
div>
td>
tr>
<tr>
<td width="200" style="paddding:10px;" height="800">
<p>汽車是指以汽油、柴油、天然氣等燃料或者以電池、太陽能等新型能源由發動機作動力的運輸工具。一般具有四個或四個以上車輪，不依靠軌道或架線而在陸地行駛的車輛。汽車通常被用作載運客、貨和牽引客、貨掛車，也有為完成特定運輸任務或作業任務而將其改裝或經裝配了專用設備成為專用車輛，但不包括專供農業使用的機械。全掛車和半掛車并無自帶動力裝置，他們與牽引汽車組成汽車列車時才屬于汽車范疇， 1885年是汽車發明取得決定性突破的一年。當時和戴姆勒在同一工廠的本茨，也在研究汽車。他在1885年幾乎與戴姆勒同時制成了汽油發動機，裝在汽車上，以每小時12公里的速度行駛，獲得成功。p>
<img src="images/p2.jpg" width="200" height="190"/>
<img src="images/p1.jpg" width="200" height="210"/>td>
<td width="800" colspan="4">
<center style="text-align:left;">
<h2 style="padding:0 10px;">發展形勢h2>
<script type="text/javascript" language="JavaScript">
var widths=800;
var w=2;
var widthss=widths+w;
var heights=500;
var heightss=heightss+w;
var heightt=20;
var counts=3;
img1=new Image();img1.src='images/qiche1.jpg';
url1=new Image();url1.src='#';
img2=new Image();img2.src='images/qiche2.jpg';
url2=new Image();url2.src='#';
img3=new Image();img3.src='images/qiche3.jpg';
url3=new Image();url3.src='#';
var nn=1; //當前所顯示的滾動圖
var key=0; //標識是否為第一次開始執行
var tt; //標識作用
function change_img()
{
if(key==0){key=1;} //如果第一次執行KEY=1，表示已經執行過一次了。
else if(document.all)//document.all僅IE6/7認識，firefox不會執行此段內容
{
document.getElementById("pic").filters[0].Apply(); //將濾鏡應用到對像上
document.getElementById("pic").filters[0].Play(duration=2); //開始轉換
document.getElementById("pic").filters[0].Transition=23;//轉換效果
}
eval('document.getElementById("pic").src=img'+nn+'.src'); //替換圖片
eval('document.getElementById("url").href=url'+nn+'.src'); //替換URL
//替換ALT
for (var i=1;i<=counts;i++)
{
document.getElementById("xxjdjj"+i).className='axx';
}
document.getElementById("xxjdjj"+nn).className='bxx'; //將當前頁面的ID設置為選中狀態
nn++;
if(nn>counts){nn=1;} //如果ID大于總圖片數量。則從頭開始循環
tt=setTimeout('change_img()',4000); //在4秒后重新執行change_img()方法.
}
function changeimg(n)//點擊黑條上的鏈接執行的方法。
{
nn=n; //當前頁面的ID等于傳入的N值,
window.clearInterval(tt); //清除用于循環的TT
//重新執行change_img();但change_img()內所調用的圖片ID已經在此處被修改,會從新ID處開始執行.
change_img();
}
//樣式表
document.write('');
//內容部分
document.write('+widthss+'px;height:'+heights+'px;');
document.write('overflow:hidden;text-overflow:clip;float:left;">');
document.write('');
document.write(');
document.write('width:100%-2px;text-align:right;');
document.write('top:-19px;position:relative;margin:-5px 9px 0 1px;height:22px;line-height:22px;');
document.write('z-index:4000;">');
for(var i=1;i<counts+1;i++)
{
document.write('+i+');" id="xxjdjj'+i+'"');
document.write(' class="axx" target="_self">'+i+'');
}
document.write('');
change_img();
script>
<p style="padding:0 10px;">
此前連續下滑的市場狀況，致使歐洲汽車工業紛紛將生產及銷售重點轉向持續增長的中國市場，并引發了新一輪的在華產能和網點擴張，未來預計將有更多的國際品牌在華本土化生產。上海大眾第八工廠在長沙經開區南擴區正式簽約。
據了解，2013年至2015年，大眾在中國的合資企業計劃繼續投資98億歐元，用于產能擴建和新產品開發。大眾計劃到2018年前在全球興建10座工廠，其中7座位于中國，這就包含剛剛興建的長沙工廠，2018年大眾在華產能將達到400萬輛。
實際上，除了大眾之外，通用、現代、等跨國車企也掀起了在華擴充產能的熱潮。業內認為，這實際上體現出跨國車企對中國市場的高度依賴。
而后，多個歐洲跨國車企正在籌劃將旗下產品引入中國本土化生產。當前，捷豹路虎已經與奇瑞進行了合資合作，在全球銷量和在華銷量均穩定增長的良好勢頭下，奇瑞捷豹路虎擬在2014年下半年推出首個國產產品。
同時，沃爾沃、雷諾等歐洲品牌也在推進在華本土化生產計劃。此外，有消息稱，Jeep、凱迪拉克等品牌也將推出在華生產計劃。p>
center>td>tr>
table>
tr>
<tr>
<td bgcolor="gray" height="40" >
<center><font color="white">版權所有 禁止盜版font>center>
td>
tr>
table>
center>
<script type="text/javascript">
window.onscroll = window.onresize = function(){
var oDiv1 = document.getElementById("div1");//獲取div1
var oDiv2 = document.getElementById("div2");//獲取div2
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//獲取滾動條滾動的距離
//oDiv1.style.top = oDiv2.style.top = scrollTop + (document.documentElement.clientHeight - oDiv1.offsetHeight)/2 + "px";//移動距離
var dis = parseInt(scrollTop + (document.documentElement.clientHeight - oDiv1.offsetHeight)/2);
movestart(dis);
//oDiv1.style.top = oDiv2.style.top = dis;
};
var clearX = null;//全局變量
function movestart(targ){
var oDiv1 = document.getElementById("div1");//獲取div1,局部變量
var oDiv2 = document.getElementById("div2");//獲取div2,局部變量
clearInterval(clearX);
clearX = setInterval(function(){
var xspeed = (targ-oDiv1.offsetTop)/8;
if(oDiv1.offsetTop == targ){
clearInterval(clearX);
}else{
oDiv1.style.top = oDiv2.style.top = oDiv1.offsetTop + xspeed +"px";
}
},30);
}
window.onload = function(){
var oDiv = document.getElementById("div3");
var oSpan = document.getElementsByTagName("span");
var scrollTop2 = document.documentElement.scrollTop || document.body.scrollTop;
var D = null;
var xspeed = 3;
var yspeed = 3;
oDiv.onmouseover = function(){clearInterval(D);};
oDiv.onmouseout = function(){xlz();};
oSpan[0].onclick = function(){removeDiv();};
xlz();
function removeDiv(){
oDiv.style.display = "none";
}
function xlz(){
D = setInterval(function(){
var l = oDiv.offsetLeft + xspeed;
var t = oDiv.offsetTop + yspeed;
if(t>=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop2){
yspeed *= -1;
t =document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop2;
}else if(t<=0){
yspeed *=-1;
t = 0;
}
if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
xspeed *= -1;
l = document.documentElement.clientWidth-oDiv.offsetWidth;
}else if(l<=0){
xspeed *=-1;
l = 0;
}
oDiv.style.top =t +"px";
oDiv.style.left = l +"px";
},30);
}
}
script>
<div id="div3"><span style="color:red;">Xspan>div>
body>
html>
CSS樣式代碼
body {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 20px;
background:white;
-webkit-font-smoothing: antialiased;
margin:0;
padding:0;
}
.nav2 tr{
background: url(../images/bg.gif) repeat; text-align:center;
}
.nav{
background:black;}
.nav td a {
color:white;
padding-top: 15px;
padding-bottom: 15px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px 1px #222;
text-decoration: none;
padding: 10px 40px;
background: url(../images/menu2.png) no-repeat;
}
.nav td a:hover,.nav td a.active{background: url(../images/menu1.png) no-repeat;color:#ef7524;}
table tr td {
padding: 0;
margin:0;
}
.liu tr{
text-align:center;
background: url(../images/0.png) repeat;
}
a{text-decoration: none;}
ul{list-style-type:none}
六、 如何讓學習不再盲目
第一、帶著目標去學習，無論看書報課還是各種線下活動。
首先要明確自己的學習目標是什么，是想解決什么問題，實現怎樣的目標。
第二、學習要建立個人知識體系
知識是學不完的，書籍是浩如煙海的。我們盡情徜徉其中的時候，千萬不要被海水淹死，沒有自我了。在學習過程中，我們會發現每一個知識點都是有她的邊界和背景的，我們要善于歸納整理知識
第三、學到了就要用到
有時，我們一天下來感覺學到了很多干貨，那么我們一定要將這些知識點和實際工作和生活聯系起來。知識和實踐相互聯系靠攏。愛學習是一件好事，但只有會學習的人，才有價值。
七、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.【關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識網站制作，互相學習」！
3.
以上內容技術相關問題歡迎一起交流學習
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
