当前位置:首页 > 教程 > Web前端 > HTML5与CSS3的完美搭配

HTML5与CSS3的完美搭配

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

  1. 禁止a标签点击高亮,这些都是非官方属性,但实用性超强
  2. 1
    2
    3
    4
    5
    
    html,body{
         -webkit-touch-callout: none; //禁止或显示系统默认菜单
         -webkit-user-select: none; //禁止长按复制选择
         -webkit-tap-highlight-color: rgba(0,0,0,0);//禁止触摸a标签高亮 这个特别实用
     }
  3. 禁止换行 多余省略号

    html结构:

    1
    2
    3
    
    <div class='word'>
         看!我只显示一行,多余的用省略号表示哟
     </div>

    CSS:

    1
    2
    3
    4
    5
    6
    
    .world{
        display:block; //如果是块儿级元素可以不用加
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
  4. 行级,块级元素居中显示

    以前我们要将文字居中显示的做法是 text-align: center; line-height:x;
    如果父级元素的高度是未知的呢 line-height就不好确定了,下面三行代码为你搞定 应为不再考虑父级元素的宽度了

    1
    2
    3
    4
    5
    6
    
    section{ //父元素
         display: -webkit-box;    
        -webkit-box-align: center;
        -webkit-box-pack: center;
     
         }
  5. 禁止换行高能升级

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    .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 结构

    1
    2
    3
    4
    5
    6
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    .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是根据设备屏幕的百分比设置
    比如

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

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

  10. 画1px的细线

    html:

    1
    
    <div class='border1px'></div>

    css:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    .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与传统的网页布局不一样,它们赋给了网页新的生命,也可以轻松的打造出让人眼前一亮的作品。

  • << 面试的一些小技巧
  • 大数据HadDoop入门 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/html5css3/

    相关文章 近期热评 最新文章

    • HTML+CSS+JS 实现图标旋转效果
      本文讲解了使用HTML+CSS+JS 实现图标旋转效果。
    • js怎样获取和设置元素的属性
      本文讲解了js获取和设置元素的属性的方法,有需要的朋友可以看看
    • Node.Js 不一般的JavaScript
      互联网的火热使得JavaScript风光无限,且服务端的JavaScript也并不是什么新技术了,相关的框架也有不少,只是node.js的成功让他爆发式的出现在我们的视线中,让很多前端...
    • 前端程序员必须知道的优化小知识
      前端开发人员的一些小知识,Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术。除了后台需要在性能上做优化外,其实前端的页面...
    • 前端程序员必须知道的chrome开发者技巧
      在Web开发者中,Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能...
    • Node.js入门-提交表单
      用node.js来实现简单的表单上传,Node.js的诸多优点,单线程,非阻塞IO等特点,在前台能够很好的完成一些功能的实现。
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。