发表于: 2019-10-30 22:19:17

1 994


今天学习的内容

今天的是任务六的开始,在任务六当中header部分和footer部分遇到的主要问题都是图标放置的位置问题在头的部分我用的是弹性盒子的方式,地点的图标则是使用的postion的相对定位。

header {                                     .header3 {

display: flex;                                           width: 25px;

align-items: center;                                    height: 25px

justify-content: center;                                position: relative;

height: 60px;                                            left: 14%

position: absolute;                                      padding-left: 10%;}

left: 0px;

top: 0px;

width: 100%;

background-color: #5AC0CE;

margin-bottom: 1px;

}

而在footer部分要实现三个图标的等分的分布,我任然用的弹性盒子,不过需要在最左端和最右端加两个背景色相同的空盒子。

 <footer class="footer">

      <div class="footer1"></div>

      <div class="footer2"><img src="images/task5-2_13.jpg" width="30px" height="25px"><p style="text-align: center;">首页</p></div>

      <div class="odiv"><img class="pic" src="images/task5-2_18.jpg" width="28px" height="28px"></div>

      <div class="footer3"><img src="images/task5-4_03.jpg" width="23px" height="30px"><p style="text-align: center;position: relative;right:1px;">我的</p></div>

      <div class="footer1"></div>

    </footer>

难点是今天要做一个模拟下拉框,整体的html结构能很明白的看懂,但是运用到实际的修改中遇到了多种多样的问题。

明天要完成的工作:

明天要把任务六的最后一部分完成,也就是下拉框下面的一个一个div块。应该会完成的比较迅速,也用到了之前学习的雪碧图。完成任务六后要对任务七进行熟悉,把该切的图切了。再把需要补充的知识点补充,大体框架的搭设。或者是把headerfooter给完成了。

今天遇到的问题:

今天的难点基本上都是在下拉框中的下拉框中的格式,把.nav>li要定成浮动形式才能做成横板的导航栏,而后是下面的一条灰线,最开始我采用的ul的底部外边框,但是后来发现下拉后就会往下移动,后来就不设边框了,在其下方加了一个1px高的小盒子用小盒子顶部的上边框去完成通过相对的定位调整到应该有的位置。第三个难点是倒三角,倒三角可以用boder的三边来完成我也是在网上找了后才知道的, 加在第一层的li之中也需要调整他的位置。



返回列表 返回列表
评论

    分享到