<!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>

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;
}
/*当 元素没有文本值，但 href 属性有链接的时候显示链接：*/
a[href^="http"]:empty::before{
content:attr(href);
}
-->

12个css高级技巧.html的更多相关文章

  1. 12 个 CSS 高级技巧汇总

    下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...

  2. 好程序员web前端分享12个CSS高级技巧汇总

    好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...

  3. 12个CSS高级技巧汇总

    1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...

  4. 12 个CSS 高级技巧汇总[转载]

    使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...

  5. 20 个 CSS 高级技巧汇总

    原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. ...

  6. 2015年最佳的12个 CSS 开发工具推荐

    CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...

  7. CSS 高级技巧汇总

    在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...

  8. 006：CSS高级技巧

    目录 前言 理论 CSS高级技巧 一:元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的 ...

  9. 定位方式 及CSS高级技巧

    定位 background-position 背景位置 浮动,在一个浮字上面,我们的定位,在一个位上.CSS离不开定位,特别是后面的JS特效,天天和定位打交道. 为什么要使用定位? 元素的定位属性 元 ...

随机推荐

  1. 【Oracle】ORA-28000: the account is locked-的解决办法

    ORA-28000: the account is locked第一步:使用PL/SQL,登录名为system,数据库名称不变,选择类型的时候把Normal修改为Sysdba;第二步:选择myjob, ...

  2. thinkphp遗留问题

    $data = array( 'username' => I('username','','htmlspecialchars'), 'content' => I('content'), ' ...

  3. iOS应用内付费(IAP)开发步骤列表

    iOS应用内付费(IAP)开发步骤列表 前两天和服务端同事一起,完成了应用内付费(以下简称IAP, In app purchase)的开发工作.步骤繁多,在此把开发步骤列表整理如下.因为只是步骤列表, ...

  4. Linux下目标文件分析

    文章来源:华清远见嵌入式学院,原文地址:http://www.embedu.org/Column/Column699.htm 作者:冯老师,华清远见嵌入式学院讲师. 1. 程序源码如下: 2.命令 g ...

  5. eclipse配置PHP开发环境

    下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html下载JDK,Eclipse 安装需要JDK环境:http:// ...

  6. 详解C#break ,continue, return

    C#编程语法中break ,continue, return这三个常用的关键字的学习对于我们编程开发是十分有用的,那么本文就向你介绍break ,continue, return具体的语法规范. C# ...

  7. 【Go语言】集合与文件操作

    本文目录 1.数据集合的主要操作 1_1.字典的声明 1_2.字典的初始化和创建 1_3.字典的访问和操作 1_4.其他类型的数据集 2.文件操作 2_1.文件操作概述os包和path包 2_2.文件 ...

  8. Func<T, TResult> Delegate

    public delegate TResult Func<in T, out TResult>( T arg ) http://msdn.microsoft.com/en-us/libra ...

  9. Oracle求部门员工工资占总工资的比率

    --根据每个部门来统计部门工资总和 select deptid, sum(sal) 工资合计 from emp group by deptid; --根据每个部门来统计部门工资总和select dep ...

  10. 概率论与数理统计ppt链接

    http://e-learning.ecust.edu.cn/G2S/Template/View.aspx?courseId=26835&topMenuId=72352&action= ...