文档章节

学习CSS你必须踩得那些坑(二)

博为峰教研组
 博为峰教研组
发布于 2016/12/26 18:52
字数 259
阅读 15
收藏 0

利用browser-sync实时刷新页面

为了省去每次修改代码后都要手动刷新页面,我习惯使用browser-sync监听文件,自动刷新浏览器

1. 安装Browsersync
npm install -g browser-sync

2. 运行Browsersync
browser-sync start --server --files index.html --files "css/*.css"

引入normalize.css

Normalize.css,保证默认元素在不同浏览器上变现一致。

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。——来,让我们谈一谈 Normalize.css

导航页面

根据设计稿,我们把整个页面分为三个部分,头部、内容区域、页脚

<header class = "site__header">      

</header>

<main class = "site__main">      

</main>

<footer class = "site__footer">

 </footer>

BEM作为CSS的命名规范,虽然site__header丑了点,但是在你代码越来越多的时候,这个东西可以让你的代码没那么混乱。

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
学习CSS你必须踩得那些坑(六)

这里加了边框方便调试: · 为了能够设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height):我们设置行内元素<a> display为inline-block 行内元素是就像水一样,垂直方向...

博为峰教研组
2016/12/26
3
0
10、less的引用及公共变量的抽离

前言:GitHub:https://github.com/Ewall1106/mall 一、什么是less? less是什么自然不用多言,乃一个css预编译器,可以扩展css语言,添加功能如如允许变量(variables),混合(mixins),函数(fu...

Ewall_
2018/06/15
0
0
学习CSS你必须踩得那些坑(一)

目标 按照Sketch设计稿,实现一个完整的页面,希望你学完这一些列课程后,能够系统地掌握CSS,真正玩转CSS 课程内容 首先下载素材文件(Windows用户可以下载pdf版) 设计稿 用Sketch打开文件...

博为峰教研组
2016/12/26
13
0
初识React:仿网易公开课(react+antd)

前言 最近开始学习React,于是便仿了一下网易公开课,来加强自己对React的理解,在这里和大家分享一下我 这几天coding的React项目和自己踩的一些坑 使用到的技术栈 数据请求:axios 后台搭建...

Gaofeng
2018/08/06
0
0
Next.js 踩坑入门系列(四)— 中期填坑

Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) 引入状态管理Redux 陆续更新... 填坑 第一坑 - params形式路由 上一篇在...

luffyZhou
2018/09/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python登录豆瓣并爬取影评

上一篇我们讲过Cookie相关的知识,了解到Cookie是为了交互式web而诞生的,它主要用于以下三个方面: 会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息) 个性化设置(如...

猪哥66
18分钟前
1
0
常见排序的指针实现【C++ Code】

本来是想加上传cmp函数的,后来也懒得写了 然后基数排序虽然写的是模板类,但也只是支持整数了… #include <cstdio> #include <cstring> #include <algorithm> #include <typeinfo> using name......

shzwork
今天
3
0
OSChina 周一乱弹 —— 带这么多钱,你要泡我吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :白给?#今日歌曲推荐# 分享Lana Del Rey的单曲《Yayo》: 《Yayo》- Lana Del Rey 手机党少年们想听歌,请使劲儿戳(这里) @红薯...

小小编辑
今天
1K
14
搭建tftp服务

前言: 最近整理一些以前的学习笔记。 过去都是存储在本地,此次传到网络留待备用。 TFTP服务: TFTP:Trivial File Transfer Protocol 不重要文件传输协议 主要用来传送小文件,不支持认证和...

迷失De挣扎
今天
4
0
rest 的理解

rest:表现层状态转移。 什么是restful协议?https://en.wikipedia.org/wiki/Representational_state_transfer 使用restful的好处。 Rest是一种体系结构样式,他定义了一组用于创建web服务的...

xiaoxiao_go
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部