<!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>