一. 热区

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. 见微知著(三)：解析ctf中的pwn--Fastbin和bins的溢出

    1月1号写博客,也是不容易呀!大家新年快乐呀! 先从Fastbin看起,是2015年RCTF的一道pwn题,shaxian.先看看代码的大致流程,随便输入一下: 这个题目关键之处在于堆溢出,对于堆种类 ...

  2. 浅析module.exports和exports区别和使用

    module.exports和exports 写node的时候,特别是自定义模块的时候,都是一顿乱敲,然后module.exports={}完事. 但有时候去看别人写的代码的时候会发现还可以expor ...

  3. python requests的安装与简单运用(转)

    http://www.cnblogs.com/fightformylife/p/4134986.html http://cn.python-requests.org/zh_CN/latest/ htt ...

  4. 【数论】【快速幂】bzoj1008 [HNOI2008]越狱

    根据 高中的数学知识 即可推出 ans=m^n-m*(m-1)^(n-1) .快速幂取模搞一下即可. #include<cstdio> using namespace std; typed ...

  5. 【MySQL笔记】SQL语言四大类语言

     SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL.   1. 数据查询语言DQL 数据查询语言DQL基本结构是由SELECT子句,FROM子句, ...

  6. 在Delphi中使用键盘勾子获取键盘输入（译--5月7日）

    http://blog.sina.com.cn/s/blog_502b2e970100949s.html 获取键盘输入以控制无法接受输入焦点的控件考虑一些游戏,显示图片在TPainBox,但是TPai ...

  7. nginx做反向代理时获取真实IP

    原文:http://blog.csdn.net/aquester/article/details/48657395 1. 编译 对于client -> nginx reverse proxy - ...

  8. oracle 11g jdbc jar包在哪个文件目录

    一. 如果装了oracle数据库的话, 大致是这样的目录:    D:\oracle\product\11.2.0\client_1\oui\jlib\classes12.jar 或者    D:\o ...

  9. BigDecimal的精度舍入模式详解

    BigDecimal舍入模式介绍: 舍入模式在java.math.RoundingMode 里面: RoundingMode.CEILING :向正无限大方向舍入的舍入模式.如果结果为正,则舍入行为类 ...

  10. 从配置websocket理解nginx

    原文地址:http://www.niu12.com/article/2 今天由于写了一个简单的基于h5 websoceket的聊天室,再本地都是好好了.     但是上到服务器后就发现无法行的通, 查 ...