本课程教你如何从Sketch的设计稿出发，逐步实现一个完整的网页布局，并掌握CSS的各种技巧，包括字体设置、栅格系统应用等，帮助你成为CSS高手。
目标
按照Sketch设计稿，实现一个完整的页面，希望你学完这一些列课程后，能够系统地掌握CSS，真正玩转CSS
课程内容
首先下载素材文件（Windows用户可以下载pdf版）
用Sketch打开文件后（可能会出现找不到字体的问题，字体下载），你可以通过commad+ 1 将Artboard缩放至视口大小。
按住control + L可以显示出栅格系统，栅格系统可以帮你快速排版。
如果你不熟悉sketch，想了解更多，同时不占用你写代码的时间，可以看看这篇用Sketch制作登录页面的教程。
我们之后会单独推送一期sketch的教程，现在还是主要关注代码。
准备工作
新建一个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>
扫一扫
936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
