【正文】 寬度的 設(shè)備，采用不同的 CSS 布局： media screen and (maxwidth:479px) { nav { display: none。 background: F3F3F3。 maxwidth: 960px。 textdecoration: underline。 } a { color: 000。 } header, nav, footer, section, article { display: block。 margin: auto。 maxwidth: 960px。 （ 1） 首頁的主要布局 HTML5 標(biāo)簽如下： 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 9 !DOCTYPE html html head title/title /head body header nav ul lia/a/li lia/a/li lia/a/li lia/a/li /ul /nav /header section div class=tabs span/span span/span span/span span/span /div div ul lia/aspanem/em/span/li lia/aspanem/em/span/li lia/aspanem/em/span/li /ul ul 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 10 lia/aspanem/em/span/li lia/aspanem/em/span/li lia/aspanem/em/span/li /ul ul lia/aspanem/em/span/li lia/aspanem/em/span/li lia/aspanem/em/span/li /ul /section div id=top img/ /div footer p/p /footer /body /html （ 2） 由于代碼的重用性，欄目頁和內(nèi)容頁中新增使用的 HTML5 標(biāo)簽為： time/time article/article 文件頭代碼的實(shí)現(xiàn) 為了實(shí)現(xiàn)在移動設(shè)備的顯示，需要在文件頭里加上以下標(biāo)簽，使頁面匹配設(shè)備的寬度，更好的讓頁面顯示： meta name=viewport content=width=devicewidth,initialscale=,minimumscale=,maximumscale=2.0,userscalable=yes / 實(shí)現(xiàn)頁面的主要布局和匹配屏幕的大小 實(shí)現(xiàn)頁面的主要布局 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 11 對于手機(jī)網(wǎng)站的布局， CSS 大多采用百分比的布局，并且內(nèi)容大多居中顯示，由于篇幅的原因，展示一些主要標(biāo)簽的布局： *, html { padding: 0px。 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 6 網(wǎng)站首頁的設(shè)計 網(wǎng)站的首頁主要是網(wǎng)站的導(dǎo)航，和主要內(nèi)容的展示，設(shè)計主要包括網(wǎng)站的圖標(biāo)設(shè)計、網(wǎng)站的導(dǎo)航設(shè)計、網(wǎng)站的欄目設(shè)計、網(wǎng)站的底部說明設(shè)計（如圖 圖 圖 8 所示 ）。 由于考慮到網(wǎng)站需要聯(lián)網(wǎng)測試，在沒有足夠多的域名和 IP 的情況下，決定采用局域網(wǎng)連接的方式，將主機(jī)和手機(jī)放置在同一局域網(wǎng)下，用手機(jī)連接主機(jī)，這樣既減少了成本，并且加快了連接的速度。 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 2 第 1 章 需求分析 為了明確用戶需求和本 網(wǎng)站設(shè)計 要求，在進(jìn)行開發(fā)之前進(jìn)行了系統(tǒng)的需求分析。 互聯(lián)網(wǎng)的發(fā)展，使 HTML5 和 不僅僅是兩項(xiàng)新的 Web技術(shù)標(biāo)準(zhǔn)，更代表了下一代 HTML 和 CSS 技術(shù)，未來的發(fā)展前景已經(jīng)可以預(yù)見， HTML5 必將被越來越多的 Web 開 發(fā)人員所使用，成為 web 前端開發(fā)的主流，所以本設(shè)計對于學(xué)習(xí)和使用 HTML5 和 技術(shù)具有前瞻性和重大的意義。JavaScript。本研究基于已有的學(xué)院網(wǎng)站在手機(jī)上顯示會出現(xiàn)字跡小，顯示不全的問題，利用 HTML5 和 等技術(shù)設(shè)計和實(shí)現(xiàn)手機(jī)版網(wǎng)站，該網(wǎng)站具有 界面友好、功能清晰、支持跨平臺、跨媒體瀏覽等特點(diǎn) ，較好的滿足了同學(xué)使用手機(jī)瀏覽學(xué)院網(wǎng)站信息的需求。除文中已經(jīng)注明引用的內(nèi)容外，論文中不含其他人已經(jīng)發(fā)表或撰寫過的研究成果，也不包含為獲得聊城大學(xué)或其他教育機(jī)構(gòu)的學(xué)位證書而使用過的材料。對本文的研究做出重要貢獻(xiàn)的個人和集體，均已在文中以明確方式標(biāo)明。 本研究所采用的 網(wǎng)頁設(shè)計 和關(guān)鍵技術(shù)也可以為其他 手機(jī)網(wǎng)站 的 設(shè)計和開發(fā) 提供參考和借鑒。 JQuery。 本設(shè)計從學(xué)院網(wǎng)站出發(fā)，從已有的學(xué)院網(wǎng)站的基礎(chǔ)上進(jìn)行網(wǎng)站的設(shè)計開發(fā)。下 面將從功能需求、環(huán)境需求、用戶界面需求 三 個方面詳細(xì)地進(jìn)行系統(tǒng)需求分析。 圖 2 網(wǎng)站結(jié)構(gòu) 簡圖 圖 3 網(wǎng)站 IIS 配置 簡圖 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 4 用戶界面需求分析 網(wǎng)站 采用良好的圖形界面、 習(xí)慣化的操作按鈕 和扁平化設(shè)計的思想，使 網(wǎng)站界面簡潔、易于操作，讓 廣大的同學(xué)很容易在手機(jī)設(shè)備上操作 。 圖 6 網(wǎng)站圖標(biāo)和導(dǎo)航設(shè)計 圖 7 網(wǎng)站欄目設(shè)計 圖 8 網(wǎng)站底部說明設(shè)計 圖 9 欄目導(dǎo)航設(shè)計 網(wǎng)站欄目頁的設(shè)計 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 7 網(wǎng)站的欄目頁 主要 用來顯示某一欄目的主要內(nèi)容，設(shè)計主要包括欄目導(dǎo)航設(shè)計、內(nèi)容列表設(shè)計、返回頂部設(shè)計三個部分 。 margin: 0px。 _width:expression((||ntWidth)960?960px:)。 fontsize: 100%。 } h1, h2 { fontsize: 100%。 textdecoration: none。 } footer { margin: 0 auto。 _width: expression((||)960?960px:)。 bordertop: solid 1px E3E3E3。 } nav ul a { width: %。 } nav ul a { width: 25%。 })。 })。 $(this).next().toggle()。設(shè)備匹配的 JavaScript 代碼如下： script 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 14 if(((/(iPhone|iPod|Android|ios|iOS|iPad|Backerry| WebOS|Symbian|Windows Phone|Phone)/i))) { (phone/)。本 設(shè)計 以 HTML5 和 技術(shù) 為基礎(chǔ)，立足于 廣大同學(xué)用智能手機(jī)瀏覽學(xué)院網(wǎng)站的需要 ，設(shè)計了 手機(jī)版的學(xué)院網(wǎng)站 。 （ 2） CSS 代碼的不夠精煉、使用 第三方的庫使加載速度減慢 。下文為附加文檔，如不需要，下載后可以編輯刪除，謝謝！ 施工組織設(shè)計 本施工組織設(shè)計是本著 “一流的質(zhì)量、一流的工期、科學(xué)管理”來進(jìn)行編制的。 本工程耐火等級二級，屋面防水等級三級，地震防烈度為 8度，設(shè)計使用年限 50 年。 以絕對標(biāo)高 m 為準(zhǔn)，總長 27樓 ； 30樓 m。外墻水泥砂漿抹面，外刷淺灰色墻漆。本工程窗均采用塑鋼單框雙玻窗，開啟窗均加紗扇。一、二、三、四層墻體采用 M10 混合砂漿砌筑 MU15 多孔磚；五層以上采用 混合砂漿砌筑 MU15 多孔磚。 本工程設(shè)計照明電源采用 BV－ 銅芯線，插座電源等采用BV－ 4 銅芯線；除客廳為吸頂燈外，其余均采用座燈。 施工順序 ⑴ 基礎(chǔ)工程 工程定位線（驗(yàn)線）→挖坑→釬探（驗(yàn)坑）→砂礫墊層的施工→基礎(chǔ)砼墊層→刷環(huán)保瀝青 →基礎(chǔ)放線（預(yù)檢）→砼條形基礎(chǔ)→刷環(huán)保瀝青 →毛石基礎(chǔ)的砌筑→構(gòu)造柱砼→地圈梁→地溝→回填工。 三、 施工準(zhǔn)備 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 4 現(xiàn)場道路 本工程北靠北京西路，南臨規(guī)劃道路，交通較為方便。 ⑶ 現(xiàn)場設(shè)木工鋸，木工刨各 1 臺。具體配電箱位置詳見總施工平面圖。 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 5 勞動力安排 ⑴ 結(jié)構(gòu)期間： 瓦工 40 人；鋼筋工 15 人；木工 15 人；放線工 2 人；材料1 人；機(jī)工 4 人；電工 2 人；水暖工 2 人；架子工 8 人；電焊工 2 人；壯工 20 人。 C、根據(jù)施工組織設(shè)計中進(jìn)度控制測量工作進(jìn)度，明確對工程服務(wù)，對工程進(jìn)度負(fù)責(zé)的工作目的。 C、控軸線沿結(jié)構(gòu)逐層彈在墻上，用以控制樓層定位。 B、在墊層上進(jìn)行基礎(chǔ)定位放線前，以建筑物平面控制線為準(zhǔn)，校測建筑物軸線控制樁無誤后，再用經(jīng)緯儀以正倒鏡挑直法直接投測各軸線。 C、標(biāo)高豎向傳遞設(shè)置 3 個標(biāo)高點(diǎn)，以其平均點(diǎn)引測水平線折平時，盡量將水準(zhǔn)儀安置在測點(diǎn)范圍內(nèi)中 心位置，進(jìn)行測聊城大學(xué)本科畢業(yè)論文（設(shè)計） 7 設(shè)。 人工開挖時，由技術(shù)員抄平好水平控制小木樁，用方鏟鏟平。 砂漿：177。 C、砌筑采用滿鋪滿擠“三一砌筑法“，要求灰漿飽滿，聊城大學(xué)本科畢業(yè)論文（設(shè)計） 8 灰縫 8－ 12mm。 G、磚墻按圖紙要求每 50mm設(shè)置 2φ 6 鋼筋與構(gòu)造柱拉結(jié)，具體要求見結(jié)構(gòu)總說明。 ⑶ 板中受力鋼筋搭接， I 級鋼 30d， II 級鋼 40d，搭接位置：上部鋼筋在跨中 1/3 范圍內(nèi)，下部鋼筋在支座 1/3 范圍內(nèi)。 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 9 ⑸ 所有鋼筋綁扎 ，須填寫隱檢記錄，質(zhì)評資料及目檢記錄，驗(yàn)收合格后方可進(jìn)行下道工序。 ⑵ 澆筑前，對模板內(nèi)雜物及油污、泥土清理干凈。 模板工程 ⑴ 本工程模板采用鋼木混合模板。 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 10 架子工程 ⑴ 本工程采用雙排架子防護(hù)，外設(shè)立桿距墻 2m，里皮距墻 50cm，立桿間距 ，順?biāo)g距 ，間距不大于 1m。 ⑸ 外防 護(hù)架用閉目式安全網(wǎng)進(jìn)行封閉，兩平網(wǎng)塔接和網(wǎng)下口必須綁孔緊密。 將墻面找方垂直線，清理基層 ，然后沖筋，按照圖紙要求，分層找平垂直，陰陽角度方正，然后拉線作灰餅。 墻面涂料基層要求現(xiàn)整，對縫隙微小孔洞，要用膩?zhàn)诱移?，并用砂紙磨平? 層面工程 屋面保溫層及找平層必須符合設(shè)計要求，防水采用防水卷材。 1水、暖、電安裝工程 ⑴ 管道安裝應(yīng)選用合格的產(chǎn)品，并按設(shè)計放線，坡度值及坡向應(yīng)符合圖紙和規(guī)范要求。 ⑷ 燈具、插座、開關(guān)等器具安裝，其標(biāo)高位置應(yīng)符合設(shè)計要求，表面應(yīng)平直潔凈方正。本措施不再述。砂漿的作用：一是鋪平磚的砌筑表面，二是將塊體磚粘接成一個整體。試驗(yàn)研究表明，當(dāng)水平灰縫為 12mm 時，磚砌體的抗壓強(qiáng)度極限，僅為 10mm 厚時的 70－ 75％，所以要保證水平灰縫厚度在8－ 12mm 之間。 聊城大學(xué)本科畢業(yè)論文（設(shè)計） 14 D、要選磚，將過厚的磚剔掉。 規(guī)范規(guī)定：多孔磚砌體，水平灰縫的砂漿飽滿度不得低于80％，這是因?yàn)椋铱p的飽滿度，對砌體的強(qiáng)度影響很大。絕不可加水二次拌合。（約磚塊四周浸水 15mm 左右）。埋入長度從墻聊城大學(xué)本科畢業(yè)論文（設(shè)計） 15 的留槎處算起，每邊均＜ 100cm，末端應(yīng)有彎鉤”見圖。為此宜采用兩種方式予以防治