<!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. 24个 CSS 高级技巧合集

    上期入口:史上最全实用网络爬虫合集! 1.使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格.您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法: ** ...

随机推荐

  1. struts2 配置 struts.xml 提示

    1.这个提示通常是在 连网络的时候才可以看到 2.当没有网路的时候我们该如何配置呢? window -->preferences -->xml catelog -->user.... ...

  2. HDU5834 Magic boy Bi Luo with his excited tree(树形DP)

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5834 Description Bi Luo is a magic boy, he also ...

  3. error while loading shared libraries: xxx.so.x&quot;错误的原因和解决办法

    http://blog.chinaunix.net/uid-26212859-id-3256667.html 参考博客 http://hi.baidu.com/newdreamllc/item/687 ...

  4. WinAPI: FindWindow、FindWindowEx - 查找窗口

    FindWindow(   lpClassName,        {窗口的类名}   lpWindowName: PChar {窗口的标题} ): HWND;              {返回窗口的 ...

  5. ZooKeeper(3.4.5) - 使用 Curator(2.7.0) 监听事件

    ZooKeeper原生的API支持通过注册Watcher来进行事件监听,但是Watcher通知是一次性的,因此开发过程中需要反复注册Watcher,比较繁琐.Curator引入了Cache来监听Zoo ...

  6. 从.src.rpm包中提取出完整的源码的方法

    1 什么是完整的源码 就是说,最初始的源码加上打了所有的patch后的源码,即最新的源码. 2 过程 2.1 从.src.rpm中提取完整的rpm工程文件 2.1.1 rpm to cpio rpm2 ...

  7. Hadoop(一)Centos7虚拟机网络配置

    Centos7虚拟机网络配置(桥接模式) 一 VirtualBox提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式). 1 桥接模式(br ...

  8. Effective Java 之-----消除过期的对象引用

    public class Stack { private Object[] elements; private int size = 0; private static final int DEFAU ...

  9. (转)Spring Boot(九):定时任务

    http://www.ityouknow.com/springboot/2016/12/02/spring-boot-scheduler.html 在我们开发项目过程中,经常需要定时任务来帮助我们来做 ...

  10. qemu对虚拟机的内存管理(二)

    上篇文章主要分析了qemu中对虚拟机内存管理的关键数据结构及他们之间的联系,这篇文章则主要分析在地址空间发生变化时,如何将其更新至KVM中,保持用户空间与内核空间的同步. 这一系列操作与之前说的Add ...