今天完成的内容

1.调整“首页”等文字的hover样式 添加

padding-bottom: 10px;

效果达到要求

2.同步更新页面二的footer文字hover样式

3.依据网上资料简单架构侧边导航栏

<div class="container">
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked affix-top" id="myn">
                <h4 class="">
                    <strong>合作企业</strong>
                </h4>
                <li>
                    阿里巴巴
                </li>
                <li>
                    腾讯视频
                </li>
                <li>
                    土豆网
                </li>
                <li>
                    北京葡萄藤
                </li>
            </ul>
        </div>
        <div class="col-xs-9"></div>
    </d

4.给侧边栏标题添加样式

.div2-ul-h4 {
    text-align: center;
    border-bottom: 1px solid #dddddd;
    height: 50px;
    line-height: 40px;
}

5.给列表选项添加样式

.div2-ul-li {
    border: none !important;
    color: #0f0f0f !important;
    text-align: center;
    cursor: pointer !important;
}

6.使用伪元素after在列表前添加小圆点 

.div2-ul-li::after {
    content: "";
    display: block;
    position: absolute;
    top: 18px;
    left: 80px;
    height: 6px;
    width: 6px;
    border: #0f0f0f solid 1px;
    border-radius: 50%;
}

7.使用hover样式使子选项被选中时伪元素改变样式

.div2-ul-li:hover::after {
    background-color: #ffb50c;
}

8.微调

padding-left: 100px !important;

top: 15px;
left: 80px;
height: 10px;
width: 10px;

9.给文字添加hover颜色

.div2-ul-li:hover {
    color: rgb(255,101,14) !important;
}

10.架构企业介绍部分头部

.div2-div2 {
    border-radius: 4px;
    box-shadow: 0px 1px 3px 0px rgba(8, 1, 3, 0.15);
}

<div class="col-xs-9 div2-div2">
    <p class="">
        土豆网公司成立于1998年11月， 是目前中国最大的互联网综合服务提供商之一，也是中国
        服务用户最多的互联网企业之一。成立10多年以来，腾讯一直秉承一切以用户价值为依归的
        经营理念，始终处于稳健、高速发展的状态。2004年6月16日，腾讯公司在香港联交所主板
        公开上市（股票代号700）。
    </p>

</div>

11.调整样式并添加图片

.div2-div2 {
    border-bottom: 2px solid rgb(230,230,230);
    padding: 40px 40px 40px 300px;
    color: rgb(153, 153, 153);
    background-color: white;
    background-image: url("tudouwang.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 100px center;
}

12.添加段落文字并调整样式

.div2-div3 {
    padding: 40px 40px 40px 40px;
    color: rgb(153, 153, 153);
    background-color: white;
}
.div2-div3-p {
    padding: 20px 0;
}

今天完成预览

明天计划的事

1.将导航栏与企业详细介绍部分对应起来 点击可以查看不同企业的介绍

初步想法是使用#跳转

2.开始页面三

遇到的问题

1.侧边导航栏下方的边框看起来好像比其他部分浅 不知道该怎么修改

2.进度太慢 半个月都没过一个任务 

今天的收获

1.熟悉了一些bootstrap组件的使用

2.对伪元素和hover选中样式的使用更加熟练