HTML+CSS搭建书城页面（css阴影，css渐变、font-awesome）

利用css盒阴影，css渐变、font-awesome，HTML定位流等css知识配合HTML和css的基础知识，完成书城界面的搭建。

一、HTML代码

    
    
    
    
    
    






    
    

        
        
        精选图书
    



    

        
热销教材
        
    
    

        
        
￥39.9
        
Androd 移动开发基础案例
        

            140+条评论
            黑马出版社
            放心购
        
        

            
                
            
            加入购物车
            
        
    
    

        
        
￥49.9
        
软件测试
        

            240+条评论
            黑马出版社
            放心购
        
        

            
                
                
                加入购物车
            
        
    
    

        
        
￥59.9
        
Java EE企业级应用开发教程
        

            60+条评论
            黑马出版社
            放心购
        
        

            
                
                
                加入购物车
            
        
    
    

        
        
￥69.9
        
响应式web前端开发
        

            80+条评论
            黑马出版社
            放心购
        
        

            
                
                
                加入购物车
            
        
    


    

        
精品图书
        
    
    

        
        
￥69.9
        
Python
        

            140+条评论
            黑马出版社
            放心购
        
        

            
                
                
                加入购物车
            
        
    
    

        
        
￥59.9
        
Spring Boot 企业级开发教程
        

            50+条评论
            黑马出版社
            放心购
        
        

            
                
                
                加入购物车
            
        
    
    

        
        
￥79.9
        
js前端开发实战
        

            240+条评论
            黑马出版社
            放心购
         
        

            
                
                
                加入购物车
            
        
    
    

        
        
￥139.9
        
大数据项目实战
        

            140+条评论
            黑马出版社
            放心购
        
        

            
                
                
                加入购物车
            
        
    

二、css代码

header{
}
/*主体部分设置*/
.meau{
    width: 100%;
    height: 60px;
    margin: 20px auto;
    border: 1px solid #82847e;
}
/*标题导航设置*/
.nav{
    width: 160px;
    margin: 0 auto;
}
.meau span{
    /*转化为块状元素*/
    display: block;  
    float: right;
    font:  bolder  25px "新宋体";
    line-height: 60px;
    margin: 0;
}
/*font-awesome 字体图标设置*/
.fa-book{
    padding-top: 5px;
    color: #b2d3ff;
}
/*图书系列设置*/
.items{
    width:1400px;
    height: 450px;
    background-color: #ffffff;
    margin: 0 auto;

}
/*放置图书信息盒子设置*/
.item{
    width:220px;
    height:380px;
    float: left;
    margin: 25px;
    text-align: center;
    /*给class=.item的盒子添加阴影*/
    box-shadow: 10px 10px 10px #bec5c8;
    border-radius: 5px ;

}
/*鼠标悬停时，该区域的显示的效果*/
.item:hover{
    /*外边框*/
    border: 1px solid #a0a29c;
    /*给盒子的顶点添加一个弧度 为5px*/
    border-radius: 5px ;
}
/*给选中的盒子添加渐变色*/
.item_color{
    /*渐变色为重上向下渐变，颜色为#09cac5 30%，#09cac5 30%*/
    background-image: linear-gradient(to bottom , #09cac5 30%, #09cac5 30%);
}
.item img{
    padding: 10px;
}
.item_p{
    font:bold 20px "Microsoft YaHei UI Light";
    margin:0;
    margin-bottom: 10px;
    color: red;
    text-align:left;
    text-indent: 1rem;
}
.notobook{
    font:bold 15px "华文仿宋";
    margin:0;
    text-align:left;
    /*首航缩进1rem*/
    text-indent: 1rem;
}
.item h3{
    font-size: 20px;
}
.item_comments{
    width: auto;
    height: 20px;
    font:bold 13px "华文仿宋";
    text-align:left;
    /*首航缩进1rem*/
    text-indent: 1rem;
    color: #9ba3a6;
}
.item_comments a{
    /*去掉a标签的下划线*/
    text-decoration: none;
    color: #9ba3a6;
}
.item_comments span{
    /*转换为块状元素*/
    display: block;
}
.shopping{
    width: 80px;
    height: 23px;
    /*采用相对定位的定位方式*/
    position: relative;
    top:32px;
    left: 1rem;
    border: 1px solid #a0a0a0;
}
.shopping span{
    font-size: 12px;
    font-family: "华文仿宋";
}
.shopping a{
    text-decoration: none;
}

三、网页搭建完成后的截图