ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML5-08

2021-07-06 21:32:34  阅读:123  来源: 互联网

标签:08 HTML5 background inline position fixed top nbsp


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 }

 

标签:08,HTML5,background,inline,position,fixed,top,nbsp
来源: https://www.cnblogs.com/zhangyuanmingboke/p/14979026.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有