<!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. js-小效果-无缝滚动

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. Sping Environment为Null的原因和解决方法

    参考:https://github.com/spring-projects/spring-boot/issues/4711 这个issue提出不到20天给我搜出来了,还是相信google的强大 问题: ...

  3. C#读取数据库字节流生成图片

    前台用DataList绑定 <asp:DataList ID="DataList1" runat="server"> <ItemTemplat ...

  4. About_AJAX_03

    以为AJAX只可以获取一个值呢,原来也是可以拼接的: function sendTopic(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObje ...

  5. js判断微信浏览器

    function is_weixin(){ //检查是否是微信浏览器 var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMes ...

  6. 日志分析_统计每日各时段的的PV,UV

    第一步: 需求分析 需要哪些字段(时间:每一天,各个时段,id,url,guid,tracTime) 需要分区为天/时 PV(统计记录数) UV(guid去重) 第二步: 实施步骤 建Hive表,表列 ...

  7. linux安装memcached及memcache扩展

    一.安装libevent函数库 下载地址:http://libevent.org 默认被安装到:/usr/local/lib目录下 安装memcached之前需要先安装libevent函数库. 可以通 ...

  8. 【HDU3721】枚举+最长路

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3721 题意:给你一颗n个节点n-1条边的树,每条边都有一个权值,现在让你任意移动一条边然后把这条边连接 ...

  9. 20145337 《Java程序设计》第九周学习总结

    20145337 <Java程序设计>第九周学习总结 教材学习内容总结 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC可以 ...

  10. NLP 自然语言处理

    参考: 自然语言处理怎么最快入门:http://www.zhihu.com/question/ 自然语言处理简介:http://wenku.baidu.com/link?url=W6Mw1f-XN8s ...