本文分析了抖音网页版的布局和交互设计，包括头部关注、推荐、附近和搜索功能，视频播放区，底部菜单以及用户信息展示。页面采用响应式设计，适应不同屏幕尺寸，同时展示了关键的操作元素如点赞、收藏、评论和分享。此外，还提到了页面中的动画效果和个性化元素，如圆形头像和品牌logo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抖音</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* @media screen and (min-width:400px) and (min-width:600px)
{
html{
size: 16px;
}
}
@media screen and (min-width:600px) and (min-width:800px)
{
html{
size: 32px;
}
} */
#ba{
position: relative;
text-align: center;
background-color: black;
}
/* p{
color: #fff;
} */
#g{
color: white;
margin-left: 500px;
}
#a{
color: white;
margin-right: 500px;
}
#b{
float: center;
}
li {
list-style: none;
float: left;
margin-left: 260px;
}
li a{
color: white;
text-decoration: none;
}
#c{
font-size: 20px;
display: block;
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 100%;
color: white;
padding-top: 330px;
padding-right: 20px;
}
#d{
font-size: large;
color: #fff;
position: absolute;
margin-left: -350px;
}
#e{
color: white;
position: relative;
top: -220px;
right: 600px;
font-size: 15px;
}
#wd{
font-size: 20px;
display: block;
position: fixed;
top: 0;
width: 100%;
height: 30px;
color: white;
padding-top: 100px;
border-top: 1px solid #eee;
}
#menu {
position: relative;
font-size: 20px;
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
color: white;
padding-top: 10px;
border-top: 1px solid #eee;
background-color: black;
}
#c1{
margin-bottom: 30px;
}
.img{
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid wheat;
animation: loading 2s linear 0s infinite;
}
@keyframes loading
{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body id="ba">
<div id="wd">
<i id="a" class="iconfont icon-zhibo"></i>
<span>关注</span>
<span>|</span>
<span>推荐</span>
<span>|</span>
<span>附近</span>
<i id="g" class="iconfont icon-sousuo"></i>
</div>
<div>
<div><video id="b" src="./video/1.mp4" controls></video></div>
<div id="c">
<span id="c1"><i class="iconfont icon-zanting_"></i></span><br>
<span id="c2"><i class="iconfont icon-shoucang1"></i></span><br>
<span id="c3"><i class="iconfont icon-pinglun"></i></span><br>
<span id="c4"><i class="iconfont icon-zhuanfa"></i></span><br>
<img class="img" src="./video/logo.png" >
</div>
</div>
<div id="e">
<P>@淘气的猫 </P>
<p>《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导，郑伊健、陈小春等主演。</p>
<p>@烟台融媒创作的原声视频-烟台传媒</p>
</div>
<div id="menu">
<li><a href="#">首页</a></li>
<li><a href="#">朋友</a></li>
<span id="d" class="iconfont icon-jiahaozhankai"></span>
<li><a href="#">消息</a></li>
<li><a href="#">我</a></li>
</div>
</body>
</html>
2024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
