HTML和CSS的抖音登录界面代码(无跳转)
主代码
<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;
}
.a0{
width:98px;
height: 120px;
}
.a0>img{
margin-top: 32px;
}
.head_right{
width: 651px;
height: 122px;
margin-right: 150px;
float: right;
}
.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-20170846span>
p>
<p class="last1">
<a href="#">中国互联网举报中心a>| 网络文化许可证-京网文-（2016）2282-264号 | 违法和不良信息举报：400-140-2108 | 举报邮箱：[email protected]
p>
<p class="last2">
<img src="img/gongan_d.png" alt="" >
<a href="#">京公网安备 11010802023605号a> | 地址 : 北京市海淀区知春路51号4层408
p>
div>
body>
html>
reset
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;
}
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;
}
