妙味云课堂之css：其他知识点汇总

最新推荐文章于 2024-07-19 15:37:32 发布

jim8757

最新推荐文章于 2024-07-19 15:37:32 发布

阅读量79

点赞数

文章标签： php

一. 热区

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" />

jim8757

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
妙味云课堂之css：其他知识点汇总

一. 热区map 热区，area 点击区域shape="circle" 圆型，coords="圆心点X，圆心点Y，圆的半径"shape="rect" 矩形，coords="矩形左上角x，矩形左上角Y，矩形右下角X，矩形右下角Y"shape="poly" 多边形，coords="第一个点X，第一个点Y，第二个点X，第二个点Y..."&lt;img
复制链接

扫一扫