css实现手机端移动端分类页面效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现手机端移动端分类页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no"/> <style> body { margin: 0; } .sort_container { font-size: 3.73333vw; color: #333; background-color: #fff; min-height: 100vh; } .sort_container ul { padding: 0; margin: 0; list-style-type: none; } .sort_container .sort_navbar { position: fixed; top: 0; left: 0; bottom: 0; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: #f5f5f5; z-index: 3; } .sort_container .sort_navbar>ul>li { width: 21.33333vw; height: 10.66666vw; display: -webkit-flex; display: flex; justify-content: center; align-items: center; } .sort_container .sort_navbar>ul>li:active { background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); } .sort_container .sort_navbar>ul>li.on { background-color: #fff; color: #f44336; } .sort_container .sort_wrap { padding-left: 21.33333vw; box-sizing: border-box; } .sort_container .sort_wrap>ul { padding: 0 5.33333vw; } .sort_container .sort_wrap>ul li .title { padding: 2.66666vw 0; font-weight: bold; } .sort_container .sort_wrap>ul li .product { display: -webkit-flex; display: flex; flex-wrap: wrap; } .sort_container .sort_wrap>ul li .product .product_box { display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 33.333333%; margin: 2.66666vw 0; flex-direction: column; } .sort_container .sort_wrap>ul li .product .product_box>img { width: 13.33333vw; } .sort_container .sort_wrap>ul li .product .product_box>span { font-size: 3.2vw; margin-top: 1.33333vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 90%; text-align: center; color: #666; } </style> </head> <body> <div class="sort_container" id="sort_container"> <!--左边导航--> <div class="sort_navbar"> <ul> <li class="on">分类1</li> <li>分类2</li> <li>分类3</li> <li>分类4</li> <li>分类5</li> </ul> </div> <!--右边商品--> <div class="sort_wrap"> <ul> <li> <div class="title">分类1</div> <div class="product"> <div class="product_box"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png" alt=""> <span>手机</span> </div> <div class="product_box"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png" alt=""> <span>手机</span> </div> <div class="product_box"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png" alt=""> <span>手机</span> </div> </div> </li> <li> <div class="title">分类2</div> <div class="product"> <div class="product_box"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png" alt=""> <span>手机</span> </div> <div class="product_box"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png" alt=""> <span>手机</span> </div> <div class="product_box"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png" alt=""> <span>手机</span> </div> </div> </li> <li> <div class="title">分类3</div> <div class="product"> <div class="product_box"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png" alt=""> <span>手机</span> </div> <div class="product_box"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png" alt=""> <span>手机</span> </div> <div class="product_box"> <img src="//rep.........完整代码请登录后点击上方下载按钮下载查看
网友评论0