一. 热区

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. ASP.NET Core 2.2 基础知识(三) 静态文件

    什么是静态文件? HTML,CSS,JS,图片等都叫做静态文件. 要想提供静态文件给客户端,需要注册静态文件中间件. 我们先分别添加一个 WebAPI 项目,一个 Razor 视图项目,比较两个项目的 ...

  2. 数字 function

    SELECT TRUNC(15.79), TRUNC(), ROUND(15.79), ), ), FLOOR(26.983), CEIL(26.123), ), ), ), MOD(,) FROM ...

  3. 对mysql 数据库操作 使其支持插入中文（针对python）

    首先,这项任务确切的说需要三步吧: #1.建立数据库(数据库名为xsk) create database `xsk` character set 'utf8' collate 'utf8_genera ...

  4. 找出能被5或6整除，但是不能被两者同时整除的数 Exercise05_11

    /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:找出能被5或6整除,但是不能被两者同时整除的数 * */ public class Exercise05_11 { publi ...

  5. INLINE-BLOCK和FLOAT(二)(转)

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  6. python语言实现阶乘的两种方法---递归和迭代

    阶乘的递归实现,代码如下: def factorial(n): if n==1: return 1 else: return n*factorial(n-1) number = int(input(& ...

  7. RxJava 1.x 理解-2

    给RxJava 加入线程控制 -- Scheduler 在 RxJava 1.x 理解-1 中,我们说到了RxJava的简单用法,但是这还远远不够,因为这简单用法是在同一个线程中使用的.比如我们需要在 ...

  8. 配置kubernetes UI图形化界面

    配置Kubernetes网络 在master和nodes上都需要安装flannel yum install flannel 在master和nodes上都需要配置flannel vi /etc/sys ...

  9. 定期访问WebLogic Server返回状态的脚本

    在运维过程中,经常要获悉WebLogic Server的状态以便于主动的维护,本文通过weblogic WLST脚本初步设计了一下 脚本大概为2个,一是WLST的py脚本,getStates.py c ...

  10. Gitlab系列八之重置管理员密码

    gitlab web登入密码忘记以后可以用如下方式修改密码 [root@gitlat-test gitlab]# gitlab-rails console production Loading pro ...