您的位置：首页 > Web前端 > CSS

学习CSS你必须踩得那些坑（一）

2016-12-26 00:00 183 查看

目标

按照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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Sketch CSS 模版

相关文章推荐

新的分享

章节导航