❶ 網頁前端開發如何寫出整潔的css代碼和切圖到底是個什麼意思
網頁前端開發如何寫出整潔的css代碼和切圖，所指的是基於web的前端開發流程，製作者需要有一定的制圖以及前端代碼基礎。
使用制圖軟體中畫好效果圖。
使用制圖軟體根據頁面製作需求劃分切片，輸出。
使用代碼編寫軟體編寫前端的html、css代碼，整合切圖寫出完整的前端頁面。
前端代碼除了html和css之外，也可以增加js以滿足頁面交互需求。
制圖軟體推薦PS、FW，代碼編寫軟體推薦DW、HBuilder。
❷ 前端的CSS
級聯樣式表（Cascading Style Sheet）簡稱「CSS」，通常又稱為「風格樣式表（Style Sheet）」，它是用來進行網頁風格設計的。比如，如果想讓鏈接字未點擊時是藍色的，當滑鼠移上去後字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統一地控制HTML中各標志的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及創建特殊效果的能力。
❸ web前端，css樣式
-webkit-box、-moz-box、-o-box、-ms-box、box這些都是指同一個屬性即box，前面帶有-號的是分別針對不同的瀏覽器的，其中
-webkit- 針對Chrome和Safari瀏覽器
-moz- 針對FireFox瀏覽器
-o- 針對Opera瀏覽器
-ms- 針對IE瀏覽器
也就是說凡是帶有這樣的前綴的都是這些瀏覽器的私有屬性，只有各自的瀏覽器內部才有效。之所以這樣，是因為有些css屬性是帶有實驗性質的（尤其是css3），各主流瀏覽器尚未對它完全支持，這樣就會使用私有屬性來進行試驗，而其他瀏覽器則會自動忽略該屬性。因此，網頁為了兼容各種不同的瀏覽器，就會把所有的私有屬性都放上去，也包括不帶前綴的標准屬性。而瀏覽器的版本眾多，很可能低版本的瀏覽器對某個屬性處於試驗性質，而高版本則已經完全支持了（也就是說可以不用前綴了），比如box屬性就是如此，因此你把其他帶有前綴的屬性去掉不影響效果。但是，既然是網頁，就不會是只有你一個人看的，要是其他用戶用的是低版本的瀏覽器呢？所以，從兼容性角度出發，你最好不要刪掉這些屬性，除非你能保證其他用戶用的瀏覽器與你的完全一樣。
❹ css的書寫規范，有哪些注意點
命名，製表符，簡寫，縮寫，等
❺ 學習web前端開發，需要掌握哪些知識
第一階段：HTML+CSS/HTML5+CSS3（HTML+CSS、PC端網頁重構、HTML5+CSS3）
第二階段： Javascript（JS數據類型、語法、JS對象、JS內置對象、BOMDOM）
第三階段：Javascript高級/ Ajax/JQ（AJAX、瀏覽器緩存、JS對象高級、ES6、JQuery）
第四階段：前端主流框架（前端工程化、AugularJS、VueJS、React Native、微信小程序）
❻ Web前端面試指導（五十）：CSS樣式書寫有哪些
一、CSS書寫順序
1.位置屬性(position, top, right,z-index, display, float等)
2.大小(width, height, padding,margin)
3.文字系列(font, line-height,letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、CSS書寫規范
1.使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
2.去掉小數點前的「0」
3.簡寫命名
很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！
4.16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。
5連字元CSS選擇器命名規范
1）長名稱或片語可以使用中橫線來為選擇器命名。
2）不建議使用「_」下劃線來命名CSS選擇器，為什麼呢？
輸入的時候少按一個shift鍵；瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）能良好區分JavaScript變數命名（JS變數命名是用「_」）
6.不要隨意使用id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先順序優先與class，所以id應該按需使用，而不能濫用。
7.為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴，讓語義更明了，比如下圖是添加了「.is-」前綴。
三、CSS命名規范
常用的CSS命名規則
頭：header
內容：content/Container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：right
滾動：scroll
內容：content
標簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
注冊：regsiter
狀態：status
投票：vote
合作夥伴：partner
ID的命名-頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
ID的命名-導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
ID的命名-功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：right
四、注釋規范
/* Header */
內容區
/* End Header */
五、注意事項
1.一律小寫;
2.盡量用英文;
3.盡量不縮寫，除非一看就明白的單詞。
六、CSS樣式表文件命名
主要的 master.css
模塊 mole.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css
❼ 前端項目應該如何規劃css結構便於重構和維護
用sass或者less
❽ 前端開發實踐中有哪些常見規范
Javascript編碼規范
HTML編碼規范
CSS編碼規范
Less編碼規范
E-JSON數據傳輸標准
模塊和載入器規范
包結構規范
項目目錄結構規范
圖表庫標准