菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 赵强-20221020-项目实战02 [打印本页]

作者: BlueFlame 时间: 2022-10-20 23:34
标题: 赵强-20221020-项目实战02
今日所学内容/* 顶部分类导航栏部分 */
.list-body {
background-color: #fff;
}

.list-body .title {
padding: 5px 0;
}

.goods-nav {
height: 205px;
}

.pinpai {
height: 77px;
}

.goods-nav ul {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

.pinpai li {
float: left;
}

.pinpai li img {
padding: 20px 10px;
}

.goods-title {
width: 70px;
height: 77px;
line-height: 77px;
padding-left: 10px;
font-weight: 700;
background-color: #f3f3f3;
}

.classify-title {
height: 59px;
}

.classify-title li {
float: left;
height: 59px;
line-height: 59px;
margin-right: 20px;

}

.result-container {
margin-top: 20px;
}

/* 左侧列表样式 */
.recommend {
float: left;
padding: 5px;
width: 170px;
border: 1px solid #aaa;
}

.recommend li {
text-align: center;
margin-bottom: 20px;
}

.price,
.left-title,
.comm {
text-align: left;
padding: 5px 10px;
}

/* 右侧商品列表样式 */

.goods-list {
float: left;
margin-left: 10px;
width: 1000px;
}

.goods-list li {
float: left;
text-align: center;
margin: 0 10px 20px 0;
width: 240px;
height: 380px;
}
.goods-list ul li a img {
margin-top: 10px;
}

.goods-list li:hover {
box-shadow: 0px 0px 10px 1px rgb(158, 156, 156);
}

/* 底部翻页按钮样式 */
.result-container .pagination {
float: left;
height: 80px;
}
.pagination li {
cursor: pointer;
float: left;
border: 1px solid #ccc;
padding: 8px 15px;
margin-right: 15px;
background-color: #f0f0f0;
}

.pagination .current {
border: 0;
background-color: #fff;
color: #F30213;
}

.pagination .first {
margin-left: 700px;
}

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)