一. 热区

map 热区。area 点击区域

shape="circle" 圆型，coords="圆心点X。圆心点Y，圆的半径"

shape="rect" 矩形。coords="矩形左上角x，矩形左上角Y，矩形右下角X，矩形右下角Y"

shape="poly" 多边形。coords="第一个点X。第一个点Y。第二个点X。第二个点Y..."

<img src="bigptr.jpg"  usemap="#Map" />

<map name="Map">

  <area shape="circle" coords="378,132,56" href="http://www.baidu.com">

  <area shape="rect" coords="462,157,566,217" href="http://www.qq.com">

  <area shape="poly" coords="227,251,186,220,168,221,159,234,147,258,141,283,146,300,153,

  315,161,329,171,336,182,343,201,343,219,339,235,324,238,319,236,313,231,301,227,290,224,

  280,224,272,224,268,226,261" href="http://www.sina.com.cn">

</map>

二. iframe

iframe元素会创建包括另外一个文档的内联框架（即行内框架）

<iframe src="http://www.baidu.com" width="1200" height="600" frameborder="0" scrolling="no"></iframe>

三. flash和视频的引入

① 引入flash：

<style>

body{ background:#000;}

.box{width:300px;height:300px;background:pink; position:absolute;left:0;top:0;}

</style>

<object>

	<param name="wmode" value="transparent">   <!-- flash 透明 -->

	<embed src="1.swf" width="400" height="400" wmode="transparent"></embed>

</object>

<div class="box"></div>

② 引入视频：

<embed src="http://player.youku.com/player.php/sid/XNjQ0MDk4MDI0/v.swf" allowFullScreen="true"

	   quality="high" width="480" height="400" align="middle" allowScriptAccess="always"

	   type="application/x-shockwave-flash">

</embed>

四. 词内断行和省略号

① 词内断行：

<style>

p{width:200px;border:1px solid #000; font:14px/24px Arial; word-break:break-all;}

</style>

<p>

adsadasdsad asdasdasdasdsadasd asdasdas asdasdasd

11111111111111111111111111111111111111 sadasdasd

asdsadsad asdasdsad

</p>

② 省略号：

<style>

p{width:200px;border:1px solid #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

</style>

<p>

要闻

给志愿者回信:青年有担当国家就有前途 会见拜登 美称对中国新领导集体充满期待

卡梅伦成都吃火锅花877元 遭遇"奇葩"提问 教育部：高考改革将降低科目 探索不分文理科

</p>

五. 未知宽度的img居中

<style>

.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}

span{ display:inline-block; height:100%; vertical-align:middle;}

img{ vertical-align:middle;}

</style>

<body>

<div class="box">

	<img src="bigptr.jpg" /><span></span>

</div>

</body>

六. 列表文字溢出问题

<style>

.list{width:302px; margin:0;padding:0; list-style:none;}

li{ height:30px; font-size:12px; line-height:30px;border:1px solid #000; vertical-align:top;}

p{margin:0;float:left;padding-right:50px; position:relative; overflow:hidden;height:30px;}

span{padding-left:10px;width:40px; position:absolute;right:0;top:0;}

</style>

<body>

<ul class="list">

	<li>

    	<p>

            <a href="#">文字文字文字文字文字字文字文字文字文字文字文字字文字文字文字文字文字文字字文字</a>

            <span>文字</span>

        </p>

    </li>

    <li>

    	<p>

            <a href="#">字文字文字字文字</a>

            <span>文字</span>

        </p>

    </li>

    <li>

    	<p>

            <a href="#">文文字字文字文字文字文字文字文字字文字</a>

            <span>文字</span>

        </p>

    </li>

    <li>

    	<p>

            <a href="#">字文字文字文字字文字</a>

            <span>文字</span>

        </p>

    </li>

</ul>

</body>

七. ico小图标

① 生成ico图标： http://www.bitbug.net/

② 增加代码： <link href="xxx.ico" rel="icon" />

妙味云课堂之css：其它知识点汇总的更多相关文章

  1. 妙味远程课堂-JS属性

    html由属性名和属性值组成 属性读操作:获取.找到 元素.innerHtml//读取元素内的html内容 元素.属性名 案例1:点击按钮弹出文本框的内容(value值) <!DOCTYPE h ...

  2. 妙味远程课堂-JS热身运动-上

    希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性 隐藏 width/height 改为0 透明度 定位,left/top值为负值 用与背景颜色一样 ...

  3. css布局知识点汇总

    昨天早上看到了一篇很棒的文章,这篇文章将布局的一些知识点整理的很不错.我也想整理一下,这样在以后的项目中可以活学活用,避免只用一种方式. 参考文章:https://segmentfault.com/a ...

  4. HTML+Css+JavaScript知识点汇总

    HTML 部分 HTML基础知识 1. HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息.它是从S ...

  5. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. 妙味课堂——HTML+CSS(第四课)(二)

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  8. 妙味课堂——HTML+CSS(第一课)

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  9. 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

随机推荐

  1. 主席树 STL+二分【p3939】数颜色

    Description 小 C 的兔子不是雪白的,而是五彩缤纷的.每只兔子都有一种颜色,不同的兔子可能有 相同的颜色.小 C 把她标号从 \(1\) 到 \(n\) 的 \(n\) 只兔子排成长长的一 ...

  2. 数据排序 第一讲（ 各种排序方法 结合noi题库1.10）

    选择排序 1.基本思想:每一趟从待排序的数据元素选出最小或最大的一个元素,数按序排放在待排序的元素的最前端,直到全部待排序的元素排完 2.基本代码 px(int r[]) { ;i<n;i++) ...

  3. DeprecationWarning: current URL string parser is deprecated解决方法

    我最近在使用mongoDB的时候,发现了这个警告语句,纳闷了,按照官方文档的教程去连接数据库还能出错,也是醉了. 后来尝试去阅读相关资料,发现只是需要将{ useNewUrlParser: true ...

  4. [Codeforces 17C] Balance

    Brief Introduction: 给定一个仅由abc组成的字符串,每个字符可以向左右延展,求最终新的平衡字符串的个数. Algorithm: 关键点在于变换前后字符串中字符的相对位置不会发生改变 ...

  5. UVA 1514 Piece it together （二分图匹配）

    [题目链接] Link [题目大意] 给你一些由一块黑块和两块白块组成的L形拼图,问你是否能够拼成给出的图 [题解] 我们将所有的黑块拆点,拆分为纵向和横向,和周围的白块连边, 如果能够得到完美匹配, ...

  6. winform groupbox控件放到窗体中间位置

    1. 在Form中放一个控件,让其在启动时始终居中 int gLeft = this.Width / 2 - groupControl1.Width / 2; int gTop = this.Heig ...

  7. Linux下打包命令tar

    转:http://blog.chinaunix.net/uid-29021161-id-3922752.html Linux下最常用的打包程序是tar,用tar命令打成的包文件通常以.tar结尾 1. ...

  8. S3C2440的存储器映射(27根地址线如何寻找1G的地址)

    转:http://blog.csdn.net/ce123_zhouwei/article/details/6882091 查S3C2440的数据手册可知S3C2440可寻址1G的地址范围,但是S3C2 ...

  9. 如何垂直居中元素（浮动元素&居中一个<img>）？

    1.如何居中一个浮动元素? 方法一:已知元素的高度   <!DOCTYPE html> <html lang="en"> <head> < ...

  10. C# 7 新特性-2

    在之前的C# 7 新特性博客中,我们谈到了Tuples,Record Type和Pattern Matching.这些都是C#新特性中最可能出现的.在本博客中,我们会提到更多的一些特性,虽然这些特性不 ...