php手机侧边导航页,侧边导航案例

摘要：

• 当季流行

  当季流行

  当季流行

  当季流行

  当季流行

  当季流行

  当季流行

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

                              

             

.middle {

width: 100%;

height: 500px;

background: url(../images/2.png);

background-size: cover;

margin-top: 40px;

}

.middle .content {

margin: 0px auto;

width: 1300px;

height: 500px;

}

.middle .menu {

width: 200px;

height: 500px;

background: #000;

background: rgba(0,0,0,0.4);

position: relative;

}

.menu li {

height: 33px;

line-height: 33px;

}

.menu li:hover {

background: #fff;

}

.menu li a[href="#"] {

color: #fff;

font-weight: 400px;

}

.menu li:hover a[href="#"] {

color: red;

}

.menu li:hover i {

color: red;

}

.menu li a i {

margin: 0px 10px 0px 15px;

}

.menu_content {

width: 820px;

height: 500px;

position: absolute;

left: 200px;

top: 0px;

background: #f2f2f2;

display: none;

}

.menu li:hover .menu_content {

display: block;

}

.menu_left {

width: 660px;

height: 500px;

float: left;

background: #fff;

}

.menu_left p {

float: left;

margin: 10px 0px 0px 20px;

}

.menu_left p a {

margin-right: 5px;

color: #6D6E6A;

}

.menu_content p span {

margin: 0px 10px 0px 5px;

}

.hr {

border-bottom: 1px dashed #ccc;

}

.menu_right {

width: 140px;

height: 480px;

float: right;

margin: 8px 10px;

line-height: 20px;

}

.menu_right a img {

height: 50px;

width: 65px;

}

总结：侧边导航的实现，学会了css中一些属性的巧用。上次的作业css没有格式化，辛苦老师了，这次的css格式化啦。

批改老师：天蓬老师批改时间：2018-12-07 09:03:31

老师总结：布局不错,类的命名也比较规范, 你的图片中的, 小手,非常的萌呀, 我还是第一次在商城中看到