<!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. Enumerators and Enumerable

    Next week task is to learn how generic enumeration interface works, try to build a sample and write ...

  2. 用Maven生成Eclipse中的Web项目

    转自:http://my.oschina.net/u/939893/blog/170185 进入workspace, 输入以下命令 mvn archetype:generate -DgroupId=  ...

  3. Hibernate映射多对多双向关联关系（小案例）

    多对多双向关联关系(Project(工程)/Emp(员工)为案例): 步骤如下: 1.创建Project类,并需要定义集合类型的Emp属性 public class Project { //编号 pr ...

  4. ubuntu 上安装 NASM 汇编开发工具

    一般系统自带NASM可通过 输入 nasm -version 检查,若是没有 可用下述指令安装: sudo apt-get install nasm 安装过程执行完毕后 再次输入 : nasm -ve ...

  5. Address already in use:JVM_Bind

    1.原因:端口被占用 2.解决方式: 方式一:重启电脑 方式二:方式一不行执行方式二 双击Tomcat server   将Ports下HTTP/1.1对应的Port Number 改为其他值 备注: ...

  6. 数据结构 C++ 单链表 一元多项式的相加

    #include <iostream> using namespace std; struct Node { double coe; //系数 int exp; //指数 Node *ne ...

  7. spring security 管理会话 多个用户不可以使用同一个账号登录系统

    多个用户不能使用同一个账号同时登陆系统. 1. 添加监听器 在web.xml中添加一个监听器,这个监听器会在session创建和销毁的时候通知Spring Security. <listener ...

  8. 演示一个导致ora-01555错误的场景

    1创建一个undo表空间 2查看当前undo配置 3更该默认undo表空间 4确认更改的配置 5创建一张测试表 6模拟批量操作 7 查询2分钟前的数据 从这里可以到当查询2分钟前的数据时候,系统报出O ...

  9. 采用Hibernate框架的研发平台如何能够真正兼容Oracle和sqlServer数据库

    都说Hibernate框架的使用可以很容易的让你的研发平台支持多种不同类型的数据库,但实践表明,这里的“容易”,是相对的. 想让研发平台支持多种数据库,并不是一件简单的事,也可以这么说:并不是只要使用 ...

  10. 面试之Java多线程

    Java多线程1.什么是多线程2.为什么需要多线程  有什么优点和缺点3.怎么运行 一.多线程是在软件或硬件上并发执行的技术共享数据空间,内存资源和CPU二.优点:把长时间运行的程序任务放到后台处理, ...