css布局实现电商商品分类筛选列表效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现电商商品分类筛选列表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> /*初始化页面*/ * { margin: 0; padding: 0; font-size: 12px; font-family: "微软雅黑"; } ul li { list-style: none; } .content { width: 1198px; margin: 0 auto; } input { outline: none; } /*主题内容*/ .main1 { margin-top: 100px; position: relative; } .main1 .open { position: absolute; top: 0; right: 0; width: 60px; height: 40px; background: #f7f7f7; text-align: center; line-height: 40px; cursor: pointer; } .main1 .open:hover { color: red; } .main1 .open span { font-size: 14px; } .main { width: 1198px; border: 1px solid #ccc; border-bottom: none; color: #777; display: flex; } .main ul { display: flex; justify-content: center; align-items: center; } .main ul .text01 { width: 110px; height: 40px; line-height: 40px; padding-left: 20px; box-sizing: border-box; } .main .ul1 { border-right: 1px solid #ccc; } .main .ul2 { border-left: none; padding-left: 10px; } .main .ul2 li { padding: 0 10px; height: 30px; line-height: 30px; color: #777; font-size: 12px; cursor: pointer; box-sizing: border-box; } .main .ul2 li:hover { color: red; } .main .ul2 li span { font-size: 14px; } .main5 { border-bottom: 1px solid #ccc; } .main5 .ul2 li { padding: 0px 30px; box-sizing: border-box; color: #000; } /*综合排序*/ .sort { margin-top: 20px; display: flex; border: 1px solid #ccc; height: 40px; line-height: 40px; color: #4a4a4a; } .sort .sort01 { width: 90px; padding: 0px 20px; box-sizing: border-box; background: #f5f5f5; border-right: 1px solid #e8e8e8; } .sort .sort02, .sort .sort03 { width: 70px; text-align: center; border-right: 1px solid #e8e8e8; cursor: pointer; } .sort .sort02:hover, .sort .sort03:hover { color: red; } .sort .sort04 { width: 140px; border-right: 1px solid #e8e8e8; text-align: center; } .sort .sort04 input { width: 40px; height: 20px; border: 1px solid #ccc; } .sort .sort05 { display: flex; } .sort .sort05 .sort05_p1 { padding: 0 20px; box-sizing: border-box; } /*图片列表 */ .list { margin-top: 20px; display: flex; } .list .imglist { width: 240px; height: 366px; border-left: 1px solid #f2f2f2; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; margin-bottom: 100px; } .list .imglist:hover { position: relative; left: 0px; top: 0px; border: 1px solid #fd3f31; transform: translate(-1px, -1px); } .img01 { background: url("//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png"); background-size: 100% 100%; } .img02 { background: url("//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png"); background-size: 100% 100%; } .img03 { background: url("//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png"); background-size: 100% 100%; } .img04 { background: url("//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png"); background-size: 100% 100%; } .img05 { background: url("//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png"); background-size: 100% 100%; border-right: 1px solid #f2f2f2; } </style> </head> <body> <!-- 主页 --> <div class="content"> <!-- 第一排 --> <div class="main main1"> <ul class="ul1"> <li class="text01">品牌</li> </ul> <ul class="ul2"> <li>GW/光威</li> <li>般若师</li> <li>佳钓尼</li> <li>囿鱼</li> <li>龙江源(运动户外)</li> <li>龙纹鲤</li> <li>汉鼎(户外)</li> <li>DAIWA/达亿瓦师</li> <li>化氏</li> <li>本汀</li> <li>SHIMANO/禧玛诺</li> <li>黄竹鲫</li> <li>北沧龙纹鲤</li> </ul> <div class="open"> 展开<span class="fa fa-angle-down"></span> </div> </div> <!-- 第二排 --> <div class=&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0