发表于： 2022-09-06 23:27:49
0 439
今天将第二张示图做了个模板出来
css代码：
* {
margin: 0;
padding: 0;
}
.box {
height: 100vh;
background-color: #29bde0;
margin: 0 auto;
}
.head {
height: 120px;
background-color: #29bde0;
}
.head p {
color: #ffffff;
font-size: 34px;
text-align: center;
padding-top: 73px;
}
.rectangle {
float: left;
margin: 70px 0 0 20px;
}
.cancel {
float: right;
margin: 70px 20px 0 0;
}
.navigation {
padding-top: 6px;
height: 120px;
background-color: #29bde0;
}
.symbol {
}
.polygon {
float: right;
}
.fragment {
background-color: #b9e9f5;
height: 82px;
}
.fragment p {
float: left;
font-size: 26px;
padding-top: 20px;
padding-left: 53px;
}
.tips {
color: #f2fbfd;
font-size: 24px;
}
.content {
width: 100%;
height: 721px;
background-color: #29bde0;
display: inline-block;
}
.subsection {
width: 100%;
background-color: #29bde0;
}
.player {
width: 136px;
height: 136px;
background-color: #f5c97b;
display: inline-block;
margin: 10%;
}
.bottom {
height: 185px;
background-color: #29bde0;
}
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=720,initial-scale=1">
<link rel="stylesheet" href="vote.css">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<dic class="box">
<div class="head">
<img class="rectangle" src="tupian/矩形%206%20拷贝%203.png" alt="矩形">
<img class="cancel" src="tupian/取消.png" alt="取消">
<p>投票</p>
</div>
<div class="navigation">
<div class="fragment">
<p>发言讨论结束，请大家投票</p>
<img class="polygon" src="tupian/多边形%201.png" alt="多边形">
</div>
<p class="tips">点击得票数最多人的头像</p>
</div>
<div class="content">
<div class="subsection">
<div class="player"></div>
<div class="player"></div>
<div class="player"></div>
</div>
<div class="subsection">
<div class="player"></div>
<div class="player"></div>
<div class="player"></div>
</div>
<div class="subsection">
<div class="player"></div>
<div class="player"></div>
<div class="player"></div>
</div>
</div>
<div class="bottom">
<div></div>
</div>
</dic>
</body>
</html>
明天计划：完成接下来的任务。
返回列表
评论