12个css高级技巧.html
<!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的更多相关文章
- 12 个 CSS 高级技巧汇总
下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...
- 好程序员web前端分享12个CSS高级技巧汇总
好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...
- 12个CSS高级技巧汇总
1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...
- 12 个CSS 高级技巧汇总[转载]
使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...
- 20 个 CSS 高级技巧汇总
原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. ...
- 2015年最佳的12个 CSS 开发工具推荐
CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...
- CSS 高级技巧汇总
在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...
- 006:CSS高级技巧
目录 前言 理论 CSS高级技巧 一:元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的 ...
- 定位方式 及CSS高级技巧
定位 background-position 背景位置 浮动,在一个浮字上面,我们的定位,在一个位上.CSS离不开定位,特别是后面的JS特效,天天和定位打交道. 为什么要使用定位? 元素的定位属性 元 ...
随机推荐
- ELK_elk+redis 搭建日志分析平台
这个是最新的elk+redis搭建日志分析平台,今年时间是2015年9月11日. Elk分别为 elasticsearch,logstash, kibana 官网为:https://www.elast ...
- bootstrap如何给.list-group加上序号
在bootstrap中,我们可以使用不带任何class的<ol>跟<li>来创建一个有序列表,但是如果加上list-group类,样式有了,但列表前面的数字却没了. Boots ...
- [转] 擎天哥as3教程系列第二回——性能优化
所谓性能优化主要是让游戏loading和运行的时候不卡. 一 优化fla导出的swf的体积? 1, 在flash中,舞台上的元件最多,生成的swf越大,库里面有连接名的元件越多,swf越大.当舞台 ...
- 4Sum
Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...
- Point Grey FlyCapture 实例汇总
Example Language Description AsyncTriggerEx C++ Demonstrates some of the basic asynchronous trigger ...
- POJ 1016 模拟字符串
Numbers That Count Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 20396 Accepted: 68 ...
- FK JavaScript:ArcGIS JavaScript类库加载不成功而导致的程序异常
现象:页面加载时,有时候成功,有时候出错,出错的地方为init.js 加载esri的类库 经过仔细对比,发现出错时dojo加载的类库中,对象的很多属性都为undefined,而加载成功时,该对象的相关 ...
- 安装redis时遇到zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录
参考博文,http://www.phperz.com/article/14/1219/42002.html 解决办法 make MALLOC=libc
- HTTP协议 (二) 基本认证
HTTP协议 (二) 基本认证 http协议是无状态的, 浏览器和web服务器之间可以通过cookie来身份识别. 桌面应用程序(比如新浪桌面客户端, skydrive客户端)跟Web服务器之间是如何 ...
- Lua数据结构
lua中的table不是一种简单的数据结构,它可以作为其他数据结构的基础,如:数组,记录,链表,队列等都可以用它来表示. 1.数组 在lua中,table的索引可以有很多种表示方式.如果用整数来表示t ...