1. 企业网站布局实践-01页面头部制作

    1. 总体分析

    网站的架构采用自顶向下渐进明细的过程进行规划。

    网站首页设计如下:

    2. 页面头部制作

    1、居中

    margin: 0 auto;
    

    2、更改li的图标

    list-style-image: url(../images/li_bg.gif);
    

    去除li的默认图标

    list-style-type:none;
    //或者
    list-style:none
    

    3、浮动菜单右侧

    float: right;
    

    4、菜单的宽度直接设置li的width

    5、文本垂直居中 设置元素文字行高等于盒子的高度

    line-height: 27px;
    

    6、去掉a链接的下划线

    text-decoration: none;
    

    设置链接正常状态:

    a{
        &:link, &:visited{
            color:#8E8E8E;
            text-decoration: none;
        }
    
        &:hover, &:active{
        color ...
    Tagged as : CSS HTML LESS
  2. LESS学习笔记

    1. LESS注释

    //不会被编译到CSS中
    /*编译到CSS*/
    

    2. 变量

    //定义
    @test_width: 10px;
    
    .box{
        width:@test_width; //调用
    }
    

    3. 混合

    //第一种
    .box1{
        border: 5px solid pink;
    }
    
    .box2{
        .box1;
    }
    
    //第二种
    
    .box3(@border_width){
        border: @border_width solid yellow;
    }
    
    .box3_1{
        .box3(3px);
    }
    
    //第三种
    .box4(@border_width:1px){
        border: @border_width solid yellow;
    }
    
    .box4_1{
        .box4();
    }
    

    4. 匹配模式

    .traingle(top, @w:5px ...
    Tagged as : CSS LESS

Page 2 / 2