FrontDream的博客_JavaScript,PHP,Asp,其他Web开发,Html/CSS,jQuery,Sublime text 3,HTML/HTML5,CSS/CSS3

sass学习笔记（五）：sass的运算

（一）、加法加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：.box { width: 20px + 8in; }编译出来的 CSS:.box { width: 788px; }但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：.box

运算

sass

转载精选 2016-09-07 15:50:22 690 阅读

sass学习笔记（四）：混合宏VS继承VS占位符

混合宏主要用来传递参数，但sass编译相同的混合宏时，不会将相同的样式合并。会产生冗余代码。继承主要用于不需要传递参数的场合，且已经存在基类，编译后会将相同的样式合并，不足：不论基类是否被调用，已经声明的基类都会产生代码。占位符与继承类似，但是没有被调用的占位符不会产生代码。

继承

占位符

sass

原创 2016-09-07 14:45:29 655 阅读

sass学习笔记（三）：sass的变量及嵌套

sass的变量1、声明变量$width: 300px;如上所示，Sass 的变量包括三个部分：声明变量的符号“$”、变量名称、赋予变量的值。2、普通变量与默认变量普通变量定义之后可以在全局范围内使用。默认变量仅需要在值后面加上 !default 即可。例如：$baseLineHeight:1.5 !default; body{ l

sass嵌套

sass变量

原创 2016-09-07 11:01:01 725 阅读

sass学习笔记（二）：sass的不同样式风格的输出方法

sass的不同样式风格的输出方法1、嵌套式nestedSass 提供了一种嵌套显示 CSS 文件的方式。例如nav { ul { margin: 0; padding: 0; list-sty

sass输出

原创 2016-09-07 10:47:13 672 阅读

sass学习笔记（一）：sass在windows下的安装、编译

一、sass在windows下的安装在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，可以在这里下载:https://www.ruby-lang.org/en/downloads/Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板Start Command

安装

sass

sass编译

原创 2016-09-07 10:23:48 2239 阅读

CSS画三角形的原理

今天遇到一个无序列表，每一行的开始都要用一个小三角形，像这样，如果在以前，我肯定直接放图片进去了，然而学习了CSS后，我认为CSS一定能完成这个小图形。关键需要把元素的宽度、高度设为0。原理如下：首先，写一个with和height都是40px的div，border宽度也是40px，看看是什么效果？HTML代码：<div class="triangle"></div>

css

三角形

border

原创 2016-08-27 21:01:14 623 阅读

CSS-first-letter实现首字下沉

在完成百度IFE任务6时，有一个需要段落中首字下沉的任务，如图：html代码为：<div class="ins"> <p>段落内容...</p> </div>css代码为：.ins:first-letter { font-size: 70px; color:

css

first

letter

原创 2016-08-27 20:42:39 630 阅读

首字母字号变大而不影响其下划线粗细的方法

目的样式：全部大写字母，带下划线，第一个字母24px，其余字母略小，约19px。Html标签：<p class="about">about</p> <p class="about">technologe</p>css样式:.about{

CSS

首字母

变大

原创 2016-08-27 10:44:57 1430 阅读 1收藏

css中font的简写

字体属性主要包括下面几个:font-family，font-style，font-variant，font-weight，font-size，fontfont-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;font-variant (字体变化

css

font

字体缩写

转载精选 2016-08-26 22:28:38 646 阅读

min-width，设置最小宽度

在完成百度IFE任务五时，遇到一个布局问题，百思不得其解。问题是这样的：任务五是一个两栏布局，左栏自适应，右栏固定宽度。我的解决方式是：右栏固定宽度，float:right，左栏通过margin-right设置一定的右外边距，这样完成了布局。然而测

width

min

最小宽度

原创 2016-08-26 21:04:15 2053 阅读

绝对定位、相对定位、固定定位

转载自慕课网。绝对定位：如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

定位

absolute

relative

position

转载精选 2016-08-26 20:46:11 1138 阅读

CSS布局的一般步骤

在开始把设计转换为功能完整的模板时，设计者往往很像马上开始编写页面和处理图像。但是，这样做很快就会遇到麻烦。相反，先做一点儿计划可以避免许多问题。正如俗话说的，三思而后行。要想创建可伸缩且容易维护的CSS系统，首先应该检查设计，寻找重复的模式，这包括结构中的模式或在站点种元素反复出现的方式。在这个阶段，

CSS布局布局

转载精选 2016-08-22 17:39:22 541 阅读

关于CSS中隐藏内容方法的思考

正在读《精通CSS》，很多样式需要用到内容隐藏，比如平时无内容，鼠标悬停时显示出内容。书中常用的方法是用text-indent:-1000em、margin-left:-1000em将元素隐藏到屏幕边缘之外，而display:none和visibility:hidden、overflow：hidden也可以做到隐藏，那么这几种用法有哪些利弊呢？1.display:non

css

display

隐藏

原创 2016-08-20 17:35:29 616 阅读

遵循编码规范--养成良好的编码习惯

基本准则：符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.目前写代码开始遵循以下代码规范：https://github.com/ecomfe/spec

html;编码规范

转载精选 2016-08-10 21:06:19 721 阅读

对于语义化的理解

初学html，总是听到这样一个词——语义化，语义化是什么呢，在我看来，语义化是让搜索引擎、浏览器等更好的理解我们的代码语言，更清楚地明白每个标签的用途（在什么情况下使用此标签合理）。比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 e

语义化

原创 2016-07-03 07:45:39 571 阅读

【1】从零开始：安装sublime text 3

因为下载的是网上的破解版，发现package control居然用不了，插件都装不了，一气之下删掉了破解版，从官网重新下载了编辑器。1.安装编辑器，下载地址：https://www.sublimetext.com/3，选择适用的版本，安装完成。2.安装package control，地址 ht

control

package

There

原创 2016-07-02 21:50:40 410 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

FrontEndMyDream

sass学习笔记（五）：sass的运算

sass学习笔记（四）：混合宏VS继承VS占位符

sass学习笔记（三）：sass的变量及嵌套

sass学习笔记（二）：sass的不同样式风格的输出方法

sass学习笔记（一）：sass在windows下的安装、编译

CSS画三角形的原理

CSS-first-letter实现首字下沉

首字母字号变大而不影响其下划线粗细的方法

css中font的简写

min-width，设置最小宽度

绝对定位、相对定位、固定定位

CSS布局的一般步骤

关于CSS中隐藏内容方法的思考

遵循编码规范--养成良好的编码习惯

对于语义化的理解

【1】从零开始：安装sublime text 3