2020-09-30 项目实践（五）

太平洋保险官网项目实践（五）

---

实现目标

今日实现目标：侧边栏及底部
具体效果如下图：

---

以下是本篇文章正文内容，下面案例可供参考

一、侧边栏

1.html

侧边栏位于页面右侧，当滑动页面时，始终在页面右下角，滑动到底部，将固定在底部栏上方右侧。主要是用sticky粘滞布局，给元素固定位置，当元素到达设置的位置时，不随着页面的滚动发生变化，始终停留在设置的位置。

    <div class="last1">
        <h2>
            <span>查看新闻和最新公告</span>
            <i class="iconfont icon-jiahao"></i>
        </h2>
        
    </div>
    <div class="shen"> 
        <div>
            <img src="../image/app_closeXF4.png">
        </div> 
    </div>

2.css

/*文字*/
.last1{
    width: 100%;
    height: 108.8px;
    position: relative;
}
.last1 h2{
    width: 450px;
    height: 58.8px;
    margin: 0 auto;
}
.last1 h2 span{
    font-size: 44px;
    font-weight: 500;
    text-align: center;
}
.last1 h2 i{
    font-size: 41px;
    position: absolute;
    display: inline-block;
    line-height: 65px;
}
/*侧边栏*/
.shen{
    width: 230px;
    height: 125px;
    background-image: url('../image/appXF3.png');
    background-size: cover;
    border-radius: 10px;
    margin-left: 1290px;
    position: sticky;/*粘滞布局*/
    bottom: 0;/*设置粘滞位置*/
    z-index: 4;
}
.shen div{
    width: 25px;
    height: 25px;
    position: relative;
}
.shen div img{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 10px;
    left: 198px;
}

显示效果如下：

二、底部

1.html

底部拥有自己的css，需要link标签进行链接

<footer>
        <div>
            <div>
               <div class="d-guan">
                  <ul class="guanyu">
                      <li>
                        <h4>关于我们</h4>
                        <ul>
                            <li><span>公司简介</span></li>
                            <li><span>联系我们</span></li>
                            <li><span>人才招聘</span></li>
                        </ul>
                      </li>
                      <li>
                        <h4>帮助中心</h4>
                        <ul>
                            <li><span>隐私条款</span></li>
                            <li><span>法律咨询</span></li>
                            <li><span>保险资讯</span></li>
                            <li><span>保险百科</span></li>
                        </ul>
                      </li>
                     <!--相似，略-->
                  </ul> 
               </div>
               <!--相似，略-->
               <div class="d-phone">
                    <ul class="phone">
                        <li>
                            <h4>联系我们</h4>
                            <span>7x24小时全国统一客服电话</span>
                            <p>95500</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div>
            <div class="banquan">
                <p>版权所有©中国太平洋保险（集团）股份有限公司</p>
                <p>Copyright©China Pacific Insurance(group)Co.,Ltd..All rights Reserved.</p>
            </div>
            <div class="beian">
                <div class="ga">
                    <img src="../aj/gongan.png" alt=""> 
                       <p>沪公网安备</p>
                       <p>31010102006484号</p>
                   </div>
               <div class="icp">
                <img src="../aj/ICP.png" alt=""> 
                   <p>沪ICP备</p>
                   <p>12028297号</p>
               </div>          
            </div>
        </div>
    </footer>

2.css

body,ul,li,h1,h2,h3,h4,p{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
body{
    width: 100%;
}
ul,li,a{
    text-decoration: none;
}
footer{
    width: 100%;
    background-color:#f2f2f2;
}
footer>:nth-child(1){
    width: 1147px;
    margin: 0 auto;
    padding-top: 20px;
    height: 150px;
    border-bottom: 1px solid #e5e5e5;
}
.d-guan{
    width: 400px;
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
}
.guanyu{
    width: 400px;
    height: 100px;
}
.d-guan h4,.d-phone{
    display: inline-block;
    font-size: 14px;
    width: 60px;
}
.guanyu>:first-child,.guanyu>:nth-child(2){
    float: left;
    margin-right: 60px;
}
.d-guan span,.d-phone span{
    display: inline-block;
    font-size: 12px;
    margin-top: 8px;
}
.guanyu>:nth-last-child(2){
    float: left;
    margin-right:30px;
}
.guanzhu{
    width: 460px;
    height: 140px;
}
.guanzhu img{
    width: 85px;
    width: 85px;
    margin-top: 8px;
}
.guanzhu li{
    margin-right: 30px;
    width: 80px;  
    float: left;
}
.guanzhu span{
    width: 85px;
    text-align: center;
}
.d-phone{
    width: 160px;  
    margin-left:95px ;
}
.phone p{
    font-size: 18px;
    color: #005bac;
    font-family: "Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
}
.banquan,.beian{
    display: inline-block;
    color: #999999;
    font-size: 12px;
}
.beian{ 
    float: right;
}
.beian .icp,.beian .ga{
    float: left;
    width:165px ;
}
.beian img{
    width: 30px;
    height: 30px;
    float: left;
    padding: 0 10px;
}
footer>:last-child{
    width: 1147px;
    height: 40px;
    margin: 0 auto;
}
.kefu{
    width: 100px;
    position: fixed;
    right: 0;
    top: 35%;
    z-index: 5;
}
.kefu li{
    padding: 15px 0;
    margin: 50px 0;
    color: white;
}
.kefu li div{
    text-align: center;
}
.kefu>ul>:nth-child(1){
    background-color: #1565c0;
}
.kefu>ul>:nth-child(1) img{
    width: 30px;
    height: 30px;
}
.kefu>ul>:nth-child(1):hover,.kefu>ul>:nth-child(2):hover{
    background-color: rgba(66, 66, 66, 0.3);
}
.kefu>ul>:nth-child(2) div{
    height: 55px;
    background: url(../aj/kf-icon.png) center center/40px 45px no-repeat;
}

---

至此首页内容全部结束！撒花✿✿ヽ(°▽°)ノ✿