浮动布局
float属性
|
属性值 |
说明 |
|
left |
元素向左浮动 |
|
right |
元素向右浮动 |
clear属性
|
属性值 |
说明 |
|
left |
清除左浮动 |
|
right |
清除右浮动 |
|
both |
左右浮动一起清除 |
DIV浮动表格：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>浮动div</title> 6 <link rel="stylesheet" href="style9.css"> 7 8 <style> 9 10 #d1{ 11 border: 1px solid; 12 width: 600px; 13 height: 700px; 14 } 15 #d2{ 16 border: 1px solid; 17 width: 120px; 18 height:120px; 19 float: left 20 21 } 22 #d3{ 23 border: 1px solid; 24 width: 120px; 25 height:120px; 26 float: left 27 28 }#d4{ 29 border: 1px solid; 30 width: 120px; 31 height:120px; 32 float: left 33 34 }#d5{ 35 border: 1px solid; 36 width: 120px; 37 height:120px; 38 float: left 39 40 }#d6{ 41 border: 1px solid; 42 width: 110px; 43 height:120px; 44 float: right 45 } 46 #d7{ 47 border: 1px solid; 48 width: 400px; 49 height: 200px; 50 float: left 51 52 } 53 #d8{ 54 border: 1px solid; 55 width: 196px; 56 height: 250px; 57 float: right; 58 59 } 60 #d9{ 61 border: 1px solid; 62 width: 300px; 63 height: 250px; 64 float: left 65 66 } 67 #d10{ 68 border: 1px solid; 69 width: 98px; 70 height: 250px; 71 float: left 72 73 } 74 #d11{ 75 border: 1px solid; 76 width: 196px; 77 height: 250px; 78 float: right; 79 80 } 81 #d12{ 82 border: 1px solid; 83 width: 400px; 84 height: 48px; 85 float: left; 86 87 } 88 #d13{ 89 border: 1px solid; 90 width: 598px; 91 height: 72px; 92 float: left; 93 94 } 95 96 </style> 97 </head> 98 99 <body> 100 <div id="d1"> 101 <div id="d2">2</div> 102 <div id="d3">3</div> 103 <div id="d4">4</div> 104 <div id="d5">5</div> 105 <div id="d6">6</div> 106 <div id="d7">7</div> 107 <div id="d8">8</div> 108 <div id="d9">9</div> 109 <div id="d10">10</div> 110 <div id="d11">11</div> 111 <div id="d12">12</div> 112 <div id="d13">13</div> 113 </div> 114 115 116 </body> 117 </html> 118 119 列表导航： 120 121 <!doctype html> 122 <html> 123 <head> 124 <meta charset="utf-8"> 125 <title>无标题文档</title> 126 <style> 127 #daohang li{ 128 float: left; 129 list-style-type: none; 130 margin: 10px; 131 132 133 } 134 </style> 135 </head> 136 137 <body> 138 <ul id="daohang"> 139 <li>首页</li> 140 <li>新闻网</li> 141 <li>学校概况</li> 142 <li>机构设置</li> 143 <li>师资队伍</li> 144 <li>科学研究</li> 145 <li>人才培养</li> 146 <li>招生就业</li> 147 <li>大学文化</li> 148 <li>国际交流</li> 149 <li>校友联谊</li> 150 </ul> 151 </body> 152 </html>
内容溢出：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 /*处理溢出的三种方式：1直接把溢出部分隐藏*/ 8 /*overflow: hidden;*/ 9 /*2.把溢出部分通过滚动条显示（不管有没有溢出，都有滚动条）*/ 10 /*overflow:scroll;*/ 11 /*3.把溢出部分通过滚动条显示（如果没溢出，无滚动条，如果溢出了，自动加滚动条）*/ 12 /*overflow: auto;*/ 13 #d1{ 14 width: 100px; 15 height: 100px; 16 border: 1px solid black; 17 overflow: scroll 18 19 } 20 #d2{ 21 width: 50px; 22 height: 50xp; 23 border: 1px solid black; 24 overflow: hidden 25 26 } 27 #d3{ 28 width: 50px; 29 height: 50px; 30 border: 1px solid black; 31 overflow: auto; 32 33 } 34 </style> 35 </head> 36 37 <body> 38 <div id="d1"> 39 <p>央视网消息：2月4日，《中共中央 国务院关于实施乡村振兴战略的意见》公开发布，这是按照不久前闭幕的中央农村工作会议作出的最新部署。2018年中央一号文件主题聚焦实施乡村振兴战略，是改革开放以来第20个、进入新世纪以来连续下发的第15个以“三农”为主题的中央一号文件。 40 41 新战略绘制发展新蓝图 带来新变化</p> 42 43 44 </div> 45 <div id="d2"> 46 <p>战略，是改革开放以来第20个、进入新世纪以来连续下发的第15个以“三农”为主题的中央一号文件。 47 </p> 48 49 </div> 50 <div id="d3"> 51 <p>这是按照不久前闭幕的中央农村战略，是改革开放以来第20个、进入新世纪以来连续下发的第15个以“三农”为主题的中央一号文件。 52 </p> 53 54 </div> 55 </body> 56 </html>
360练习：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>快资讯</title> 6 7 <style> 8 9 #d1{ 10 border: 1px solid black; 11 width: 850px; 12 height: 600px; 13 overflow: auto 14 15 } 16 #d2{ 17 font-size: 20px; 18 font-weight: bold; 19 color: green; 20 21 } 22 #d3{ 23 border-left: 1px solid #A1A1A1; 24 } 25 #d4{ 26 background-color: antiquewhite 27 } 28 a{ 29 color: black; 30 text-decoration: none 31 } 32 a:hover{color: red; 33 34 } 35 36 .s2{width: 125px; 37 height: 70px; 38 39 } 40 .s3{ 41 font-size: 2px; 42 color: #B3B3B3; 43 } 44 45 </style> 46 <link rel="stylesheet" href="style12.css"> 47 </head> 48 49 <body> 50 <div id="d1" align="center"> 51 <table align="center" border="1px" width="800px" height="1000px"> 52 <tr> 53 <td colspan="3" id="d2">快资讯</td> 54 <td align="right"><a href="" class="s1"><span class="s3">设置 </span></a><a href="" class="s1"><span id="d3" class="s3">更多》</span></a></td> 55 </tr> 56 <tr> 57 <td><img src="../作业2/img/02061.jpg" alt="" class="s2"> 58 </td> 59 <td><a href="" class="s1"><span>中国成功进行陆基中段反导拦截技术试验</span></a><br><span class="s3">刚刚</span> 60 </td> 61 <td><img src="../作业2/img/02062jpg.jpg" alt="" class="s2"></td> 62 <td><a href="" class="s1"><span>淄博小伙每天在手机上玩这个，半年存款惊呆众人</span></a><br><span class="s3">刚刚</span> 63 </td> 64 </tr> 65 <tr> 66 <td><img src="../作业2/img/02063.jpg" alt="" class="s2"></td> 67 <td><a href="" class="s1"><span>佐菲奥特曼和初代奥特曼分别与贝利亚融合，谁更强一些</span></a><br><span class="s3">刚刚</span> 68 </td> 69 <td><img src="../作业2/img/02064.png" alt="" class="s2"></td> 70 <td><a href="" class="s1"><span>2018“我向总理说句话”网民建言征集活动来了</span></a><br><span class="s3">3分钟前</span> 71 </td> 72 </tr> 73 <tr> 74 <td><img src="../作业2/img/02065.jpg" alt="" class="s2"></td> 75 <td><a href="" class="s1"><span>十二星座追谁最难成功?你知道吗?</span></a><br><span class="s3">8分钟前</span> 76 </td> 77 <td><img src="../作业2/img/02066.gif" alt="" class="s2"></td> 78 <td><a href="" class="s1"><span>投资0.6亿票房仅414万，网友：开场十分钟就让我诊断出这片子真烂</span></a><br><span class="s3">9分钟前</span></td> 79 </tr> 80 <tr> 81 <td><img src="../作业2/img/02067.gif" alt="" class="s2"></td> 82 <td><a href="" class="s1"><span>看完这个，满脸痘痘不用挤了</span></a><br><span class="s3">贪玩蓝月`顶新</span> 83 </td> 84 <td><img src="../作业2/img/02068jpg.jpg" alt="" class="s2"></td> 85 <td><a href="" class="s1"><span>爆笑Gif:打群架谁怕谁?看谁更狠呀</span></a><br><span class="s3">15分钟前</span> 86 </td> 87 </tr> 88 <tr><br> 89 90 <td><img src="../作业2/img/02069.jpg" alt="" class="s2"></td> 91 <td><a href="" class="s1"><span>大爷将小二哈摆成一排售卖，没想到它们竟乖乖等着被买，简直萌翻</span></a><br><span class="s3">18分钟前</span> 92 </td> 93 <td><img src="../作业2/img/020610.gif" alt="" class="s2"></td> 94 <td><a href="" class="s1"><span>十二星座谁最冷血?看看你的冷血指数有多高!</span></a><br><span class="s3">20分钟前</span> 95 </td> 96 </tr> 97 <tr> 98 <td><img src="../作业2/img/020611.jpg" alt="" class="s2"></td> 99 <td><a href="" class="s1"><span>梦幻西游：玩家狂买10本兽决大赚700万！可为何被喷输了一辈</span></a><br> 100 <span class="s3">25分钟前</span></td> 101 <td><img src="../作业2/img/020612.jpg" alt="" class="s2"></td> 102 <td><a href="" class="s1"><span>古天乐：昨天PK爆了张家辉两个麻痹戒指，回收赚了两万</span></a><br><span class="s3">祥云网络·顶新</span> 103 </td> 104 </tr> 105 <tr> 106 <td><img src="../作业2/img/020613.jpg" alt="" class="s2"></td> 107 <td><a href="" class="s1"><span>新人上位让四强各队伍争冠如有神助！女排新“三巨头”呼之欲出？</span></a><br> 108 <span class="s3">31分钟前</span></td> 109 <td><img src="../作业2/img/020614.jpg" alt="" class="s2"></td> 110 <td><a href="" class="s1"><span>老公要把瘫痪婆婆接回家，被我赶出门外，第二天我把门锁换了！</span></a><br> 111 <span class="s3">34分钟前</span></td> 112 </tr> 113 <tr> 114 <td><img src="../作业2/img/020615.jpg" alt="" class="s2"></td> 115 <td><a href="" class="s1"><span>搞笑GIF:见过坑女朋友的，没有见过这样坑的</span></a><br> 116 <span class="s3">38分钟前</span></td> 117 <td><img src="../作业2/img/020616.jpg" alt="" class="s2"></td> 118 <td><a href="" class="s1"><span>16万聘礼全还你，我要退婚，你家的情况我连孩子都不敢生！</span></a><br><span class="s3">38分钟前</span> 119 </td> 120 </tr> 121 122 </table> 123 <div align="center" id="d4">刚刚看到这里 点击刷新<img src="../作业2/img/0206.png" alt=""></div> 124 </div> 125 126 </body>
</html>
iframe和音频：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <!--框架的标签：把别人的网页嵌入到你自己的网页--> 10 <iframe src="https://www.baidu.com/" frameborder="1" width="1000px" height="300px"></iframe> 11 <iframe src="山东理工大学.html" frameborder="1" width="1000px" height="200px"></iframe> 12 13 <!--音频标签 14 controls:控制条 15 autoplay：自动播放 16 loop：循环播放 17 --> 18 <video src="http://ting666.yymp3.com:86/new21/kankan4/13.mp3" controls autoplay loop></video> 19 <!--飞起来标签--> 20 <marquee behavior="" direction="">欢迎光临</marquee> 21 </body> 22 23 24 </html>