樂
喜
安
平

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         <!-- 关于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">|&nbsp;&nbsp;
56                     <a href="#">音乐</a>&nbsp;&nbsp;|&nbsp;&nbsp;
57                     <a href="#">用户服务协议</a>&nbsp;&nbsp;|&nbsp;&nbsp;
58                     <a href="#">隐私政策</a>&nbsp;&nbsp;|&nbsp;&nbsp;
59                     <a href="#">帐号找回</a>&nbsp;&nbsp;|&nbsp;&nbsp;
60                     <a href="#">联系我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;
61                 </p>
62                 <p>2018&copy;抖音&nbsp;&nbsp;|&nbsp;&nbsp;京ICP16016397号-3&nbsp;&nbsp;|&nbsp;&nbsp;北京微播视界科技有限公司&nbsp;&nbsp;|&nbsp;&nbsp;地址：北京市海淀区知春路51号4层408
63                 </p>
64                 <p>中国互联网举报中心&nbsp;&nbsp;|&nbsp;&nbsp;网络文化许可证-京网文-（2016）2282-264号&nbsp;&nbsp;|&nbsp;&nbsp;违法和不良信息举报：010-83434212&nbsp;&nbsp;|&nbsp;&nbsp;举报邮箱：jubao@douyin.com
65                 </p>
66                 <p><img id="gongan" src="img/gongan.png" />京公安网安备&nbsp;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 }

 

posted @ 2021-07-06 21:22  喵酱爱吃鱼  阅读(33)  评论(0)  编辑  收藏  举报