飄香書店網(wǎng)站網(wǎng)頁設(shè)計報告_第1頁
飄香書店網(wǎng)站網(wǎng)頁設(shè)計報告_第2頁
飄香書店網(wǎng)站網(wǎng)頁設(shè)計報告_第3頁
飄香書店網(wǎng)站網(wǎng)頁設(shè)計報告_第4頁
飄香書店網(wǎng)站網(wǎng)頁設(shè)計報告_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

飄香書院網(wǎng)站飄香書院網(wǎng)站網(wǎng)站首頁書店新品限時購排行榜安全指南我制作的是墨香書店網(wǎng)站,這個網(wǎng)站介紹的是品牌汽車的展示，主要包括網(wǎng)站首頁、書店新品，限時購，排行榜以及安全指南。四、設(shè)計說明（1）視覺風(fēng)格：網(wǎng)站整體風(fēng)格將圍繞“簡約”、“輕快”這兩個主題。各國都別具一格，富有自己國家的特點，但仍然有相互聯(lián)系，統(tǒng)一的整體效果。①顏色：首頁設(shè)計以綠色為基調(diào)，運用灰黑進行融合搭配，突出網(wǎng)站活潑清爽的格調(diào)。另外運用flash和其他形式的動態(tài)技術(shù)效果，強調(diào)網(wǎng)站的特色同時也更能吸引瀏覽者的注意。但不會使用純度很高的顏色，否則不適宜閱讀。會使用偏灰色系的顏色，簡約的現(xiàn)代感，營造靜謐的氛圍，烘托汽車的主題。超鏈接的各個時段的顏色也會統(tǒng)一，目前鼠標(biāo)移上去和點擊時統(tǒng)一為白色。②字體：為了美化頁面，提高視覺效果，使用纖細，清新的字體，且面包屑、主導(dǎo)航和頁面上各個標(biāo)題的字體都統(tǒng)一。目前使用的英文字體為yellowpeasdemo和SIMPLIFICATypeface。（一）、網(wǎng)站的創(chuàng)意和設(shè)計通過學(xué)習(xí)過的輸入書名或者作者名進行匹配，選擇地點所在地，然后提交自己的購車需求，讓售后客服可以更好的聯(lián)系客戶。動態(tài)網(wǎng)頁效果，圖片一點擊就會向上移動。網(wǎng)頁的設(shè)計主頁代碼：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>飄香書店</title> <linkrel="stylesheet"type="text/css"href="css/zhongzi.css"/> <styletype="text/css"> /*#bannerimg{ height:535px!important; width:100%!important; }*/ #banner{ width:100%; height:535px; position:relative; margin:0auto; } .box{ position:absolute; /*width:30%;*/ bottom:56px; left:43%; } .boxli{ display:inline-block; list-style:none; width:64px; cursor:pointer; height:7px; margin-right:9px; background-color:rgb(156,63,61); } .boxliimg{ width:125px; height:70px; /*border:#ff9d002pxsolid;*/ margin-bottom:8px; } .tuimg{ width:1097px; height:115px; } #contain{ width:100%; height:100%; overflow:hidden; } .jd{ position:absolute; margin-top:-500px; margin-left:20px; padding:05px; z-index:10000; background-color:#3d9c56; /*border:#ff9d005pxsolid;*/ } .jd.yd{ border-bottom:#e7e7e71pxsolid; } .jd.ydh3{ padding:7px06px18px; font-weight:normal; font-size:26px; color:#333; font-family:tahoma,arial,'microsoftyahei','hiraginosansgb',simsun,sans-serif; } .jdlabel{ margin-right:30px; } .jd.yd-x{ padding:7px10px26px18px; line-height:40px; font-size:18px; } .fl-top{ width:100%; background:#051223; opacity:0.9; text-align:center; position:fixed; bottom:0; left:0; display:none; z-index:10000; } .fl-pop{ position:relative; } .fl-popi{ position:absolute; top:12px; right:90px; font-size:38px; line-height:1.2; font-family:Simsun; color:#feffff; outline:0none; cursor:pointer; } .fl-popimg{ position:relative; margin-top:-160px; } /*.zixunimg{ width:115px; height:36px; }*/ .topselect{ position:absolute; left:-20%; top:10px; /*outline:none;*/ } </style> </head> <body> <divclass="container"> <divclass="header"> <divclass="top-right"> <ahref="">登錄</a> <ahref="">注冊</a> <ahref="">投訴建議</a> <ahref="">我的收藏</a> <ahref="">我的訂單</a> <ahref="">客戶服務(wù)</a> <ahref="">積分商城</a> </div> </div> <divclass="zixun"id="zx"> <!--<imgsrc="img/icon_on_101331731486955373.png"style="cursor:pointer;"/>--> <imgsrc="img/phone.gif"style="cursor:pointer;width:122px;"/> </div> <!--關(guān)閉廣告條--> <divclass="fl-top"> <divclass="fl-pop"> <imgsrc="img/1_banner.png"/> <imgsrc="img/pc_activity_1_qcode.png"/> <iid="ad">×</i> </div> <!--關(guān)閉廣告條--> </div> <!--<hrstyle="background-color:rgb(220,223,10);"/>--> <divclass="top"> <imgsrc="img/logo.png"alt=""class="logo"/> <divclass="sousuo"> <formclass="clearFIX"> <selectname=""> <optionvalue="">北京</option> <optionvalue="">上海</option> <optionvalue="">天津</option> <optionvalue="">河北</option> <optionvalue="">海南</option> </select> <inputtype="search"name=""id=""placeholder="搜索書名/作者名"/><inputtype="button"name=""id=""value="搜索"/> </form> <imgsrc="img/right.png"class="rig"/> </div> </div> <divid="h-d"> <ulclass="mannerclearFIX"> <li> <ahref="index.html">網(wǎng)站首頁</a> </li> <liclass="cy"> <ahref="Bookstorenewproducts.html">書店新品</a> </li> <li> <ahref="Limitedtimepurchase.html">限時購</a> </li> <li> <ahref="Leaderboard.html">排行榜</a> </li> <li> <ahref="Safetyguide.html">安全指南</a> </li> </ul> </div> <!--<hrstyle="background-color:#f07;border-bottom:0pxsolidblack;"/>--> <divid="banner"> <ulclass="box"> <li></li> <li></li> <li></li> </ul> <divid="contain"> <imgsrc="img/j1.jpg"alt=""/> <imgsrc="img/j2.jpg"alt=""/> <imgsrc="img/j3.jpg"alt=""/> </div> </div> <!--<!--酒店預(yù)訂框--> <!--<divclass="jd"> <divclass="yd"> <h3>酒店預(yù)訂</h3> </div> <divclass="yd-x"> <inputtype="radio"name=""id="1"value=""checked="checked"/><labelfor="1">國內(nèi)酒店</label><inputtype="radio"name=""id="2"value=""/><labelfor="2">國際·港澳臺酒店</label><br/>目的地:<inputtype="text"name=""id=""value=""placeholder="河南"/><inputtype="text"name=""id=""value=""placeholder="(選填)酒店名、地標(biāo)、商圈，可組合搜索"/><br/>入住日期:<inputtype="date"value="2018-12-12"/>離店日期:<inputtype="date"value="2018-12-20"/> </div> </div>--> <divclass="zj"> <imgsrc="img/b.jpg"/> <imgsrc="img/j.jpg"/> </div> <!--<hrstyle="background-color:#cf000e;border-top:1pxsolidblack;"/>--> <!--<divclass="trainer"style="text-align:center;"> <imgsrc="img/f.jpg"/> </div>--> <!--<hrstyle="border-top:1pxsolidblack;"/>--> <divclass="foot"> <imgsrc="img/foot.png"style="cursor:pointer;"/> </div> </div> </div> <scripttype="text/javascript"> varbanner=document.getElementById("banner"); varcontain=document.getElementById("contain"); varli=banner.getElementsByTagName("li"); varad=document.getElementById("ad"); varflo=document.getElementsByClassName("fl-top").item(0); varzx=document.getElementById("zx"); console.log(ad); // console.log(li); varimg=contain.getElementsByTagName("img"); for(vari=0;i<li.length;i++){ li[i].value=i; li[i].onclick=function(){ // console.log(i); varthat=this; for(varj=0;j<img.length;j++){ img[j].style.display="none"; } img[that.value].style.display="block"; } } window.onload=function(){ varuserName="xiaoming"; alert("歡迎來到飄香書店！"); } zx.onclick=function(){ zx.style.display="none"; flo.style.display="block"; } ad.

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論