一. 热区

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. 8、Flask实战第8天：add_url_rule和app.route原理

    之前我们使用@app.route这个装饰器来把视图函数和url绑定 @app.route('/') def hell_world(): return 'hello world' 而且我们可以通过url ...

  2. 【kruscal】【最小生成树】【块状树】bzoj3732 Network

    跟去年NOIP某题基本一样. 最小生成树之后,就变成了询问连接两点的路径上的权值最大的边. 倍增LCA.链剖什么的随便搞. 块状树其实也是很简单的,只不过每个点的点权要记录成“连接其与其父节点的边的权 ...

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

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

  4. &#x开头的是什么编码?

    在 Node 层利用 cheerio 解析网页时,输出的中文内容都是以 &#x 开头的一堆像乱码一样的东西,尝试过各种编码都无效,而且神奇的是,将这一堆“乱码”保存成网页后,通过浏览器打开又可 ...

  5. 网络采集软件核心技术剖析系列（3）---如何使用C#语言下载博文中的全部图片到本地并可以离线浏览

    一 本系列随笔概览及产生的背景 本系列开篇受到大家的热烈欢迎,这对博主是莫大的鼓励,此为本系列第三篇,希望大家继续支持,为我继续写作提供动力. 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受 ...

  6. 百度display name为中文导致奔溃，productName和budlename区分出来

    把"xxx-info.plist"中的"Bundle display name"的值改成了英文,或者把它的值修改成系统默认的"${PRODUCT_NA ...

  7. centos搭建git服务器(转)

    一:git服务安装 1.安装git相关组件 [root@gitserver ~] yum -y install git 2.创建git用户 [root@gitserver ~] groupadd gi ...

  8. PHP性能优化大全

    第一章  针对系统调用过多的优化 我这次的优化针对syscall调用过多的问题,所以使用strace跟踪apache进行分析. 1.  apache2ctl -X & 使用-X(debug)参 ...

  9. go同一个目录下的go文件里面不能有多个package

    原文: https://golang.org/doc/code.html#PackagePaths -------------------------------------------------- ...

  10. Mac上安装使用Nginx

    1.brew search nginx 2.brew install nginx 启动nginx ,sudo nginx ;访问localhost:8080 发现已出现nginx的欢迎页面了. 备注: ...