HTML和CSS的抖音登录界面代码(无跳转)
主代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>〖抖音短视频〗 记录美好生活</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
</head>
<style>
body{
margin: 0;
}
video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
}
.header{
width: 1200px;
height: 120px;
}
.login_head{
width: 98px;
height: 120px;
margin-left: 80px;
position: fixed;
/*display: inline-block;*/
}
.a0{
width:98px;
height: 120px;
}
.a0>img{
margin-top: 32px;
}
.head_right{
width: 651px;
height: 122px;
margin-right: 150px;
float: right;
/*display: inline-block;*/
}
.one{
width: 107px;
height: 121px;
margin-left: 25px;
display: inline-block;
position: relative;
}
.a1{
position: absolute;
padding:50px 0px;
width: 64px;
height: 21px;
color: #F7F8F8;
}
.one>img{
position: absolute;
padding:50px 0px 0px 64px;
width: 38px;
height: 22px;
color: #F7F8F8;
}
.a2{
position: absolute;
margin-left: 135px;
padding: 50px 0px;
width: 64px;
height: 21px;
color: #F7F8F8;
}
.a3{
position: absolute;
margin-left: 256px;
padding: 50px 0px;
width: 80px;
height: 21px;
color: #F7F8F8;
}
.a4{
position: absolute;
margin-left: 382px;
padding: 50px 0px;
width: 80px;
height: 21px;
color: #F7F8F8;
}
.a5{
position: absolute;
margin-left: 528px;
padding: 50px 0px;
width: 64px;
height: 21px;
color: #F7F8F8;
}
.a6{
position: absolute;
margin-left: 647px;
padding: 50px 0px;
width: 64px;
height: 21px;
color: #F7F8F8;
}
.a7{
position: absolute;
margin-left: 725px;
padding: 50px 0px;
width: 64px;
height: 21px;
color: #F7F8F8;
}
.a7>img{
width: 18px;
height: 18px;
}
.middle{
width: 500px;
height: 182px;
margin-top: 280px;
margin-right: 360px;
margin-left: 1200px;
margin-bottom: 480px;
position: relative;
}
.im1{
width: 450px;
height: 80px;
}
.a10{
position: absolute;
bottom: 0px;
right: 50px;
}
.a9{
position: absolute;
bottom: 0px;
right: 110px;
}
.a8{
position: absolute;
bottom: 0px;
right: 250px;
}
.bd_link{
width: 100%;
height: 100px;
margin-top: 50px;
text-align: center;
}
.bd_link a{
color: #FFFFFF;
}
.p_link>a{
margin-left:5px;
width: 640px;
text-align: center;
font-size: 13px;
margin-top: 10px;
}
.p_button>span{
margin-left: 25px;
width: 640px;
height: 25px;
text-align: center;
font-size: 13px;
color: #FFFFFF;
}
.last1{
font-size: 13px;
text-align: center;
color: #FFFFFF;
}
.last2{
font-size: 13px;
text-align: center;
color: #FFFFFF;
}
.last2>img{
width: 20px;
height: 20px;
}
</style>
<body>
<video autoplay muted loop >
<source src="video/tvc.mp4">
</video>
<div class="header">
<div class="login_head">
<a class="a0" href="#">
<img src="img/logo_ef.png" alt="" width="98px" height="55px">
</a>
</div>
<div class="head_right">
<div class="one">
<a class="a1" href="#">开放平台</a>
<img src="video/beta_8d.png" alt="">
<a class="a2" href="#">视频上传</a>
<a class="a3" href="#">抖音特效师</a>
<a class="a4" href="#">抖音音乐人</a>
<a class="a5" href="#">机构认证</a>
<a class="a6" href="#">企业认证</a>
<a class="a7" href="#"><img src="img/unmute_cc.png" alt=""></a>
</div>
</div>
</div>
<div class="middle">
<img class="im1" src="img/slogan_2_8d5.png" alt="">
<a class="a8" href="#"><img class="im2" src="img/appstore_0.png" alt="" width="130px" height="50px"></a>
<a class="a9" href="#"><img class="im3" src="img/android_d.png" alt="" width="130px" height="50px"></a>
<a class="a10" href="#"><img class="im4" src="img/download_.png" alt="" width="50px" height="50px"></a>
</div>
<div class="bd_link">
<p class="p_link">
<a href="#">| 音乐 </a>
<a href="#">| 用户协议 </a>
<a href="#">| 隐私政策</a>
<a href="#">| 账号找回</a>
<a href="#">| 联系我们</a>
<a href="#">| 广告投放</a>
<a href="#">| 营业执照 |</a>
</p>
<p class="p_button">
<span>2019 © 抖音 | 京ICP备16016397号-3 | 北京微播视界科技有限公司 | 京B2-20170846</span>
</p>
<p class="last1">
<a href="#">中国互联网举报中心</a>| 网络文化许可证-京网文-(2016)2282-264号 | 违法和不良信息举报:400-140-2108 | 举报邮箱:jubao@douyin
</p>
<p class="last2">
<img src="img/gongan_d.png" alt="" >
<a href="#">京公网安备 11010802023605号</a> | 地址 : 北京市海淀区知春路51号4层408
</p>
</div>
</body>
</html>
reset
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb/eric/tools/css/reset/)
* http://cssreset
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html,body{
width: 100%;
height: 100%;
}
a{
text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
更多推荐
HTML抖音登录界面的基本代码
发布评论