今天完成的事情：完成了任务十
明天计划的事情：修改任务十bug，提交任务十，开始任务十一
遇到的问题：感觉对bootstrap理解有误差，感觉代码写起来很复杂，没有很轻松舒适的感觉。

                     媒体查询总是在临界px出错，不知道如何查询固定宽度。

收获：用bootstrap4.1.7做了任务十，了解了不同版本的导航栏大同小异。

           了解到如何在栅格系统中利用offset使末位元素靠边。

           了解到如何用input做单选按钮自定义样式。

           了解到一种新的下拉菜单

bootstrap4.1.7导航栏

<div class="container">
    <div class="row">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!--以下插入图片-->
            <a class="navbar-brand" href="#"></a>
            <!--以下按钮格式属性-->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" 
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <!--以下窄屏按钮的icon外观-->
                <span class="navbar-toggler-icon"></span>
            </button>
            <!--以下表单内容-->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#">内容1</span></a></li>
                    <li class="nav-item"><a class="nav-link" href="#">内容2</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">内容3</a></li>
                    <li class="nav-item"><a class="nav-link " href="#">内容4</a></li>
               </ul>
            </div>
        </nav>
    </div>
</div>

此模式下，

1、有图片插入，最好不要删除，以为默认模式，图片和按钮是justify-content: space-between;删除后，会影响按钮的位置。

2、发现问题，在元素已经设置圆角属性的情况下，用了hover后，圆角不属性不显示了

原因未知，最后只能在hover里再添加一次圆角属性。

.navbar-light .navbar-nav .nav-link:hover  {/*改变字体颜色 背景*/
    color: #fff;
    background-color: #1d7ad9;
    border-radius: 10px;
}

利用栅格系统中利用offset使末位元素靠边。

在没有使用情况下，最后一个div因为宽度比例原因不能再最右边。不符合任务要求

所以可以对最后一div ，添加边距使它靠右，就用到offset标签，它的含义是 使用的是margin-left属性实现右移

计算栅格系统是12，已经用去2+2+2+2=8，所以只要添加4比例的宽度就可以使row铺满。所以在最后div添加offset-lg-4

如何用input做单选按钮自定义样式。

html部分

<!--name="box1"  value="1" 意思在box1组中，只能点击一个-->
<!--id="m3-1" for="m3-1" 意思是密码配对 -->
<!--onclick= "if(this.c==1){this.c=0;this.checked=0}else{this.c=1}"   c="0" 再次点击消失 -->
<div class="m3-choose col-lg-2 col-md-12">
    <input type="radio" id="m3-1" name="box1"  value="1" onclick= "if(this.c==1){this.c=0;this.checked=0}else{this.c=1}"   c="0"/>
    <label for="m3-1">对口箱</label>
</div>
<div class="m3-choose col-lg-2 col-md-12">
    <input type="radio" id="m3-2" name="box1"  value="1" onclick= "if(this.c==1){this.c=0;this.checked=0}else{this.c=1}"   c="0"/>
    <label for="m3-2">飞机盒</label>
</div>
<div class="m3-choose col-lg-2 col-md-12">
    <input type="radio" id="m3-3" name="box1"  value="1" onclick= "if(this.c==1){this.c=0;this.checked=0}else{this.c=1}"   c="0"/>
    <label for="m3-3">天地盖</label>
</div>

name="box1"  value="1" 意思在box1组中，只能点击一个

id="m3-1" for="m3-1" 意思是密码配对

onclick= "if(this.c==1){this.c=0;this.checked=0}else{this.c=1}"   c="0" 再次点击消失

css部分

下拉菜单

html部分

<div class="m-select-box">
    <select class="m-select">
        <option>查看详情</option>
        <option>大盒子</option>
        <option>中盒子</option>
        <option>小盒子</option>
    </select>
</div>

css部分