接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拾遗（二）的更多相关文章

  1. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  2. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  3. python day 22 CSS拾遗之箭头，目录，图标

    目录 day 4 learn html 1. CSS拾遗之图标 2. html文件的目录结构 3. CSS拾遗之a包含标签 4. CSS拾遗之箭头画法 day 4 learn html 2019/11 ...

  4. 基本CSS布局二

    基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...

  5. Redis命令拾遗二（散列类型）

    本文版权归博客园和作者吴双共同所有,欢迎转载,转载和爬虫请注明原文地址 :博客园蜗牛NoSql系列地址  http://www.cnblogs.com/tdws/tag/NoSql/ Redis命令拾 ...

  6. 前端之CSS（二）

    一.盒子模型 说到盒子模型,我们不得不提一下,W3C标准和IE浏览器是有区别的,我昨天就在写抽屉作业的时候踩过坑,建议用谷歌浏览器,并推荐一篇博文:http://www.osmn00.com/tran ...

  7. 如何在普清的屏上调试CSS样式二倍图背景

    背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是 ...

  8. 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 ...

  9. 数往知来 CSS<十二>

    div+css基础 一.外部样式<!--外部样式可以使网页与样式分离,分工处理 1.写网页,主要提供内容,一般都会有固定的结构,具有id等属性的标签包括特定的内容 2.根据结构写样式另存为css ...

随机推荐

  1. GO语言学习（八）Go 语言常量

    Go 语言常量 常量是一个简单值的标识符,在程序运行时,不会被修改的量. 常量中的数据类型只可以是布尔型.数字型(整数型.浮点型和复数)和字符串型. 常量的定义格式: const identifier ...

  2. 怎样用Adobe Acrobat 7 Pro把PDF文档拆分成多个啊？

    这个pdf文档里有多篇文章,我想把他们分开并分别保存在独立的pdf文档.怎么操作?我的电脑基础不太好,麻烦说得详细一些. Adobe Acrobat 7 Pro拆分PDF文档的方法: 1.点左边的“书 ...

  3. Android java.lang.IllegalArgumentException: Object returned from onCreateLoader must not be a non-static inn

    AsyncTaskLoader: http://developer.Android.com/intl/zh-CN/reference/android/content/AsyncTaskLoader.h ...

  4. vue-cli 构建vue项目

    师父说,咱们还是要用vue-cli 去构建前端项目.然后我就开始了 懵逼之旅. 今天上午主要就是搞懂用webpack和vue-cli怎么搭建 运行项目 首先找到了咱们博客园 园友的博客,提供了大概五个 ...

  5. UVA 11889 - Benefit 可直接枚举

    看题传送门 题目大意: 输入两个整数A和C,求最小的整数B,使得lcm(A,B)=C.如果无解,输出NO SOLUTION 思路: A*B=C*gcd(A,B) 所以 B / gcd(A,B) = C ...

  6. Nginx- 实现跨域访问

    https://blog.csdn.net/m_nanle_xiaobudiu/article/details/80688740

  7. Spring Boot系列二 Spring @Async异步线程池用法总结

    1. TaskExecutor Spring异步线程池的接口类,其实质是java.util.concurrent.Executor Spring 已经实现的异常线程池: 1. SimpleAsyncT ...

  8. 4、linux开发中常用指令

    1.cat /proc/device 可以查看各个全部字符设备和块设备,在register_chrdev中设置的名字在打印出来的信息中可以看到:2.top 可以看各个应用程序占用CPU量及PID等信息 ...

  9. 洛谷 偷天换日&&“访问”美术馆

    典型的树形DP 按理说是先做“访问美术馆”再做偷天换日. 但是我先做了偷天换日然后再做的“访问”美术馆 DP方程好推,偷天换日在遇到有展品的时候做背包,因为是先做的偷天换日,所以把偷天换日的输入w,c ...

  10. 仿凤凰时时彩代购平台源代码[ASP+MSSQL]完整下载

    源代码简单介绍 : 适用范围:  时时彩源代码,时时彩程序,开奖平台源代码,投注平台源代码,仿凤凰时时彩源代码 执行环境:  ASP+MSSQL 其它说明:仿凤凰时时彩代购平台源代码.网上售价8000 ...