1.浮动相关知识回顾
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>浮动回顾</title> 6 <style type="text/css"> 7 div{ 8 border: 1px solid black; 9 } 10 #d1,#d2,#d3{ 11 width: 200px; 12 height: 200px; 13 float: right; 14 } 15 #d1{ 16 background-color: yellow; 17 /* 1.2也可给浮动元素指定外边距,保证浮动元素浮动到一定位置后停下来 */ 18 margin-right: 30px; 19 /* 浮动元素之间也可设置外边距,使各个浮动元素之间保持一定的距离 */ 20 /* margin-left: 30px; */ 21 } 22 #d2{ 23 background-color: red; 24 } 25 #d3{ 26 background-color: blue; 27 } 28 #con{ 29 background-color: aqua; 30 /* 给浮动元素所在的父类元素添加overflow,重新计算高度 */ 31 overflow: hidden; 32 /* 1.1给浮动元素的父类指定內边距,保证浮动元素浮动到一定位置后停下来 */ 33 /* padding-right: 30px; */ 34 /* 1.3给浮动元素的父类设置宽度可以起到调整浮动元素位置的作用 */ 35 /* width: 700px; */ 36 37 } 38 </style> 39 </head> 40 <body> 41 <div id="con"> 42 <div id="d1"> 43 44 </div> 45 <div id="d2"> 46 47 </div> 48 <div id="d3"> 49 50 </div> 51 </div> 52 </body> 53 </html>
2.QQMusic1(QQ音乐首页案例-旧版)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>QQMusic1</title> 6 <link rel="stylesheet" type="text/css" href="css/zixuereset.css"/> 7 <link rel="stylesheet" type="text/css" href="css/QQMusic1.css"/> 8 </head> 9 <body> 10 <!-- 最外层容器 --> 11 <div id="con"> 12 <!-- 顶部菜单区 --> 13 <div id="top"> 14 <img id="logo" src="img/QQ音乐图标.png" > 15 <img class="menu" src="img/排行.png" > 16 <img class="menu" src="img/歌单.png" > 17 <img class="menu" src="img/电台.png" > 18 <img class="menu" src="img/MV.png" > 19 </div> 20 <!-- 音乐内容区 --> 21 <div id="music"> 22 <!-- 第一排音乐 --> 23 <div id="line1"> 24 <a href="#"> 25 <img src="img/1.png" > 26 </a> 27 <a href="#"> 28 <img src="img/2.png" > 29 </a> 30 <a href="#"> 31 <img src="img/3.png" > 32 </a> 33 <a href="#"> 34 <img src="img/4.png" > 35 </a> 36 </div> 37 <!-- 第二排音乐 --> 38 <div id="line2"> 39 <a href="#"> 40 <img src="img/5.png" > 41 </a> 42 <a href="#"> 43 <img src="img/6.png" > 44 </a> 45 <a href="#"> 46 <img src="img/7.png" > 47 </a> 48 <a href="#"> 49 <img src="img/8.png" > 50 </a> 51 </div> 52 </div> 53 </div> 54 </body> 55 </html>
QQMusic1.css
1 *{ 2 /* border: 1px solid red; */ 3 } 4 html,body,#con,#music{ 5 width: 100%; 6 height: 100%; 7 } 8 body{ 9 /* 去掉滚动条 */ 10 overflow: hidden; 11 } 12 .menu{ 13 float: right; 14 } 15 #top{ 16 background-image: url(../img/导航栏.png); 17 } 18 #music{ 19 margin-top: 20px; 20 } 21 #line1 a img,#line2 a img{ 22 width: 254px; 23 height: 254px; 24 } 25 #line1,#line2{ 26 width: 1050px; 27 margin: 10px auto 0; 28 } 29 a{ 30 margin-right: 2px; 31 } 32 #con{ 33 background-image: url(../img/背景.png); 34 background-repeat: no-repeat; 35 background-size: cover; 36 }