代码改变世界

20180206-div浮动表格·导航·内容溢出·iframe·音频

2018-02-06 16:27  王那天  阅读(341)  评论(0)  编辑  收藏  举报

 

浮动布局

 

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">设置&nbsp;&nbsp;</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>