发表于: 2018-07-31 23:05:41

1 598


今天完成的事情:

1.导航栏取消用bootstrap写,用普通方式写,十分钟就完成了

2.图片轮播。

3.左边自适应,右边定宽没完成,和任务五不太一样,需要用别的方法

4.任务五修改完成,已经提交

明天计划的事情:

1.把任务八的第一张图完成。

2.第二张图完成三分之一

遇到的问题:左边自适应,右边定宽。。



收获:

1. 把权重什么的取消掉了,既然可以简单写导航栏,何必一定用框架呢。

<div class="daoHang">
<span class="wordTask81">首页</span>
<span class="wordTask81">职业</span>
<span class="wordTask81">推荐</span>
<span class="wordTask81">关于</span>
</div>

.daoHang{
width: 100%;
   padding: 2rem 0;
   background-color: #19b077;
   color: white;
   font-size: 2rem;
   text-align: right;
   padding-right: 15rem;
}
.wordTask81{
padding: 0 1rem;
}


2.任务五的修改,把尺寸全部换成rem了,html{

font-size:10px;}

然后以前手机显示特别难看的情况,我已经改好了,基本没给高度,是用元素加paddingtop和bottom撑起来的。

字体也弄小了,现在看起来好多了。


3.然后就是图片的轮播,改了两点,就可以了。

改了左右,弄过来的教程是反的,添加了缺少的一句话,就行了。

<a class="carousel-control left" href="#myCarousel"
  data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel"
  data-slide="next"> <span _ngcontent-c3="" aria-hidden="true"
                           class="glyphicon glyphicon-chevron-right"></span></a>


4.然后就是下面的三个块并列排列,我用的float,left。

还要达到左边自适应,右边定宽,的效果,这个还没弄好。教程感觉有问题,以前任务五左边定宽,右边自适应又不合适现在的情况,因为任务五只有文字,而这个有图片和文字,还有float。

.leftEightOne{
margin: 2rem 3rem;
   width: 200px;
   color: #3c3c3c;
   text-align: center;
   float:left;
}

<div class="leftEight">

.leftEight{
   margin-right:-15rem;
   width:100%;
}
<div class="leftEightOne">
<div class="pictureEight">
<img src="media/rocket.png">
</div>
<p class="wordTask82">高效</p>
<p class="wordTask83">将五到七年的成长时间,缩短到一年到三年。</p>
</div>
<div class="leftEightOne">
<div class="pictureEight">
<img src="media/archive.png">
</div>
<p class="wordTask82">规范</p>
<p class="wordTask83">标准的实战教程,不会走弯路</p>
</div>
<div class="leftEightOne">
<div class="pictureEight">
<img src="media/Shape-253.png">
</div>
<p class="wordTask82">人脉</p>
<p class="wordTask83">同班好友,同院学长,技术大师,入学就混入职脉圈,为以后铺平道路。</p>
</div>
</div>


进度:CSS任务八

任务开始时间:2018.07.30
预计demo时间:2018.08.04
是否有延期风险:有。                        

任务代码地址:任务五代码已经提交  (修改后的)

任务六:https://kewangbuji.github.io/cssTask/task6/task6.html

任务七:https://kewangbuji.github.io/cssTask/task7/task7Test.html

https://kewangbuji.github.io/cssTask/task7/task7Result.html

https://kewangbuji.github.io/cssTask/task7/task7Homepage.html




返回列表 返回列表
评论

    分享到