学成在线首页css部分

/*取消元素的默认内外边距*/

*{

    margin: 0;

    padding: 0;

}

/*取消列表风格*/

li{

    list-style: none;

}

body{

    background-color: #f3f5f7;

    font-size: 16px;

}

a{

    text-decoration: none;

}

/*设置版心:宽度，水平居中*/

.w{

    width: 1200px;

    margin: 0 auto;

}

/*logo开始*/

.header{

    height: 42px;

    padding: 30px 0;

}

.logo{

    float: left;

    height: 42px;

}

/*导航栏*/

.nav{

    float: left;

    height: 40px;

    margin: 30px 0;

    

}

    .nav li{

        float: left;

        line-height:40px ;

}

    .nav li a{

        display: block;

        height: 40px;

        /*不设置宽度，靠内边距撑大盒子：实现不确定的宽度*/

        padding: 0 20px;

        color: #050505;

        font-size: 18px;

}

    .nav li a:hover{

        border-bottom: 2px solid #00a4ff;

    }

.search{

    float: left;

    height: 42px;

    margin: 30px 0 30px 30px;

}

    .search input{

        float: left;

        width: 340px;

        height: 40px;

        padding-left: 20px;

        border: 2px solid #00a4ff;

        color: #999;

    }

    .search button{

        float: left;

        width: 50px;

        height: 42px;

        border: none;

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

    }

.user{

    float: right;

    height: 42px;

    margin: 30px 0;

    color: #999;

}

/*banner开始*/

.banner{

    width: 100%;

    height: 420px;

    background:#1c036b url(../images/banner2.jpg) no-repeat center top;

}

.subnav{

    /*float:left*/

    width: 150px;

    height: 420px;

    padding:0 20px;

    background-color: rgba(0,0,0,0.2);

}

    .subnav li{

        height: 45px;

        line-height: 45px;

    }

    .subnav li a span{

        float: right;

    }

    .subnav li a{

        display: block;

        float: left;

        color: #fff;

    }

    .subnav li a:hover{

        color: #00a4ff;

    }

.course{

    float: right;

    width: 230px;

    height: 300px;

    margin-top: 50px;

    background-color: #fff;

}

.course h4{

    height: 48px;

    background-color: #9bceea;

    color: white;

    font-size: 20px;

    font-weight: 700;

    text-align:center;

}

.course-bd{

    height: 180px;

    padding: 0 10px;

}

.course-bd a{

    display: block;

    height: 50px;

    padding-top: 10px;

    width: 100%;

    padding: 10px 0 0 10px;

    border-bottom: 1px solid #ccc;

}

.course a div{

    color: #050505;

    font-weight: 700;

}

.course a p{

    color: #a5a5a5;

    font-size: 14px;

}

.all{

    display: block;

    width: 198px;

    height: 38px;

    border: 1px solid #00a4ff;

    

    margin: 20px auto;

    color: #00a4ff;

    line-height: 38px;

    text-align:center;

}

.all:hover{

    color: white;

    background-color: #00a4ff;

}

/*精品推荐开始*/

.goods{

    height: 60px;

    margin-top: 10px;

    background: #fff;

    box-shadow: 2px 2px 2px rgb(0 0 0 /20%);

}

.goods-l{

    float: left;

    width: 120px;

    height: 60px;

    line-height: 60px;

    text-align:center;

    color: #00a4ff;

    font-size: 18px;

    font-weight: 400;

}

.goods-m{

    float: left;

    line-height: 60px;

}

.goods-m a{

     

}

.goods-r{

    float: left;

}

/*special开始*/

.special-bd{

    height: 800px;

}

.special-hd{

    height: 50px;

}

.hd-left{

    float: left;

    line-height: 50px;

    

}

.hd-left a{

    color: #80b4e7;

    font-size: 18px;

    height: 50px;

}

.hd-right{

    float: right;

    line-height: 50px;

}

.hd-right a{

    color: #ccc;

    font-size: 14px;

    height: 50px;

}

.special-bd li{

    float: left;

    width: 226px;

    height: 250px;

    margin: 0 14px 14px 0;

    box-shadow: 2px 2px 2px rgb(0 0 0 /20%);

}

.special-bd li img{

    width: 226px;

}

.special-bd li h4{

    margin: 10px;

    font-size: 14px;

}

.special-bd li p{

    margin-left: 10px;

    font-size: 14px;

    color: #ccc;

}

.special-bd li p span{

    color: orange;

}

/*版权开始*/

.footer{

    width: 100%;

    height: 400px;

    padding-top: 50px;

    background-color: white;

}

.copyright{

    float: left;

    width: 50%;

}

    .copyright p{

    margin: 20px 0 10px 0;

    font-size: 14px;

    color: #999;

    }

    .copyright a{

        display: block;

        width: 118px;

        height: 36px;

        border: 1px solid #00a4ff;

        color: #00a4ff;

        text-align:center;

        line-height: 36px;

    }

.links{

    float: right;

}

.links dl{

    float: left;

    margin-right: 50px;

}

.links dt{

    margin-bottom: 20px;

    font-size: 18px;

    color: #050505;

}

.links dd a{

    color: #999;

    font-size: 14px;

}

.links dd a:hover{

    color: #00a4ff;

}