博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS拾遗(二)
阅读量:5270 次
发布时间:2019-06-14

本文共 1420 字,大约阅读时间需要 4 分钟。

接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;}

Andy Budd (This website rocks) is a web developer based in Brighton England.

 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"; }

 

  

转载于:https://www.cnblogs.com/zhansu/p/6367530.html

你可能感兴趣的文章
HDU 4122
查看>>
Suite3.4.7和Keil u3自带fx2.h、fx2regs.h文件的异同
查看>>
打飞机游戏【来源于Crossin的编程教室 http://chuansong.me/account/crossincode 】
查看>>
[LeetCode] Merge Intervals
查看>>
【翻译自mos文章】当点击完 finishbutton后,dbca 或者dbua hang住
查看>>
Linux编程简介——gcc
查看>>
2019年春季学期第四周作业
查看>>
MVC4.0 利用IActionFilter实现简单的后台操作日志功能
查看>>
rotate the clock
查看>>
bugku 变量
查看>>
Python 环境傻瓜式搭建 :Anaconda概述
查看>>
数据库01 /Mysql初识以及基本命令操作
查看>>
数据库02 /MySQL基础数据类型以及多表之间建立联系
查看>>
Python并发编程04/多线程
查看>>
CF461B Appleman and Tree
查看>>
CF219D Choosing Capital for Treeland
查看>>
杂七杂八的小笔记本
查看>>
51Nod1353 树
查看>>
CF1215E Marbles
查看>>
BZOJ2339 HNOI2011卡农(动态规划+组合数学)
查看>>