CSS拾遗（二）
接CSS拾遗（一）。
4. 不透明度
opacity: 0.8;
filter: alpha(opacity=80);
opacity: 0.8是标准的写法；filter: alpha(opacity=80)是IE6-9的写法，IE9之前不支持opacity。
5. 链接样式顺序
a:link, a:visited, a:hover, a:focus, a:active
记忆口诀:love-hate，其中focus最好加上，表示用键盘移动到链接上时，与鼠标悬停一样的概念。
6. line-height
这个还是看《CSS权威指南》吧，相关的东西挺多的。
7. 纯CSS提示工具
通过定位技术，可以创建纯CSS工具提示。
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display:block;
position:absolute;
top:1em;
left:2em;
width: 8.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
</style>
</head>
<body>
<p><a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.</p>
</body>
8. 流式布局min-width、max-width理解
使用流式布局时，尺寸是用百分数一类设置的，这使流式布局能够相对于浏览器窗口进行伸缩。流式布局也不是没有问题，
在窗口宽度很小的时候，行变得非常窄，难以阅读。因此，有必要添加以像素或em为单位的min-width，从而防止布局太窄。
.wrapper {
width: 76.8%;
margin: 0 auto;
text-align: left;
max-width: 125em;
min-width: 62em;
}
对于图像，为了防止布局过大导致图像太大失真，可如下使图像不超过其原始尺寸。
img {
width: 80%;
max-width: 646px;
}
也可仅使用max-width：xx%，使其一直占用父级固定比例的宽度，且不超过其原始尺寸。
img {
max-width: 80%;
}
9.@font-face
@font-face让我们可以使用任何字体，而不需要考虑用户机器上是否安装了这种字体。
@font-face {
font-family: "My font";
src: url(css/Myfont.otf);
}
/*然后，就可以引入字体；*/
h1 {
font-family: "My font";
}
CSS拾遗（二）的更多相关文章
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- python day 22 CSS拾遗之箭头，目录，图标
目录 day 4 learn html 1. CSS拾遗之图标 2. html文件的目录结构 3. CSS拾遗之a包含标签 4. CSS拾遗之箭头画法 day 4 learn html 2019/11 ...
- 基本CSS布局二
基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...
- Redis命令拾遗二（散列类型）
本文版权归博客园和作者吴双共同所有,欢迎转载,转载和爬虫请注明原文地址 :博客园蜗牛NoSql系列地址 http://www.cnblogs.com/tdws/tag/NoSql/ Redis命令拾 ...
- 前端之CSS（二）
一.盒子模型 说到盒子模型,我们不得不提一下,W3C标准和IE浏览器是有区别的,我昨天就在写抽屉作业的时候踩过坑,建议用谷歌浏览器,并推荐一篇博文:http://www.osmn00.com/tran ...
- 如何在普清的屏上调试CSS样式二倍图背景
背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是 ...
- CSS 笔记二（Text/Fonts/Links/Lists）
CSS Text 1> Text Color used to set the color of the text 2> Text Alignment used to set the hor ...
- 数往知来 CSS<十二>
div+css基础 一.外部样式<!--外部样式可以使网页与样式分离,分工处理 1.写网页,主要提供内容,一般都会有固定的结构,具有id等属性的标签包括特定的内容 2.根据结构写样式另存为css ...
随机推荐
- 【hdu 1403】Longest Common Substring
[链接]h在这里写链接 [题意] 求两个串的最长公共子串. [题解] Sa[i]表示的是字典序为i的后缀的起始位置. 可以把两个字符串合在一起(中间用一个比'z'大的字符分割); 则如果Sa[i-1] ...
- [D3] SVG Graphics Containers and Text Elements in D3 v4
SVG is a great output format for data visualizations because of its scalability, but it comes with s ...
- iOS开发- iOS7显示偏差(UITableView下移)解决的方法
之前碰到过一个问题. 就是利用storyboard拖动出来的控件, 在iOS7上跑老是莫名的下移. 比方这样(红色区域为多余的) 解决的方法: iOS7在Conttoller中新增了这个属性: aut ...
- js课程 3-10 js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么
js课程 3-10 js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么 一.总结 一句话总结:js中是对象点方法的形式,这些方法都是对象的方法,而在php.java中却不是这样. 1.j ...
- leetcode笔记：Remove Duplicates from Sorted Array II
一.题目描写叙述 二.解题技巧 这道题和Remove Duplicates from Sorted Array这道题是相似的.仅仅只是这里同意出现反复的数字而已,能够採用二分搜索的变种算法.仅仅只是增 ...
- 一次svn数据库的崩溃错误的解决
作者:朱金灿 来源:. 然后再更新svn数据库,依然出现上面提到的错误.于是又想到新建一个svn数据库,然后将旧库备份出来再导入到新库中,运行命令:svnadmin dump E:\Repositor ...
- Visual Studio 项目目录下的bin目录和 obj目录
一.Bin目录 Visual Studio 编译时,在bin 目录下有debug 和 release 目录. 1.Debug: 通常称为调试版本,它包含调试信息,所以要比Release 版本大很多(可 ...
- python 如何使用pip安装第三方软件
1. 先将sripts加入系统的环境变量path中.如笔者的路径为: D:\Program Files\Python35\Scripts 2. 启动cmd,如安装request 过程十分简单,但是也容 ...
- php实现把二叉树打印成多行（谋而后动，写好算法思路，不然浪费超多时间而且还是错误代码，而且精力消耗会导致代码正确率下降以及低级错误）
php实现把二叉树打印成多行(谋而后动,写好算法思路,不然浪费超多时间而且还是错误代码,而且精力消耗会导致代码正确率下降以及低级错误) 一.总结 要点:a.层次遍历(队列) b.层次遍历中的层次(孩 ...
- FAST特征点检测&&KeyPoint类
FAST特征点检测算法由E.Rosten和T.Drummond在2006年在其论文"Machine Learning for High-speed Corner Detection" ...