HTML5与CSS3的完美搭配

知道91 | Web前端 | 2015-09-26 | 阅读:1324

要说现在做前端什么最火,那就是HTML5了,强大的网页布局,跨平台,和CSS3搭配,今天就在这里跟大家分享一下我的一些小经验。

HTml5

  1. 禁止a标签点击高亮,这些都是非官方属性,但实用性超强

  2. html,body{
         -webkit-touch-callout: none; //禁止或显示系统默认菜单
         -webkit-user-select: none; //禁止长按复制选择
         -webkit-tap-highlight-color: rgba(0,0,0,0);//禁止触摸a标签高亮 这个特别实用
     }
    

  3. 禁止换行 多余省略号

    html结构:

    看!我只显示一行,多余的用省略号表示哟

    CSS:

    .world{
        display:block; //如果是块儿级元素可以不用加
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    

  4. 行级,块级元素居中显示

    以前我们要将文字居中显示的做法是 text-align: center; line-height:x;

    如果父级元素的高度是未知的呢 line-height就不好确定了,下面三行代码为你搞定 应为不再考虑父级元素的宽度了

    section{ //父元素
         display: -webkit-box;    
        -webkit-box-align: center;
        -webkit-box-pack: center;
    
         }
    

  5. 禁止换行高能升级

    如果需求是让文字显示两行多余用省略号显示呢?

    来个大招

    .world{
        font-size:2.4rem; 
        line-height:130%;
        height: 7.0rem;
        line-height: 130%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //显示的行数 
        -webkit-box-orient: vertical;
    
    }
    

  6. 用百分比控制line-height;

    移动端应尽量少使用px,用百分比控制更精确

    line-height:100%;//两行文字之间无空隙

    使用:当拿到设计PSD时 我们先看字号是多少,比如24px; 文字的间距,比如10px; 那么line-height=100%+(10/24)*100%; 这样的行间距是最精确的并且响应各种设备

  7. 使用flex取代float

    html 结构

    css

    ul{
        display: -webkit-box; 
        display: box; 
        display: -webkit-flex; 
        display: flex; 
        display: -webkit-flex-box; 
        display:flex-box;  
    }
    li{
        -webkt-flex:1; 
        flex:1; 
        -webkit-box-flex:1; 
        box-flex:1; 
    }
    

  8. 文字上划斜线

    我们知道在文字上划横线是 text-decoration: line-through;但是默认没有划斜线的属性,这个常用于电商网站比如将原价用斜线划掉

    这里我们用到before

    .diagonal:before{
        position: absolute;
        content: "";
        left: 0; 
        top: 42%;
        right: -10%;
        border-top: 2px solid;
        border-color: #333;
        transform: rotate(8deg);
        -webkit-transform: rotate(8deg);
    }
    

  9. HTML5

    字体大小使用vw

    字号的使用变迁 px->em->rem->vw

    前三种都不能到达响应的效果

    vw是根据设备屏幕的百分比设置

    比如

    .a{
       font-size:10vw;//大小为屏幕宽度的百分之十 当然很少有设这么大的字
      }
    

    因为vw设置的字体大小是根据屏幕大小改变而改变 所以在大屏幕上显示会变大 根据可根据 需求使用

  10. 画1px的细线

    html:

    css:

    .border1px{  position: relative;}
    .border1px:after{
        content:"";
        position: absolute;
        bottom:0px;
        left:0px;
        right:0px;
        border-bottom:1px solid red;
        border-left:1px solid red;
        -webkit-transform:scaleY(.5);
        -webkit-transform-origin:0 0;
    }
    

HTMl5搭配CSS3与传统的网页布局不一样,它们赋给了网页新的生命,也可以轻松的打造出让人眼前一亮的作品。