发表于： 2019-11-18 17:17:21
1 865
今天完成的事情：修改了一下以前的bug
明天计划的事情： 继续后续任务
遇到的问题： 整体修改尺寸之后响应式部分就需要修改一些代码重新调试花费时间较长
收获：先上效果图
字体大小还没有调整，主要是舍弃自适应之后，响应式的部分就要多写一点，具体代码
<div class="d1">
<span style="white-space: nowrap;">客服电话：010-594-34567</span>
<div class="topright">
<img src="./8/001.jpg" alt="">
<img src="./8/002.jpg" alt="">
<img src="./8/003.jpg" alt="" style="padding-right: 10px;">
</div>
</div>
<p align="right" class="x1" style="margin: 0;">登录 ︱ 注册</p>
<img class="rr" src="./8/dddaa.jpg" alt="">
<div class="box2">
<div class="m1"><a href="" ><label id="menu1" for="menu"></label></a></div>
<input id="menu" type="checkbox">
<div class="d2">
<a href="" class="a1">
首页
<div class="y1"></div>
</a>
<a href="./g3.html" class="a2">
首页
<div class="y2"></div>
</a>
<a href="./g2.html" class="a3">
首页
<div class="y3"></div>
</a>
<a href="./g.html" class="a4">
首页
<div class="y4"></div>
</a>
</div>
</div>
<div class="carousel slide" id="slidershow" data-ride="carousel" data-interval="5000">
<!--计数器-->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0"></li>
<li data-target="#slidershow" data-slide-to="1"></li>
<li data-target="#slidershow" data-slide-to="2"></li>
</ol>
<!--图片容器-->
<div class="carousel-inner">
<div class="item active">
<img src="../g/8/Image.png"/>
<!--添加对应标题和内容-->
<div class="carousel-caption">
<div class="d3">
<div class="d3v">
<p align="right" class="n1">作为你一个初级菜鸟，你是否想要了解  </p>
<div class="lu1">
<span class="n2">50万</span>
<span class="n3">年薪的程序员，都会那些技能呢？</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<img src="../g/8/Image.png"/>
<!--添加对应标题和内容-->
<div class="carousel-caption">
<div class="d3">
<div class="d3v">
<p align="right" class="n1">作为你一个初级菜鸟，你是否想要了解 </p>
<div class="lu1">
<span class="n2">50万</span>
<span class="n3">年薪的程序员，都会那些技能呢？</span>
</div>
</div>
</div>
</div>
</div>
css部分
body{
margin: 0;
padding: 0;
width: 1920px;
}
.d1{
display: flex;
justify-content: space-between;
padding: 0 360px 0 360px;
height: 40px;
align-items: center;
}
.x1{
display: none;
}
.box2{
background: #29b078;
}
.d2{
padding: 0 360px;
background-color: #29b078;
display: flex;
flex-direction: row-reverse;
align-items: center;
height: 100px;
}
.rr{
position: absolute;
left: 0px;
top: 65px;
margin-left: 360px;
}
.d2 a{
display: inline-block;
line-height: 100px;
width: 100px;
text-align: center;
position: relative;
}
#menu{
display: none;
}
#menu1{
display: none;
margin: 0;
}
.y1{
height: 2px;
width: 100px;
position: absolute;
background-color: white;
bottom: 0;
visibility:hidden;
}
.y2{
height: 2px;
width: 100px;
position: absolute;
background-color: white;
bottom: 0;
visibility:hidden;
}
.y3{
height: 2px;
width: 100px;
position: absolute;
background-color: white;
bottom: 0;
visibility:hidden;
}
.y4{
height: 2px;
width: 100px;
position: absolute;
background-color: white;
bottom: 0;
visibility:hidden;
}
.d2 a:link {
font-size: 12px;
color: #fff;
text-decoration: none;
}
.d2 a:visited {
font-size: 12px;
color: #fff;
text-decoration: none;
}
.d2 a:hover {
font-size: 12px;
color: #fff;
text-decoration: none;
}
.a1:hover .y1{
visibility: visible;
}
.a2:hover .y2{
visibility: visible;
}
.a3:hover .y3{
visibility: visible;
}
.a4:hover .y4{
visibility: visible;
}
.d3{
display: flex;
justify-content:center;
align-items: center;
}
.item img{
width: 100%;
}
改完之后变得很挫，明天再把命名方式规范一下，再继续后面的部分
返回列表
评论