1. Sass和Compass必备技能之Compass篇-02 模块简介

    1. Layout简介

    http://compass-style.org/reference/compass/layout/

    @import "compass/layout"
    @import "compass/layout/grid-background"
    @import "compass/layout/sticky-footer"
    @import "compass/layout/stretching"
    

    2. CSS3模块

    使用率最高的模块,提高跨浏览器的CSS3效果 http://compass-style.org/reference/compass/css3/

    @import "compass/css3";
    .webdemo-sec{
        @include box-shadow(1px 1px 3px 2px #cfcecf ...
    Tagged as : CSS SASS
  2. Sass和Compass必备技能之Compass篇-01 Compass核心模块概述及Reset模块

    1. Compass核心模块

    images/compass-1.png

    Reset(@import "compass/reset";)和Layout(@import "compass/layout";)并没有包含在compass的核心模块中,需要单独引用。

    @import "compass";包含了CSS3/Helpers/Typography/Utilities模块: - CSS3模块

    2. 使用normalize.css替换reset

    《grunt beginer》

    http://necolas.github.io/normalize.css/

    可以使用compass插件:

    2.1 安装

    gem install compass-normalize

    2.2 在config.rb中引入

    require 'compass-normalize' 注意:config.rb中的require 'compass/import-once/activate'是防止多次引入 ...

    Tagged as : CSS SASS
  3. Sass和Compass必备技能之Sass篇-04 Sass语法介绍(高级篇)

    1. @media

    sass中的@media跟CSS区别:

    sass中的media query可以内嵌在css规则中,在生成CSS的时候, media query 才会被提到样式的最高级

    好处:避免了重复书写选择器或者打乱样式表的流程。

    @mixin col($width){
        @media(min-width: 768px){
            width: $width;
            float: left;
        }
    }
    

    2. @at-root

    指定嵌套的内容生成CSS时,在最底层

    .main-sec{
        font-family: $main-sec-ff;
        @at-root{
            .main-sec-headline{
                font:{
                    family: $main-sec-ff;
                    size: 16px;
                }
            }
    
            .main-sec-detail{
                font-size: 12px;
            }
        }
    }
    

    3. 逻辑

    @mixin col($width){
        @if type-of($width) != number ...
    Tagged as : CSS SASS
  4. Sass和Compass必备技能之Sass篇-03 Sass语法介绍(进阶篇)

    1. 变量操作

    变量操作有两种方式,第一种是直接操作,第二种是通过函数。

    通过函数: - 跟代码块无关的函数,多是自己内置函数,称functions - 可重用的代码块,称mixin: @include和 @extand的方式来应用,

    运算符: >= <= > < == != ()

    CSS3增加了HSL的颜色,SASS会自动转换HSL为RGB,完美解决兼容。

    sass支持@function来声明函数。

    2. 混合器mixin和include

    @mixin来定义混合器 @include来使用混合器

    //声明
    @mixin col-6{
        width: 50%;
        float: left;
    }
    
    //调用
    .webdemo-sec {
        @include col-6(); //括号可以省略
    
        &:hover{
            background-color: #F5F5F5;
        }
    }
    

    2.1 何时使用混合器

    如果你能找到一个很好的短名字来描述属性样式,比如rounded-cornersfancy-font或者no-bullets ...

    Tagged as : CSS SASS
  5. Sass和Compass必备技能之Sass篇-02 Sass语法介绍(基础篇)

    1. sass和scss形式的相互转换

    $sass-convert main.sass main.scss
    或者
    $sass-convert main.scss main.sass
    

    2. 创建应用

    $compass create learn-sass-syntax
    $cd learn-sass-syntax
    $compass watch
    

    3. 语法

    SASS CSS默认都是UTF-8,所以写不写@charset "UTF-8"

    编码问题,如果出现中文编译失败,打开rubygems\gems\sass\lib\sass\engine.rb文件,在require后面添加Encoding.default_external=Encoding.find('utf-8')

    3.1 ...

    Tagged as : CSS SASS
  6. Sass和Compass必备技能之Sass篇-01 安装

    1. ruby安装

    RVM: Ruby Version Manager(Ruby多版本管理器)

    安装RVM

    mac下安装homebrew cakebrew

    $ gem sources --remove https://rubygems.org/
    $ gem sources -a https://ruby.taobao.org/
    $ gem sources -l
    *** CURRENT SOURCES ***
    https://ruby.taobao.org
    
    # 请确保只有 ruby.taobao.org
    $ gem install rails #安装
    $ gem update #更新
    $ gem install sass --version=3.3
    $gem ...
    Tagged as : CSS SASS
  7. HTML\CSS补遗

    1. HTML标签

    1. <strong><em>:有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em><strong>标签。但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong>粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。
    2. <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
    3. <q>标签,短文本引用
    4. <blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。 等等,上一节<q>标签不是也是对文本的引用吗?不要忘记<q>标签是对简短文本的引用,比如说引用一句话就用到<q ...
    Tagged as : CSS HTML LESS
  8. 企业网站布局实践-10 新闻详情页的制作

    1. 页面结构

    <div class="list_box">
        <h2>新闻中心</h2>
        <h1>【慕客访谈▪用户篇】“有为屌丝”在路上</h1>
        <p  class="list_box_newsInfo">发布人:Admin 发布时间:2015-04-06 浏览3246次</p>
        <div class="list_box_newsContent">
        </div>
    </div>
    

    2. 样式

    text-indent: 2em; 缩进2个文本尺寸

    //新闻列表区域
    .list_box{
        width: 770px;
        min-height: 350px;
        _height: 350px;
        border: 1px solid #E8E8E8;
        float: right;
        background-color: #FFF;
    
        //新闻类别头部标题 ...
    Tagged as : CSS HTML LESS
  9. 企业网站布局实践-09 新闻列表页制作

    1. 新闻列表页的制作

    新闻列表页和首页对比如下:

    对比

    主要是两点不同,第一个是新闻列表页焦点图不再具有切换效果,图片大小也不一样;第二个就是内容区是2栏可变长的。

    2. 页面结构

    <div class="ad" id="picBox"  style="height:243px">
       <img src="images/ad.jpg" alt="ad">
    </div><!-- ad结束 -->
    <div class="list_main">
        <div class="news_type"></div><!-- news_type结束 -->
        <div class="list_box"></div><!-- list_box结束 -->
    </div><!-- list_main结束 -->
    

    3. 内容展示区制作

    /*--------------------新闻列表页----------------------------*/
    .list_main{
        height: 350px;
        background-color: #FFF;
        margin-top ...
    Tagged as : CSS HTML LESS
  10. 企业网站布局实践-08 底部版权区制作

    1. 结构分析

    底部版权区

    2. 文档结构

    <div class="copyright">
        <div class="copyright_content">
            <ul>
                <li>关于
                    <ul>
                        <li>品牌故事</li>
                        <li>联系我们</li>
                        <li>加入我们</li>
                        <li>版权声明</li>
                    </ul>
                </li>
                <li>课程
                    <ul>
                        <li>PHP开发</li>
                        <li>前端开发</li>
                        <li>JAVA开发</li>
                        <li>Android开发</li>
                    </ul>
                </li>
                <li>关注
                    <ul>
                        <li>新浪微博 ...
    Tagged as : CSS HTML LESS

Page 1 / 2