HTML 网页练习

    
    
    
    
    
    
    
    
    
    






    
    

        学习IT到蓝翔
        
            
        
    
    

        
首页
        
首页
        
课程规划
    
    

        

            

                
                
                
                
                
            
        
        

            个人中心
            
            
            30
            
            我是你爸爸
        
    




    

        

            

            一级分类:
            全部
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            
            

            一级分类:
            全部
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
                更多 >

            
            

            一级分类:
            全部
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            我是你爸爸
            
        
    








/*公共样式*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; /*声明c3新盒模型*/
}
body {
    background-color: #f3f5f7;
    font: normal  400  14px/1.5 "微软雅黑","Adobe 宋体 Std L","Adobe Arabic",sans-serif;
}
/*1*/
a {
    text-decoration: none;
    color: #666666;  /*公共样式   不同 实现覆盖  优先级*/
}

img {
    display: block;  /*图片其实块级元素*/
    /*vertical-align: top;*/ /*图片和文字对齐  图片下间隙问题*/
}

ul li ,ol li {
    list-style: none;
}
em,i,strong,b {
    font-style: normal; /*调整文字形态   去掉斜体 粗体  小盒子*/
}
.clearFix::after ,.clearFix::before {
    content: '';
    line-height: 0;
    display: block;
    clear: both;
}
/*浮动*/
.f_l {
    float: left;
}
.f_r {
    float: right;
}
/*input 去掉外部轮廓*/
input,button {
    outline: 0;

}

/*版心*/
.w {
    width: 1200px;
    margin: 0 auto;
    height: auto;
}



/*顶部导航栏开始*/

.xc-navBar {
    width: 100%;
    height: 100px;
    padding: 30px 0;
}
.xc-navBar .logo {
    font-size: 0;
    text-indent: -999px;  /*缩进*/
    margin-left: 84px;


}
.xc-navBar ul {
    margin-left: 76px;
}
.xc-navBar ul li {
    float: left;
    line-height: 40px;
    font-size: 20px;
    color: #050505;
    margin-left: 40px;
    padding: 0 10px;
}
/*鼠标移入li盒子加下边框*/
.xc-navBar ul li:hover {
    border-bottom: 3px solid skyblue;
}
.xc-user .xc-userSearch  input {
    height: 40px;
    width: 300px;
    border: 1px solid skyblue;
    padding-left: 18px;
    vertical-align: top;

}
.xc-user .xc-userSearch button {
    width: 50px;
    height: 40px;
    background-color: skyblue;
    border: 0;
    margin-left: -5px;
}
.xc-user .xc-userSearch button i {
    font-size: 25px;
    color: #fff;
    text-align: center;
    line-height: 40px;
}
.xc-userInfo {
    /*子决父相*/
    position: relative;
    margin-right: 145px;
}
.xc-userInfo span:first-of-type {
    line-height: 40px;
    display: inline-block;
    padding: 0px 30px;
}
/*小铃铛*/
.xc-userInfo .icon-bell-fill {
    font-size: 20px;
    color: #666;
}
.xc-userInfo .message {
    /*绝对定位*/
    position: absolute;
    top:-10px;
    left: 136px;

    background-color: red;
    padding: 0px 5px;
    color: #fff;
    font-size: 10px;
    /*圆角边框*/
    border-radius: 50%;
}
.xc-userInfo img {
    position: absolute;
    top:0px;
    left: 165px;

}
.xc-userInfo span:last-of-type {
    margin-left: 66px;
}
/*顶部导航栏结束*/

.xc-course{
    width: 100%;
    height: 190px;
    background-color: white;
}
.xc-course ul{
    width: 100%;
    height:190px ;

}
.xc-course ul li{
    width: 100%;
    height:64px ;
    border-bottom: 1px solid #d7d7d7;
    line-height: 64px;
}
.xc-course ul li span{
    margin-right: 30px;
}
.xc-course ul li button{
    border: 0;
    width: 40px;
    height: 20px;
    background-color: #12AFBB;
    color: #fff;
}
.xc-course ul li a {
    margin-left: 30px;
}
.xc-course ul li a:hover {
    color:#12AFBB ;
}
.xc-course .more {
    position: absolute;
    right: 10px;
    color: #12AFBB;
}




@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1553221902169'); /* IE9 */
    src: url('iconfont.eot?t=1553221902169#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARcAAsAAAAACKgAAAQPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqENIQJATYCJAMUCwwABCAFhG0HWxuoB8gekiQlAgUUKKAAADDHw/+v0e77MjsrLlGbn77JgAppE3SLJNNQKI1SCclDh/nPs376h+0YWY7kzkKZ5KdN/dJ0JKx8g09ysT5S5y3A/4PLcQs8nGdvufxorGFjDgowCjigMSYuygIuoES5h3iryzxOoMucQNh5dmElMFPo4wJxy4gIYJbQKhWpoRWagqVlHhsHVZue8x4A4IX3/fgLwsOMpGb6SRcPsiiQ+sPnyzJs/8+9PAWeDWcGu4qMHUAhHhZab8HAvwPqkn9n5BjQpZWkHz7v932kvyz/jyLckLzL+MMjZEkhGrq0B2nHknJwPAsh+LEPIfOLRkj8XeY/GGlFaxdy8CsQHUBbkSXj5dNu20wthi08dqNrQxmicwZMrxfqtZXTg056faVWW9muSyq8rscMhuohXdlzg0Cnq2rXJk47UNpBId3Eh3WjsY6Tg8cBVsPj+z3fOQpWnkZdeO4tmHMuzjpw9KSbYP64tBNWjjW1GQzECNlabRWaOTJ0zHlKMaliGlZ5iE5HJh1zrJppPz7oJJx1T76q5beQVuPVI+RezTn5uqT7L747Guy6Pyr0FLofDY/NWfJeisk5Fh57D6EnGgV3Dn2p6M3nAjVpcPzGjXGY2xqD8R5H54zDmzd440lbpYF2toqB5KxDSZk1jSBCu0slJu2ZE9n42NKbaVsfH4WbYdJKFytbK9zkwAvr7z9/frd+ccAEt7JNqgs9CQ/Ak+DfiUKMorACA3XEhYwgukZ3HmsbvV0f0ODzJauEKkT8f5nSbX35/s7++dDt3SYpOHqxkbexwbNFDQy9ETZADESN0LU//orRmxMn3vo88HnLTHuYekXH+qdN827dgjNwGsTTgMIOvOk0fxbUA/jfVhZhu8e8A0thLLMjD8Cp4G14Ccb9E8O8bNkY2G+d+M9M8Czavl+WWCHR3ToFvFiZxrw/oKwsAZTPnEDX1CJZvwAe3yoSqPYGwB3ey654784h74aRjzZOJrRGI0g6zELWWiEV2g5U3Xah0TqCLttyVncbxoKidGJLD4Ew4Bwkfb5BNuAhqdDeQjXmGzQGAkKXy7DfsttaMPwMFhEcovCaBpwhlQraNHB8P7UciTQygo0LPIYQsWrGhYcFh6ZDOUiB2CFmqGtF4RxH4zSrlOPZ5DQkkylxFauUIJILFnOcKj4khC56UjCplAO+MyyEwEEouBoNcAySkgLttObwM58vh4hoyBDYipoytxDCUmM6x4UJFtqAlCNVNKq5lN5qtUTCcTg0NYrGUpLDZYMZkRl+JZyqeJAEQuIEE3fwqsQLwWZ0U2nw9HL5DcTZBvRda6TIUaJGo30kVmpIQiEyrzlEUxDN2F4LilCKMzEU0yhmBBeTu1+NCJYUAwAA') format('woff2'),
    url('iconfont.woff?t=1553221902169') format('woff'),
    url('iconfont.ttf?t=1553221902169') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1553221902169#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-shoucang:before {
    content: "\e627";
}

.icon-bell-fill:before {
    content: "\e866";
}

.icon-daohangdizhi:before {
    content: "\e65e";
}

.icon-icon_search:before {
    content: "\eb9c";