[深圳|结业弟子]JS-陈星宇|2018年04月23日的日报-技能树.IT修真院

发表于： 2018-04-23 19:44:19

1 489

编辑日

今天做的事：

继续任务8

1.学习了响应式导航的使用

<div class="navbar-header">
    <div class="pull-left">
        <img class="img-responsive" src="../img/task8-1/jnshu.com.png" alt="">
    </div>
    <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#jnshu">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div class="collapse navbar-collapse" id="jnshu">
    <ul class="nav navbar-nav navbar-right">
        <li><a class="menu" href="#">首页</a></li>
        <li><a class="menu" href="#">职业</a></li>
        <li><a class="menu" href="#">推荐</a></li>
        <li><a class="menu" href="#">关于</a></li>
    </ul>
</div>

2.学习了背景图片的响应式用法

html代码

<body>

</div>

</body>

CSS代码

#web_bg{

position:absolute;

top: 0;

left: 0;

width:100%;

height:100%;

z-index:-10;

zoom: 1;

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-position: center 0; }

遇到的问题

1.在布局图片时，一开始将首页的大图片设z-index负数(让两个div重叠)

让左右的方向符可操作，为此将图片绝对定位以脱离文档流

但当点开小屏幕的导航菜单时，高度被撑开，正常布局被打破

然后听说做个轮播图就可以正常使用了，看了一会儿，没看懂

退而求其次，又回到PS把带符号的图片下载以作为背景图片。

2.底部边框hover时会撑开盒子的高度

一开始设置盒子的box-sizing，hover时改变底部边框的有无切换

但可能是框架的优先级太高，一直无法实现。在官网看到了，正确的解法

应该是hover时改变边框的颜色，将原颜色设置为绿色，hover时变白。

改变边框颜色而不是添加边框！！！

3.文字无法左对齐：

刚开始一直纠结这一块，现在知道了响应式布局的要求后，对这个就没有执念了

3.这一块使用flex布局时更偏向设计稿的布局，但有一个问题：

圆的半径垂直方向与水平方向会有偏差

.method .step {
    display:flex;
    font-size: 16px;
    padding-bottom: 5vw;
    padding-top: 5vw;
    align-items: center;
    text-align: center;
    background: #f66f6f;
}
.step .step-info {
    display: inline-block;
    align-items: center;
}
.step .circle {
    width: .3rem;
    height: .3rem;
    border-radius: .3rem;
    box-shadow: #e1e1e1;
    background: #f5c97b;
}
.step p {
    display: inline-flex;
}