1.抖音首页案例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>抖音项目</title> 6 <link rel="stylesheet" type="text/css" href="css/reset.css" /> 7 <link rel="stylesheet" type="text/css" href="css/douyinindex.css" /> 8 </head> 9 <body> 10 <!-- 关于video:autoplay:自动播放;loop:无限循环;muted:静音播放 --> 11 <video id="video1" src="img/douyin.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> 12 <div id="con"> 13 <!-- 顶层 --> 14 <div id="top"> 15 <!-- logo --> 16 <img id="logo" src="img/logo_efcda07.png"> 17 <!-- 右侧菜单 --> 18 <ul> 19 <li> 20 <a href="#">开发平台</a> 21 </li> 22 <li> 23 <a href="#">视频上传</a> 24 </li> 25 <li> 26 <a href="#">抖音特效师</a> 27 </li> 28 <li> 29 <a href="#">抖音音乐人</a> 30 </li> 31 <li> 32 <a href="#">机构认证</a> 33 </li> 34 <li> 35 <a href="#">企业认证</a> 36 </li> 37 </ul> 38 </div> 39 <!-- 中间 --> 40 <div id="middle"> 41 <img id="text" src="img/wenben.png"> 42 <a id="donwload1" href="#"> 43 <!-- 将图片作为超链接背景 --> 44 </a> 45 <a id="donwload2" href="#"> 46 <!-- 将图片作为超链接背景 --> 47 </a> 48 <a id="donwload3" href="#"> 49 <!-- 将图片作为超链接背景 --> 50 </a> 51 </div> 52 <!-- 底层 --> 53 <div id="bottom"> 54 55 <p id="p1">| 56 <a href="#">音乐</a> | 57 <a href="#">用户服务协议</a> | 58 <a href="#">隐私政策</a> | 59 <a href="#">帐号找回</a> | 60 <a href="#">联系我们</a> | 61 </p> 62 <p>2018©抖音 | 京ICP16016397号-3 | 北京微播视界科技有限公司 | 地址：北京市海淀区知春路51号4层408 63 </p> 64 <p>中国互联网举报中心 | 网络文化许可证-京网文-（2016）2282-264号 | 违法和不良信息举报：010-83434212 | 举报邮箱：jubao@douyin.com 65 </p> 66 <p><img id="gongan" src="img/gongan.png" />京*网安备 11010802023605号</p> 67 </div> 68 </div> 69 </body> 70 </html>
douyinindex.css
1 * { 2 /* border: 1px solid black; */ 3 } 4 5 body { 6 /* background-color: gray; */ 7 overflow: hidden; 8 } 9 10 #logo { 11 /* 绝对定位 */ 12 position: fixed; 13 left: 100px; 14 top: 86px; 15 } 16 ul{ 17 position: fixed; 18 left: 900px; 19 top: 86px; 20 } 21 li{ 22 display: inline-block; 23 margin-right: 15px; 24 } 25 a{ 26 color: white; 27 } 28 #text{ 29 position: fixed; 30 top: 350px; 31 right: 135px; 32 } 33 #donwload1 { 34 position: fixed; 35 background-image: url(../img/android.png); 36 display: inline-block; 37 width: 150px; 38 height: 55px; 39 top: 450px; 40 right: 360px; 41 background-size: cover; 42 border-radius: 5%; 43 } 44 45 #donwload2 { 46 position: fixed; 47 background-image: url(../img/appstore.png); 48 display: inline-block; 49 width: 150px; 50 height: 55px; 51 top: 450px; 52 right: 200px; 53 background-size: cover; 54 border-radius: 5%; 55 } 56 57 #donwload3 { 58 position: fixed; 59 background-image: url(../img/erweima.png); 60 display: inline-block; 61 width: 55px; 62 height: 55px; 63 top: 450px; 64 right: 135px; 65 background-size: cover; 66 border-radius: 5%; 67 } 68 #bottom{ 69 position: fixed; 70 bottom: 0; 71 text-align: center; 72 width: 100%; 73 color: white; 74 } 75 #gongan{ 76 width: 12px; 77 bottom: 0; 78 } 79 p,img{ 80 font-size: 14px; 81 } 82 #video1{ 83 /* display: inline-block; */ 84 /* size: cover; */ 85 /* repeat: no-repeat; */ 86 left: center; 87 }