利用属性选择器来选择空链接

当 <a> 元素没有文本内容,但有 href 属性的时候,显示它的 href 属性:

a[href^="http"]:empty::before {
content: attr(href);
}

创造格子等宽的表格

table-layout: fixed 可以让每个格子保持等宽:

table {
border: 1px solid #ccc;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}

使用 max-height 来建立纯 CSS 的滑块

max-height 与 overflow hidden 一起来建立纯 CSS 的滑块:

.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
} .slider:hover {
max-height: 600px;
overflow-y: scroll;
}

逗号分隔列表

使列表的每项都由逗号分隔:

ul > li:not(:last-child)::after {
content: ",";
}

给 “默认” 链接定义样式

给 “默认” 链接定义样式:

a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}

通过 CMS 系统插入的链接,通常没有 class 属性,以上样式可以甄别它们,而且不会影响其它样式。

使用选择器:root来控制字体弹性

在响应式布局中,字体大小应需要根据不同的视口进行调整。你可以计算字体大小根据视口高度的字体大小和宽度,这时需要用到:root:

:root {
font-size: calc(1vw + 1vh + .5vmin);
}

现在,您可以使用 root em

body {
font: 1rem/1.6 sans-serif;
}

css你所不知道技巧的更多相关文章

  1. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  2. DIV+CSS一些小小的技巧

    DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...

  3. Css常用的技巧

    一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.  具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...

  4. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  5. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  6. 《CSS动画实用技巧》课程笔记

    概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...

  7. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  8. 10个CSS简写/优化技巧-摘自网友

    10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CS ...

  9. Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧

    <!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...

  10. CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

随机推荐

  1. py教学之集合

    集合的概念 集合(set)是一个无序的不重复元素序列. 可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用来创建一个空字 ...

  2. Vue09 事件

    1 事件语法 Vue 中的事件绑定可以使用 v-on 指令进行处理,可以把 v-on 绑定事件简写为 @. <div id="root"> <button @cl ...

  3. Listen 1音乐播放器

    Listen 1 Listen 1可以搜索和播放来自网易云音乐,QQ音乐,酷狗音乐,酷我音乐,Bilibili,咪咕音乐网站的歌曲,让你的曲库更全面.还支持歌单功能,你可以方便的播放,收藏和创建自己的 ...

  4. 看完这篇你不能再说不懂SSO原理了!

    这一篇是原理篇,接下来还会有一篇实战篇,实战的相关代码是非常火的一个开源项目叫:xxl-sso 一.简介 单点登录(Single Sign On),简称为 SSO. 它的解释是在多个应用系统中,用户只 ...

  5. python实现移动二级目录下的文件到一级目录

    python实现移动二级目录下的文件到一级目录 import os import shutil import sys def move_to_work_folder(work_path, cur_pa ...

  6. 网络配置:Netplan

    Netplan 新出的Ubuntu服务器18.04版本修改了IP地址配置程序, Ubuntu和Debian的软件架构师删除了以前的ifup/ifdown命令和/etc/network/interfac ...

  7. 结合代码和内存变化图一步步弄懂JVM的FullGC

    1.年轻代存活的对象太多,老年代了放不下 01.示例代码 public class DemoTest1 { public static void main(String[] args) { byte[ ...

  8. js - 解决微信环境下,ios软键盘收起后页面空白

    思路:1.判断是否在微信中           2.判断是否在ios中           3.表单元素焦点将页面滚回到顶部 是否是微信环境 isWx() { let ua = navigator.u ...

  9. vue学习笔记:vue.js基础语法

    一.VUE 概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

  10. aop切面记日志

    package com.netauth.utils.component; import java.lang.annotation.ElementType; import java.lang.annot ...