<!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. spring源码学习之路---环境搭建（一）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 最近已经开始了spring源 ...

  2. docker 报Error: docker-engine-selinux conflicts with docker-selinux-1.9.1-25.el7.centos.x86_64

    root@ecshop Deploy]# yum -y install docker-engine-selinux.noarchLoaded plugins: fastestmirrorhttp:// ...

  3. 如何在Linux中使用rz/sz工具进行文件传输

    在Linux中,使用rz/sz工具能够进行Linux和windows之间的文件传输,那么要如何使用rz/sz工具工具呢?下面小编就给大家介绍下Linux下如何使用rz/sz工具进行文件传输,一起来学习 ...

  4. select()函数 timval问题

    如果select调用中设置了等待时间,那么每次调用时都需要重新对这个时间赋值.例如: struct timval tv; while(1) { ........;   tv.tv_sec = 2;   ...

  5. [LintCode] Longest Increasing Continuous Subsequence 最长连续递增子序列

    Give an integer array,find the longest increasing continuous subsequence in this array. An increasin ...

  6. HTML5文件API

    File对象与File对象 Blob对象 FileReader对象 File对象 <!DOCTYPE html> <html> <head> <meta ht ...

  7. [silverlight—wcf]参数：调试资源字符串不可用，秘钥和参数通常提供足够的信息用以诊断问题。

    这段时间在做一个项目,有一项需求是上传,经过思考之后,决定采取Silverlight+WCF的方式做上传操作.就在项目做完了之后,本地测试也都没问题,发布到服务器上的时候,顿时就出现故障了.在选择文件 ...

  8. 使用本地phpmyadmin管理远程数据库

    使用放下挺简单的,因为某些业务需求,phpmyadmin不让放在网站服务器上,所以放在本地可以方便管理远程数据库 点击下载会下载一个  config.inc.php 吧这个文件放在phpmyadmin ...

  9. 使用 JavaScript 实现基本队列、优先队列和循环队列

    1.基本队列的实现 基本队列的方法中,包含了 ①向队列(尾部)中添加元素(enqueue).②(从队列头部)删除元素(dequeue).③查看队列头部的元素(front).④查看队列是否为空(isEm ...

  10. bash 常用操作

    删除不为空的文件夹 rm -rf dir_name