學習CSS你必須踩得那些坑（一）
目標css
按照Sketch設計稿，實現一個完整的頁面，但願你學完這一些列課程後，可以系統地掌握CSS，真正玩轉CSShtml
課程內容web
首先下載素材文件（Windows用戶能夠下載pdf版）app
設計稿編輯器
用Sketch打開文件後（可能會出現找不到字體的問題，字體下載），你能夠經過commad+ 1 將Artboard縮放至視口大小。字體
按住control + L能夠顯示出柵格系統，柵格系統能夠幫你快速排版。ui
若是你不熟悉sketch，想了解更多，同時不佔用你寫代碼的時間，能夠看看這篇用Sketch製做登陸頁面的教程。atom
咱們以後會單獨推送一期sketch的教程，如今仍是主要關注代碼。scala
準備工做設計
新建一個html文件和css文件
├── css
│ └── style.css
└── index.html
頁面模版
還記得在HTML的課程中，爲了保持代碼的一致性並節省時間，保存的html模板麼
大多數編輯器都容許你按照本身的風格定製模板
若是你用的atom，參考atom代碼補全snippets配置。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>CSS Lesson 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
</body>
</html>
- 1. 學習CSS你必須踩得那些坑（一）
- 2. 學習CSS你必須踩得那些坑（六）
- 3. 學習CSS你必須踩得那些坑（二）
- 4. 學習CSS你必須踩得那些坑（三）
- 5. 學習CSS你必須踩得那些坑（四）
- 6. 學習CSS你必須踩得那些坑（五）
- 7. 實習踩過得那些坑(四)
- 8. 學習Linux踩過的那些坑
- 9. 初學編程須知：那些程序員必須知道的「坑」，你踩了多少
- 10. 你必須要知道的golang那些坑
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Kotlin學習（一）基本語法
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。