<!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. weblogic部署项目包，报空指针错误

    贴出 报错代码 <weblogic> <> <> <1479765377228> <BEA-240003> <Console enco ...

  2. C语言工具---Code::Blocks

    Code::Blocks Code::Blocks 是一个开源的全功能的跨平台C/C++集成开发环境. Code::Blocks是开放源码软件.由纯粹的C++语言开发完成,它使用了著名的图形界面库wx ...

  3. Application Initialization Module for IIS 7.5

    http://www.iis.net/downloads/microsoft/application-initialization IIS7.5也有Warm Up功能 让ASP.NET第一次Reque ...

  4. Android控件属性大全(转)

    http://blog.csdn.net/pku_android/article/details/7365685 LinearLayout         线性布局        子元素任意: Tab ...

  5. Centos 开放80端口

    一.添加规则 #/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT #/sbin/iptables -I INPUT -p tcp --dport ...

  6. javaweb之框架标签(day1 框架标签的使用)

    框架标签 <frameset> --rows:按照行进行划分<frameset rows='80,*'> --rows:按照列进行划分<frameset cols='80 ...

  7. Displaying a full list of groups in Odoo's Kanban view

    Kanban view is probably the most flexible view in Odoo. It can be used for many different purposes. ...

  8. Java web MVC开发模式入门感悟

    当我进行第一个完整的java web项目的开发时,对以前所学的Java web知识体系有了一个清晰的进阶认识.我觉得非常有必要对此进行必要的总结. MVC,意指model(数据持久层)+viewer( ...

  9. android基础知识之一

    1:Android系统架构(重点) 分层的架构 JNI java native interface 1.application :应用层 : java 2.application framework ...

  10. jQuery 插件autocomplete

    jQuery 插件autocomplete 自动加载 参考: http://www.cnblogs.com/Peter-Zhang/archive/2011/10/22/2221147.html ht ...