CSS Class 3

学习内容：

1.float，可使div脱离其原来位置进行位移

（1）float:left 向左浮动；（2）float:right 向右浮动；

 1 <html>
 2 <head>
 3 　　<style>
 4 　　　　#d1 {
 5     　　　　background-color: red;
 6     　　　　width: 100px;
 7     　　　　height: 100px;
 8     　　　　float: left;     /*浮动会脱离当前位置，不占用原来位置*/
 9     　　}
10 　　　　#d2 {
11     　　　　background-color: blue;
12     　　　　width: 100px;
13     　　　　height: 100px;
14     　　　　float: right;
15     　　}
16 　　</style>
17 </head>
18 
19 <body>
20 　　<div id="d1">我是左</div>
21 　　<div id="d2">我是右</div>
22 </body>

2.clear

可对标签左右方向的float元素进行清除，避免元素之间相互叠加

 1 <head>
 2 　　<style>
 3         #d1 {
 4             background-color: red;
 5             width: 100px;
 6             height: 100px;
 7             float: left;  
 8         }
 9         #d2 {
10             background-color: blue;
11             width: 100px;
12             height: 100px;
13             float: right;
14         }
15         #d3 {
16             background-color: cornflowerblue;
17             height: 900px;
18             width: 100%; 
19             clear: both;/*若不清除浮动，会和D1 D2重合*/
20         }    
21 　　</style>
22 </head>
23 <body>
24     <div id="d1">我是左</div>
25     <div id="d2">我是右</div>
26     <div id="d3">我是底部</div>
27 </body>
28

3.overflow，对溢出边框的元素怎么处理

（1）hidden：隐藏，可以对X Y轴方向进行单独设着 overflow-x   overflow-y

 （2）scroll：不论有没有溢出，都会产生一个滚动条

（3）auto：溢出时产生一个滚动条，否则不产生

PS：利用overflow可用于制作带滚动条的内容！

 1 <head>
 2 　　<style>
 3 　　#of {
 4     　　width: 130px;
 5     　　height: 50px;
 6     　　border: 1px solid red;
 7     　　position: relative;
 8     　　left: 500px;
 9     　　overflow: hidden;
10     　　/*隐藏溢出部分，也可以单独设置x，y方向隐藏 scroll，卷动，强制加滚动条
11     　　auto 溢出后自动加滚动条
12     　　word-break: 全部折行，无视标点和回车等换行符；
13    　　 word-wrap: 可以视标点符号等换行，会产生空白*/
14 　　</style>
15 </head>
16 <body>
17 　　<div id="of">
18         abcdefghijklmn,
19         akjafjfjfjafwdaddadd,q
20         wsdssa,qqwew 
21         eq,dadwdadadwww,adsdasda.
22 　　</div>
23 </body>

   4.iframe 框架标签，可用来在当前网页内嵌入网页

1 <iframe src="http://www.baidu.com" frameborder="1" width="800px" height="500px"></iframe>

比如写随笔的输入页面就是使用iframe完成的

5.audio video标签，用来播放音乐和视频（了解即可）

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

 6.marquee 飞行文字标签（了解即可）

该段代码可实现文字在框体内来回弹跳：

1 <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
2       <marquee behavior="alternate">
3          bounce
4       </marquee>
5 </marquee> <!--飞行文字-->

 

                                                                                                                                                                                                                                     2018.02.06

posted @ 2018-02-06 12:48  0==1&1==0  阅读(133)  评论(0)  编辑  收藏  举报