HTML5-08
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 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 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 }
原文：https://www.cnblogs.com/zhangyuanmingboke/p/14979026.html