zoukankan      html  css  js  c++  java
  • 妙味云课堂之css:其它知识点汇总

    一. 热区

    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{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{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{200px;border:1px solid #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    </style>
    
    <p>
    要闻
    给志愿者回信:青年有担当国家就有前途 会见拜登 美称对中国新领导集体充满期待 
    卡梅伦成都吃火锅花877元 遭遇"奇葩"提问 教育部:高考改革将降低科目 探索不分文理科
    </p>


    五. 未知宽度的img居中

    <style>
    .box{ 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{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;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" />


  • 相关阅读:
    块级元素和内联元素
    cookie和session 区别
    hihernate一对多关联映射
    --查询50到80行数据
    单表查询
    表空间 用户
    进程遍历模块遍历
    字符转换函数
    控件综合2
    清理文件2
  • 原文地址:https://www.cnblogs.com/llguanli/p/6809482.html
Copyright © 2011-2022 走看看