发表于： 2019-07-10 22:23:07
1 823
今天完成的事情：初步完成任务14页面一和自适应、轮播图用css尝试了点击轮播和自动移动轮播、颈椎疼，有点水
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.contain {position: relative;
margin: 0 auto;
width: 100%;
height: 200px;
text-align: center;
color: #fff;
overflow: hidden;}
label {width: 20px;
margin: 0 10px;
line-height: 20px;
color: #fff;
background-color: #000;
border-radius: 100%;
cursor: pointer;
z-index: 777;}
.one {background-color: red;}
.two {background-color: aqua;}
.three {background-color: blueviolet;}
.contain ul {padding: 0;
width: 300vw;
transition: all 0.5s;}
.contain li {float: left;
width: 100vw;
height: 200px;
line-height: 200px;
font-size: 30px; }
.label1 {position: absolute;
bottom: 10px;
left: 45%;
margin-left: -10px !important;}
.label2 { position: absolute;
bottom: 10px;
left: 50%;
margin-left: -10px !important;}
.label3 { position: absolute;
bottom: 10px;
left: 55%;
margin-left: -10px !important; }
#a:checked~ul {margin-left: 0;}
#a:checked~.label1 {background-color: burlywood}
#b:checked~ul {margin-left: -100vw;}
#b:checked~.label2 {background-color: burlywood;}
#c:checked~ul {margin-left: -200vw;}
#c:checked~.label3 {background-color: burlywood;}
</style>
</head>
<body>
<div class="contain">
<input type="radio" name="lunbo" value="0" id="a" hidden>
<label class="label1" for="a">1</label>
<input type="radio" name="lunbo" value="1" id="b" hidden>
<label class="label2" for="b">2</label>
<input type="radio" name="lunbo" value="2" id="c" hidden>
<label class="label3" for="c">3</label>
<ul class="lis22t">
<li class="one">1111</li>
<li class="two">222</li>
<li class="three">333</li>
</ul>
</div>
</body>
</html>
明天计划的事情：完善组件库，继续任务14/15
遇到的问题：暂没
收获：
返回列表
评论