12个css高级技巧.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*你不需要分别添加line-height到每个p h等,只需要添加到body即可*/
    body{
        line-height:1;
    }
    ul{
        list-style:none;
    }
    li{
        width:100px;
        height:50px;
        float:left;
        text-align:center;
    }
    /*技巧一*/
    li:not(:last-child){
        border-right:1px solid gray;
    }
    /*也可以这样*/
    li:first-child ~ li{
        border-left:1px solid gray;
    }
    ul > li:not(:last-child)::after{
        content:",";
    }
    /*在CSS中使用负的 nth-child 选择项目1到项目n。*/
    li:nth-child(-n+2){
        border-bottom:1px solid green;
    }
/*有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：*/
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/*让 box-sizing 继承 html：*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.slider ul{
    max-height:0;
    overflow:hidden;
}
.slider:hover ul{
    max-height:1000px;
    transition:.3s ease;
}
/*表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：*/
.calendar {
  table-layout: fixed;
}
/*当 <a> 元素没有文本值，但 href 属性有链接的时候显示链接：*/
a[href^="http"]:empty::before{
    content:attr(href);
}
    </style>
</head>
<body>
以前网上看到的 好像也没有什么高级的,就是一些技巧吧.
</body>
</html>
posted @ 2016-07-06 10:41 小骨0515 阅读(167) 评论(0) 收藏举报
刷新页面返回顶部