【正文】 lia/aspanem/em/span/li /ul /section div id=top img/ /div footer p/p /footer /body /html （ 2） 由于代碼的重用性，欄目頁和內容頁中新增使用的 HTML5 標簽為： time/time article/article 文件頭代碼的實現 為了實現在移動設備的顯示，需要在文件頭里加上以下標簽，使頁面匹配設備的寬度，更好的讓頁面顯示： meta name=viewport content=width=devicewidth,initialscale=,minimumscale=,maximumscale=2.0,userscalable=yes / 實現頁面的主要布局和匹配屏幕的大小 實現頁面的主要布局 聊城大學本科畢業(yè)論文（設計） 11 對于手機網站的布局， CSS 大多采用百分比的布局，并且內容大多居中顯示，由于篇幅的原因，展示一些主要標簽的布局： *, html { padding: 0px。 margin: 0px。 } body { fontfamily: Microsoft YaHei,Arial,Helvetica,sansserif。 width: auto。 maxwidth: 960px。 _width:expression((||ntWidth)960?960px:)。 background: none。 textalign: center。 margin: auto。 fontsize: 100%。 color: 000。 } img { border: none。 } header, nav, footer, section, article { display: block。 } h1, h2 { fontsize: 100%。 fontweight: bold。 } ul { liststyle: none。 } a { color: 000。 textdecoration: none。 outline: none。 } a:hover { 聊城大學本科畢業(yè)論文（設計） 12 color: 000。 textdecoration: underline。 } footer { margin: 0 auto。 margintop: 10px。 width: auto。 maxwidth: 960px。 _width: expression((||)960?960px:)。 padding: 20px 0px。 textalign: center。 background: F3F3F3。 bordertop: solid 1px E3E3E3。 fontsize: 。 color: 666。 } 匹配屏幕的大小 由于不用的設備屏幕大小不同，所以需要不同的布局，用以下代碼來識別屏幕的寬度，對于不同寬度的 設備，采用不同的 CSS 布局： @media screen and (maxwidth:479px) { nav { display: none。 } nav ul a { width: %。 } } @media screen and (minwidth:480px) and (maxwidth:639px) { nav { display: none。 } nav ul a { width: %。 } } @media screen and (minwidth:640px) and (maxwidth:767px) { nav { 聊城大學本科畢業(yè)論文（設計） 13 display: none。 } nav ul a { width: 25%。 } } @media screen and (minwidth:768px) and (maxwidth:960px) { nav { display: none。 } nav ul a { width: 25%。 } } 實現頁面的交互和檢測不同的設備 實現頁面的交互 由于 jQuery 庫的功能強大并且好多自帶的函數使用起來十分方便，所以決定采用調用 jQuery 的方式實現網頁交互部分的制作，調用 jQuery 的 JavaScript部分代碼如下： $(function(){ $(navbtn).click(function(){ $(nav).toggle()。 })。 $(goTopBtn).click(function(){ $(39。body,html39。).animate({scrollTop:0},500)。 })。 (gotoBack).onclick=function() { ()。 return false。 } $(.more).click(function(){ $(this).hide()。 $(this).next().toggle()。 })。 })。 實現檢測不同的設備 由于許多同學還會使用電腦瀏覽學院的網站，本設計采取了兼容的方式，保留了原學院網站，通過使用 JavaScript 和正則表達式來進行設備匹配，從而決定用戶是否跳轉到手機版網站。設備匹配的 JavaScript 代碼如下： script 聊城大學本科畢業(yè)論文（設計） 14 if(((/(iPhone|iPod|Android|ios|iOS|iPad|Backerry| WebOS|Symbian|Windows Phone|Phone)/i))) { (phone/)。 } /script 第 4章 網站的測試與維護 網站的測試 本設計采用 IIS 服務器和局域網進行測試，需將站點文件夾復制到根目錄下，然后設置 IP 地址為全部未分配，為了保證手機的連接到網站，需要把防火墻關閉。（設置如 圖 1圖 13 所示） 圖 13 IIS 配置 聊城大學本科畢業(yè)論文（設計） 15 圖 14 防火墻設置 網站的維護 由于該網站是調用已有學院網站動態(tài)的 的代碼，并且該網站使用的是已有的數據庫，所以該網站可以和已有的學院網站一起維護，設置一個管理員即可，既節(jié)約了維護成本，又保證了該網站的長期有效的運行。 聊城大學本科畢業(yè)論文（設計） 16 結束語 基于 智能手機顯示的網站 實現是一項較為復雜而繁瑣的工作，它設計到很多細節(jié)和技術。本 設計 以 HTML5 和 技術 為基礎，立足于 廣大同學用智能手機瀏覽學院網站的需要 ，設計了 手機版的學院網站 。 作者首先對 HTML5 和 技術 進行介紹，然后對 手機網站 的需求進行分析，并在需求分析的基礎上給出了 網站 的 設計 總體架構；在前面工作的基礎上，詳細敘述了 手機網站 主要 布局 的實現過程和關鍵技術。該 設計 可以有效地解決 學生利用手機瀏覽學院網站字跡不清、顯示不全 等問題，真正 實現學生的移動上網學習 。 該 網站 不可避免的存在一定的不足，需要進行不斷的修正和完善： （ 1） 網站顏色使用的是純色，使網站頁面并不是那么美觀 。 （ 2） CSS 代碼的不夠精煉、使用 第三方的庫使加載速度減慢 。 （ 3） 由于 測試的瀏覽器不多 ，網站的瀏覽器兼容性 可能 不足。 聊城大學本科畢業(yè)論文（設計） 17 參考文獻 [1]布拉德福 ,海涅 ,高京 . 深入理解 HTML： 語義 、 標準與樣式 [M]. 電子工業(yè)出版社， . [2]劉欣 ,王雨竹 . HTML5 入門經典 [M]. 機械工業(yè)出版社， 2020. [3]庫波 ,汪曉青 . HTML5 與 CSS3 網頁設計 [M]. 北京理工大學出版社， . [4]Brad Dayley. jQuery 與 JavaScript 入門經典 [M]. 人民郵電出版社 ,. [5] W3School. HTML 系列教 程 [EB/OL]. 聊城大學本科畢業(yè)論文（設計） 1 致謝 本畢業(yè)設計能夠順利完成，離不開 于連民 老師的悉心指導，本課題從選題到設計和最后的撰寫， 他 都給予悉心的指導和幫助。 同時， 畢業(yè)設計在實驗室制作時，許多老師都給了許多合理的建議和指導，讓這個設計更加的完善，也讓我從中受益匪淺，感謝這些老師 ！ 此外，感謝聊城大學曾經教過、幫助過和關心過我的所有老師；感謝傳媒技術 學 院 所 有 的 領 導 、 老 師 及 全 體 同 學 的 支 持 、 關 心 和 幫 助 ！聊城大學本科畢業(yè)論文（設計） 1 原文已完。下文為附加文檔，如不需要，下載后可以編輯刪除，謝謝！ 施工組織設計 本施工組織設計是本著 “一流的質量、一流的工期、科學管理”來進行編制的。編制時，我公司技術發(fā)展部、質檢科以及項目部經過精心研究、合理組織、充分利用先進工藝，特制定本施工組織設計。 一、 工程概況： 西夏建材城生活區(qū) 2 30住宅樓位于銀川市新市區(qū) ，橡膠廠對面。 本工程由寧夏燕寶房地產開發(fā)有限公司開發(fā)，銀川市規(guī)劃建筑設計院設計。 本工程耐火等級二級，屋面防水等級三級，地震防烈度為 8度，設計使用年限 50 年。 本工程建筑面積 :27樓 。30樓 m2。室內地坪177。 以絕對標高 m 為準，總長 27樓 ； 30樓 m?？倢?27樓 ； 30樓 m。設計室外地坪至檐口高度 00m，呈長方形布置，東西向，三個單元。 本工程設計屋面為坡屋面防水采用防水涂料。外墻水泥砂漿抹面，外刷淺灰色墻漆。內墻面除衛(wèi)生間 200 300 瓷磚，高到頂外，其余均水泥砂槳罩面，刮二遍膩子；樓梯間內墻采用 50聊城大學本科畢業(yè)論文（設計） 2 厚膠粉聚苯顆粒保溫。地面除衛(wèi)生間 200 200 防滑地磚，樓梯間 50 厚細石砼 1： 1 水泥砂漿壓光外，其余均采用 50 厚豆石砼毛地面。樓梯間單元門采用樓宇對講門，臥室門、衛(wèi)生間門采用木門，進戶門采用保溫防盜門。本工程窗均采用塑鋼單框雙玻窗，開啟窗均加紗扇。本工程設計為節(jié)能型住宅，外墻均貼保溫板。 本工程設計為磚混結構，共六層?；A采用 C30 鋼筋砼條形基礎，上砌 MU30 毛石基礎，砂漿采用 M10 水泥砂漿。一、二、三、四層墻體采用 M10 混合砂漿砌筑 MU15 多孔磚；五層以上采用 混合砂漿砌筑 MU15 多孔磚。 本工程結構中使用主要材料：鋼材： I 級鋼， II 級鋼；砼：基礎墊層 C10，基礎底板、地圈梁、基礎構造柱均采用 C30，其 余均 C20。 本工程設計給水管采用 PPR 塑料管，熱熔連接；排水管采用UPVC 硬聚氯乙烯管，粘接；給水管道安裝除立管及安裝 IC 卡水表的管段明設計外，其余均暗設。 本工程設計采暖為鋼制高頻焊翅片管散熱器。 本工程設計照明電源采用 BV－ 銅芯線，插座電源等采用BV－ 4 銅芯線；除客廳為吸頂燈外，其余均采用座燈。 二、 施工部署及進度計劃 工期安排 本工程合同計劃開工日期： 2020 年 8 月 21 日，竣工日期：2020 年 7 月 10 日，合同工期 315 天。計劃 2020 年 9 月 15 日前聊城大學本科畢業(yè)論文（設計） 3 完成基礎工程， 2020 年 12 月 30 日完成主體結 構工程， 2020 年 6月 20 日完成裝修工種，安裝工程穿插進行，于 2020 年 7 月 1 日前完成。具體進度計劃詳見附圖－ 1（施工進度計劃）。 施工順序 ⑴ 基礎工程 工程定位線（驗線）→挖坑→釬探（驗坑）→砂礫墊層的施工→基礎砼墊層→刷環(huán)保瀝青 →基礎放線（預檢）→砼條形基礎→刷環(huán)保瀝青 →毛石基礎的砌筑→構造柱砼→地圈梁→地溝→回填工。 ⑵ 結構工程 結構