• 2018年2月6日学习总结


    浮动,

    float:left/right

    消除浮动:

    clear:left/right/both

    div浮动

    overflow: hidden;
    *//*隐藏看不到的部分*/
    overflow: hidden;

    滚动条

    overflow: auto;
    

    /*自适应*/

    float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

    如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

    overflow 属性规定当内容溢出元素框时发生的事情。

    这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

    嵌入其他网页标签:

    <iframe></iframe>

    <iframe src="http://www.baidu.com/" frameborder="1" width="1000px" height="500px"></iframe>嵌入在线网页
    <br>
    <iframe src="20602导航.html" frameborder="1" width="1000px" height="300px"></iframe>嵌入本地网页
    

    嵌入音频:

    video src="http://ting666.yymp3.com:86/new27/xuezhiqian7/4.mp3" controls autoplay loop></video>
    <!--controls:控制条
    autoplay:自动播放
    loop:循环播放
    

    飞起来标签:

    <marquee>欢迎访问</marquee>
    

    浮动练习:

    <div id="d0">
    <div id="d1">这是1</div>
    <div id="d2">这是2</div>
    <div id="d3">这是3</div>
    <div id="d4">这是4</div>
    <div id="d5">这是5</div>
    <div id="d6">这是6</div>
    <div id="d7">这是7</div>
    <div id="d8">这是8</div>
    <div id="d9">这是9</div>
    <div id="d10">这是10</div>
    <div id="d11">这是11</div>
    <div id="d12">这是12</div>
    
    #d0{
    	border: 1px solid;
    	 500px;
    	height: 600px;
    }
    #d1{
    	border: 1px solid;
    	height: 100px;
    	 100px;
    	float: left;
    	
    }
    #d2{
    	border: 1px solid;
    	height: 100px;
    	 100px;
    	float: left;
    }
    #d3{
    	border: 1px solid;
    	height: 100px;
    	 100px;
    	float: left;
    	
    }
    #d4{
    	border: 1px solid;
    	height: 100px;
    	 100px;
    	float: left;
    }
    #d5{
    	border: 1px solid;
    	height: 100px;
    	 90px;
    	float: left;
    }
    #d6{
    	border: 1px solid;
    	 316px;
    	height: 150px;
        float: left;
    	
    }
    #d7{
    	border: 1px solid;
    	 180px;
    	height: 200px;
       float: right;
    
    }
    #d8{
    	border: 1px solid;
    	height: 150px;
    	 220px;
    	float: left;
    }
    #d9{
    	border: 1px solid;
    	height: 150px;
    	 94px;
    	float: left;
    }
    #d10{
    	border: 1px solid;
    	height: 202px;
    	 180px;
    	float: right;
    }
    #d11{
    	border: 1px solid;
    	height: 100px;
    	 316px;
    	clear: left
    	
    }
    #d12{
    	border: 1px solid;
    	height: 90px;
    	 498px;
        clear: both;
    }
    

      

  • 相关阅读:
    HDU-5980
    HDU-5974
    HDU-5979
    关于position的定位
    javascript学习笔记w3chool
    表单相关css技巧
    fis压缩工具的使用
    将HTML页面内容存入json数组
    中介PHP连接前台HTML与数据库MySQL
    lesscss的使用
  • 原文地址:https://www.cnblogs.com/jason111/p/8421549.html
Copyright © 2020-2023  润新知