Ⅰ 精靈圖的導入是用img還是background
方法1.在圖片的外面加上一個div,如果是圖片要佔整行，那麼這個div不需要加什麼樣式；如果是和其他元素共佔一行，那麼這個div必須是display：inline-block,而裡面的img圖片只要設置width:100%;讓圖片自適應外層的DIV，而div則自適應更外層的寬度，這個方法不存在IE8內不存在兼容性問題（IE6以下不兼容）。
方法2.在布局上和方法一一樣，但是在導入圖片和展示圖片上有點差異，即用background導入圖片，用background-size來控制圖片的展示。
Ⅱ 什麼是精靈圖在css中如何使用精靈圖其有什麼優缺點
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以並發，但是也有限制，一般瀏覽器都是6個。對於未來而言，就不需要這樣做了，因為有了`http2`。
具體請查看「background-image」，「background- repeat」，「background-position」的使用方法
Ⅲ 現在做網頁前端的學習路線是什麼
初學者必看干貨web前端學習路線圖，隨著移動互聯網的發展，web前端逐漸受到企業的重視，前端開發人員的薪資也水漲船高，越來越多的人看好前端行業的發展，想要轉行加入。下面，給大家分享一份web前端學習路線圖，希望對初學者有所幫助。
Web前端行業的發展，讓前端人員能完成比以前更多的職責范圍，所以未來前端可以寬口徑就業，前景非常好。除此之外，目前web前端工程師日均崗位缺口超50000，平均薪資10820元/月。
對於零基礎的人而言，要怎麼學習web前端呢？
1、前端頁面重構。主要內容為PC端網站布局、Photoshop工具及切圖、H5移動端網頁布局、HTML5+CSS3新特性與交互。學習目標是完成PC端網站布局，可實現響應式布局，一套代碼適配PC端、移動端、平板設備等。
2、前後端網頁交互。主要內容為JavaScript語法全面進階、ES6到ES10新語法實踐、jQuery應用及插件使用、設計模式及插件編寫、封裝JS工具庫及WebAPIS、AJAX+PHP+MySQL前後端交互、前端工程化與模塊化應用以及PC端全棧開發項目等。學習目標是可以掌握前端工程化工具，如git、gulp、webpack等，搭建項目及開發項目。
3、Node.js+前端框架。主要內容為Node.js全面進階、Koa2+MongoDB搭建服務、Vue.js框架、React.js框架、小程序雲開發與小程序框架、原生APP與混合APP、數據可視化與桌面應用等。學習目標是掌握桌面應用及可視化大數據，實現復雜數據展示類項目，能夠獨立完成前後台相關功能，勝任HTML5全棧開發工程師職位。
很多學習web前端的朋友都希望在學成後能找到一份滿意的工作，所以我們在學習過程中一定要注意實戰經驗的積累，如果你所學的東西對企業沒有用，那你所做的一切都是無用功。
Ⅳ 有沒有哪位在兄弟連培訓過html5前端開發，請問html5培訓的課程大綱可以分享一下么
以下是課程大綱，可以參考一下
(1)HTML5+CSS3
經典表格布局製作簡歷
1. HTML5介紹 2. HTML5發展史 3. HTML5簡介 4. HTTP協議介紹 5. HTTP消息類型 6. 互聯網發展形式 7. web開發所需要的構件
8. 編輯器的使用 9. HTML基本語法與規范(標簽元素、屬性) 10. 第一個HTML網頁 11.表格標簽
規范代碼盒模型布局小米等網站
1. 文檔頭和編碼聲明 2. 基礎標簽 3. 文本類標簽 4. 列表標簽 5. 語義化標簽的使用 6. 字元實體 7. 表格標簽 8. HTML5標簽的兼容處理9. HTML5標簽SEO的作用 10. HTML5表單新特性 11. 多媒體標簽
3D旋轉+動畫製作正方體
1. CSS的定義 2. CSS引入 3. CSS選擇器 4. CSS3與CSS2的區別 5. 長度單位 6. 顏色單位 7. 常用屬性 8. CSS屬性
流行的pc端，App頁面響應式布局
1. W3C盒子模型 2. Div+CSS網頁布局 3. 彈性盒子 4. HTML5兼容處理 5. 使用HTML5布局元素的布局 6. Media Query響應式布局 7. 百分比網頁布局
工作要求，實戰大型電商網站靜態頁面
1. PS切圖 2. 精靈圖 3. CSS重製樣式表Reset CSS、 Normalize.css 4. CSS命名規范，CSS常用名
(2)JavaScript jQuery實例 實戰項目
前端核心語言javascript語法
1. JavaScript簡介 2. 在頁面中使用JavaScript 3. JavaScript的語法 a) 變數聲明規范 b)語句結束 c)腳本注釋 d)代碼塊 e)數據類型 f)類型轉換 g)運算符 h)流程式控制制語句 i)函數 j)內置對象
原生Js功能開發
1. 更換頁麵皮膚 2. 五彩小球 3. 隨機點名器 4. 輪播圖 5. 網站時間顯示 6. 商城搶購活動 7. 購物車的全選、反選、全不選 8. 選項卡前端後台交互功能開發9. 進度條 10. 拖拽div 11. 放大鏡 12. 城市地址二級、三級聯動 13. 隨機浮動廣告 14. 無縫連接 15. 仿網路登錄
Jquery庫交互特效開發
1. JQuery簡介 2. JQuery安裝 3. JQuery CSS操作 4. JQuery選擇器 5. JQuery篩選 6. JQuery html 文檔處理 7. JQuery事件 8. JQuery效果 9. JQuery Ajax 10. JQuery其他操作 11. JQuery插件
實戰進階-瞄準市場
1.PS切圖 2.CSS重置樣式表 3.網頁規范 4.兼容性 5.SASS 6.Compass精靈圖 7.代碼壓縮 8.常見網站效果 9.rem相對大小布局
(3)Node.JS MongoDB Express Vue.js
Vue.js前端熱組件化開發框架
1. 介紹 2. 安裝 3. 模板/數據綁定 4. Class/Style綁定 5. 事件 6. 組件 7. 混合 8. 插件 9. 服務/路由
後端Js-Node.js搭建前端腳手架
1. Node.js簡介 2. Node.js安裝 3. NPM工具使用 4. 模塊、Package 5. 回調函數 6. Buffer，事件 7. 文件處理模塊 8. Http，URL，Querystring Path等模塊 9. POST/GET請求 10. 安裝模板引擎
Mongodb資料庫操作
1. NoSQL基礎概念 2. MongoDB 簡介 3. 資料庫、集合、文檔概念 4. 資料庫操作 5. 集合操作 6. 文檔CURD操作 7. 條件操作符 8. Limit與Skip方法 9. 排序 10. Node.Js的mongoose模塊 操作MongoDB
基於node.js搭建express伺服器
1. Express 簡介 2. 安裝 Express 3. 路由 4. 中間件 5. 視圖 6. 模板引擎 7. AJAX 8. 跨域/JSONP 9. 搜索分頁 10. 文件上傳 11. 登陸注冊
實戰-大型單頁應用
1. Web Socket 2. SSE 3. 網路爬蟲(實現多人聊天時，伺服器主動推送消息) 4. 常用工具使用Webpack 5. 壓縮混淆 6. AMD/CMD規范 7. 結合Vue.JS實現單頁面應用 8. Web APP 打包
(4)HTML5新特性 微信開發 微信小程序 學生項目
HTML5新特性
1. 音/視頻 API 2. 本地存儲LocalStorage/SessionStorage 3. Geolocation(地理定位) 4. 網路地圖API 5.瀏覽器多線程Web Workers 6. 應用程序緩存 (Application Cache) 7. Canvas 畫圖、SVG 8. 拖拽事件、API 9. FileReader API 10. PAJAX 11. Bootstrap 12.插件：Swiper、圖表、Iconfont
微信公眾號開發
1. 接入微信公眾平台 2. 賬號申請 3. 微信JSSDK使用 4. 分享介面 5. 圖像介面 6. 音頻介面 7. 智能介面 8. 設備信息 9. 地理位置微信小程序開發10. 界面操作 11. WEUI框架 12. 微信小程序開發 13. 創建項目 14. 工具 15. 框架 16. WXML 、 WXSS 17. 組件 18. API
實戰--團隊協作工具
1. Git協作 2. 前端項目規范化 3. H5新特性 4. 即時通訊 5. 互聯網服務介面調用