整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
?? 作者簡介: 一個(gè)熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
作者主頁: 【主頁——獲取更多優(yōu)質(zhì)源碼】
web前端期末大作業(yè)： 【畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】
程序員有趣的告白方式：【HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
超炫酷的大屏可視化源碼：【 大屏展示大數(shù)據(jù)平臺可視化(150套) 】
HTML+CSS+JS實(shí)例代碼：
免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南：
關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開來！
文章目錄
一、?網(wǎng)站題目
汽車網(wǎng)站、汽車介紹、汽車官網(wǎng)、汽車租賃、企業(yè)網(wǎng)頁 、等網(wǎng)站的設(shè)計(jì)與制作。
二、??網(wǎng)站描述
? 此作品為學(xué)生汽車網(wǎng)頁設(shè)計(jì)題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
一套優(yōu)質(zhì)的網(wǎng)頁設(shè)計(jì)應(yīng)該包含 (具體可根據(jù)個(gè)人要求而定)
頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分。所有頁面相互超鏈接，可到三級頁面，有5-10個(gè)頁面組成。頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)。菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)。要有JS特效，如定時(shí)切換和手動(dòng)切換圖片輪播。頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用。頁面清爽、美觀、大方，不雷同。 。不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。 三、網(wǎng)站介紹
網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁布局結(jié)構(gòu)。
網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
網(wǎng)站素材方面：計(jì)劃收集各大平臺好看的圖片素材網(wǎng)站制作，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、網(wǎng)頁圖片文件；
網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁、其他html為二級頁面；
（2） css文件包含：css全部頁面樣式,文字滾動(dòng), 圖片放大等；
（3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。
四、網(wǎng)站演示
五、?? 網(wǎng)站代碼 HTML結(jié)構(gòu)代碼
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">網(wǎng)站首頁a>li>
<li><a href="http://www.foreseebio.com/chengpinb/biao26/about.html">關(guān)于我們a>
li>
<li><a href="news.html">新聞咨詢a>
<ul>
<li><a href="news.html">普通運(yùn)輸汽車a>li>
<li><a href="news.html">專用汽車a>li>
<li><a href="news.html">特殊用途汽車a>li>
ul>
li>
<li><a href="contact.html">聯(lián)系我們a>
<ul>
<li><a href="contact.html">聯(lián)系方式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>汽車是指以汽油、柴油、天然氣等燃料或者以電池、太陽能等新型能源由發(fā)動(dòng)機(jī)作動(dòng)力的運(yùn)輸工具。一般具有四個(gè)或四個(gè)以上車輪，不依靠軌道或架線而在陸地行駛的車輛。汽車通常被用作載運(yùn)客、貨和牽引客、貨掛車，也有為完成特定運(yùn)輸任務(wù)或作業(yè)任務(wù)而將其改裝或經(jīng)裝配了專用設(shè)備成為專用車輛，但不包括專供農(nóng)業(yè)使用的機(jī)械。全掛車和半掛車并無自帶動(dòng)力裝置，他們與牽引汽車組成汽車列車時(shí)才屬于汽車范疇， 1885年是汽車發(fā)明取得決定性突破的一年。當(dāng)時(shí)和戴姆勒在同一工廠的本茨，也在研究汽車。他在1885年幾乎與戴姆勒同時(shí)制成了汽油發(fā)動(dòng)機(jī)，裝在汽車上，以每小時(shí)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;">發(fā)展形勢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; //當(dāng)前所顯示的滾動(dòng)圖
var key=0; //標(biāo)識是否為第一次開始執(zhí)行
var tt; //標(biāo)識作用
function change_img()
{
if(key==0){key=1;} //如果第一次執(zhí)行KEY=1，表示已經(jīng)執(zhí)行過一次了。
else if(document.all)//document.all僅IE6/7認(rèn)識，firefox不會(huì)執(zhí)行此段內(nèi)容
{
document.getElementById("pic").filters[0].Apply(); //將濾鏡應(yīng)用到對像上
document.getElementById("pic").filters[0].Play(duration=2); //開始轉(zhuǎn)換
document.getElementById("pic").filters[0].Transition=23;//轉(zhuǎn)換效果
}
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'; //將當(dāng)前頁面的ID設(shè)置為選中狀態(tài)
nn++;
if(nn>counts){nn=1;} //如果ID大于總圖片數(shù)量。則從頭開始循環(huán)
tt=setTimeout('change_img()',4000); //在4秒后重新執(zhí)行change_img()方法.
}
function changeimg(n)//點(diǎn)擊黑條上的鏈接執(zhí)行的方法。
{
nn=n; //當(dāng)前頁面的ID等于傳入的N值,
window.clearInterval(tt); //清除用于循環(huán)的TT
//重新執(zhí)行change_img();但change_img()內(nèi)所調(diào)用的圖片ID已經(jīng)在此處被修改,會(huì)從新ID處開始執(zhí)行.
change_img();
}
//樣式表
document.write('');
//內(nèi)容部分
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;">
此前連續(xù)下滑的市場狀況，致使歐洲汽車工業(yè)紛紛將生產(chǎn)及銷售重點(diǎn)轉(zhuǎn)向持續(xù)增長的中國市場，并引發(fā)了新一輪的在華產(chǎn)能和網(wǎng)點(diǎn)擴(kuò)張，未來預(yù)計(jì)將有更多的國際品牌在華本土化生產(chǎn)。上海大眾第八工廠在長沙經(jīng)開區(qū)南擴(kuò)區(qū)正式簽約。
據(jù)了解，2013年至2015年，大眾在中國的合資企業(yè)計(jì)劃繼續(xù)投資98億歐元，用于產(chǎn)能擴(kuò)建和新產(chǎn)品開發(fā)。大眾計(jì)劃到2018年前在全球興建10座工廠，其中7座位于中國，這就包含剛剛興建的長沙工廠，2018年大眾在華產(chǎn)能將達(dá)到400萬輛。
實(shí)際上，除了大眾之外，通用、現(xiàn)代、等跨國車企也掀起了在華擴(kuò)充產(chǎn)能的熱潮。業(yè)內(nèi)認(rèn)為，這實(shí)際上體現(xiàn)出跨國車企對中國市場的高度依賴。
而后，多個(gè)歐洲跨國車企正在籌劃將旗下產(chǎn)品引入中國本土化生產(chǎn)。當(dāng)前，捷豹路虎已經(jīng)與奇瑞進(jìn)行了合資合作，在全球銷量和在華銷量均穩(wěn)定增長的良好勢頭下，奇瑞捷豹路虎擬在2014年下半年推出首個(gè)國產(chǎn)產(chǎn)品。
同時(shí)，沃爾沃、雷諾等歐洲品牌也在推進(jìn)在華本土化生產(chǎn)計(jì)劃。此外，有消息稱，Jeep、凱迪拉克等品牌也將推出在華生產(chǎn)計(jì)劃。p>
center>td>tr>
table>
tr>
<tr>
<td bgcolor="gray" height="40" >
<center><font color="white">版權(quán)所有 禁止盜版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;//獲取滾動(dòng)條滾動(dòng)的距離
//oDiv1.style.top = oDiv2.style.top = scrollTop + (document.documentElement.clientHeight - oDiv1.offsetHeight)/2 + "px";//移動(dòng)距離
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}
六、 如何讓學(xué)習(xí)不再盲目
第一、帶著目標(biāo)去學(xué)習(xí)，無論看書報(bào)課還是各種線下活動(dòng)。
首先要明確自己的學(xué)習(xí)目標(biāo)是什么，是想解決什么問題，實(shí)現(xiàn)怎樣的目標(biāo)。
第二、學(xué)習(xí)要建立個(gè)人知識體系
知識是學(xué)不完的，書籍是浩如煙海的。我們盡情徜徉其中的時(shí)候，千萬不要被海水淹死，沒有自我了。在學(xué)習(xí)過程中，我們會(huì)發(fā)現(xiàn)每一個(gè)知識點(diǎn)都是有她的邊界和背景的，我們要善于歸納整理知識
第三、學(xué)到了就要用到
有時(shí)，我們一天下來感覺學(xué)到了很多干貨，那么我們一定要將這些知識點(diǎn)和實(shí)際工作和生活聯(lián)系起來。知識和實(shí)踐相互聯(lián)系靠攏。愛學(xué)習(xí)是一件好事，但只有會(huì)學(xué)習(xí)的人，才有價(jià)值。
七、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “點(diǎn)贊” “??評論” “收藏” 一鍵三連哦！
2.【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識網(wǎng)站制作，互相學(xué)習(xí)」！
3.
以上內(nèi)容技術(shù)相關(guān)問題歡迎一起交流學(xué)習(xí)
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
