一. 热区

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. cogs p服务点设置

    5. P服务点设置 ★★   输入文件:djsc.in   输出文件:djsc.out   简单对比时间限制:2 s   内存限制:128 MB 问题描述为了进一步普及九年义务教育,政府要在某乡镇建立 ...

  2. Codeforces Round #283 (Div. 2) D. Tennis Game（模拟）

    D. Tennis Game time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  3. 【OpenJudge9267】【递推】核电站

    核电站 总时间限制: 5000ms 单个测试点时间限制: 1000ms 内存限制: 131072kB [描述] 一个核电站有N个放核物质的坑,坑排列在一条直线上.如果连续M个坑中放入核物质,则会发生爆 ...

  4. 安装CentOS 6停在selinux-policy-targeted卡住的问题解决

    在刚开始安装时,设置swap分区.设置swap分区.设置swap分区 参考: http://tieba.baidu.com/p/3817971339 http://blog.csdn.net/zhan ...

  5. winform treeView 数据绑定

    转载:http://www.jetwu.cn/archives/737 winform treeView 数据绑定 private void Form1_Load(object sender, Eve ...

  6. 直接拿来用！最火的iOS开源项目（二）

    每一次的改变总意味着新的开始.”这句话用在iOS上可谓是再合适不过的了.GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7,有 ...

  7. javascript函数，构造函数。js对象和json的区别。js中this指向问题

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.好处:在出现大量程序相同的时候,可以封装为一个function,这样只用调用一次,就能执行很多语句.(1)语法:函数就是包裹在花括号中的代码 ...

  8. IP地址转化为32位无符号数

    转自 http://blog.csdn.net/testcs_dn/article/details/38585719 一.将ip地址转成long数值 将IP地址转化成整数的方法如下: 1.通过Stri ...

  9. 作为Java程序员应该掌握的10项技能

    本文详细罗列了作为Java程序员应该掌握的10项技能.分享给大家供大家参考.具体如下: 1.语法:必须比较熟悉,在写代码的时候IDE的编辑器对某一行报错应该能够根据报错信息知道是什么样的语法错误并且知 ...

  10. 关于Linux开源项目基础组件make编译流程

     关于Linux开源项目基础组件make编译流程 非常多Linux开源项目都会用到编译出可运行文件的make.这个是有一套流程的. 首先,GNU构建系统:https://en.wikipedia. ...