接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. Android 获取联系人手机号码、姓名、地址、公司、邮箱、生日

    public void testGetAllContact() throws Throwable { //获取联系人信息的Uri Uri uri = ContactsContract.Contacts ...

  2. 【例题 6-19 UVA - 1572】Self-Assembly

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 旋转和翻转,会发现. 如果可以顺着某个方向一直放的话. 总是能转换成往下或者往右连的. 则只要能够出现一个连接顺序的循环,则总是有解 ...

  3. 9.1 Binder系统_C程序示例_框架分析和编写程序

    IPC : Inter-Process Communication, 进程间通信 A进程把数据原原本本的发给B,这就是IPC RPC : Remote Procedure Call, 远程过程调用 A ...

  4. Unity插件之NGUI学习(5)—— 创建Label图文混排及文字点击

    创建一个新的Scene,并按 Unity插件之NGUI学习(2)创建UI Root. 准备工作,制作Font.如今Project窗体创建一个Font目录.然后从系统自带字体目录中选择自己须要的字体,我 ...

  5. sqlplus中怎么将你全部的操作和结果记录保存到你指定的文件里

    [在sqlplus的操作中,非常多时候我们都想把自己的写的sql语句和改动日志或者结果信息做记录] [首先]肯定要正常连接到oralce数据库. [然后] 你用你指定的用户登录到oralce数据库之后 ...

  6. php压缩

    php压缩的一个demo,随便测试了一下,可以用 <?php class PHPZip { private $ctrl_dir = array(); private $datasec = arr ...

  7. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  8. 【C++竞赛 C】yyy的数学公式

    时间限制:1s 内存限制:32MB 问题描述 yyy遇到了一个数学问题如下: S_n=∑F(i) 其中F(i)表示i的最大奇因数 yyy的数学非常好,很快就得到了结果.现在他把问题交给你,你能解决吗? ...

  9. centos7 开启端口防火墙配置(如开启3306或者80端口)

    转载自https://blog.csdn.net/codepen/article/details/52738906 https://www.cnblogs.com/hantianwei/p/57362 ...

  10. c3p0 xml配置文件模版

    <c3p0-config> <default-config> <property name="driverClass">com.mysql.jd ...