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 }