移动端社交圈图文列表css样式
代码语言:html
所属分类:其他
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>全部评价</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href=""> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script> bready(function() { $('.discuss-print ul li').height($('.discuss-print ul li').width()); $('.evaluate .b-banner').height($('.evaluate .b-banner').width()); /*弹框大图*/ $('.gb-btn').click(function () { $('.Picture').hide(); $('body').css('overflow', ''); }); var imgNum = $(".discuss-print ul li").length; var index = 0; function selectimg(index) { $('.discuss-print ul li').removeClass('on'); $(".discuss-print ul li").eq(index).addClass("on"); $('.theme').height($('.theme img').height()); $('.theme img').attr('src', $('.discuss-print .on').find('img').attr('src')); } /*点击列表图*/ $('.discuss-print ul li').click(function () { $('body').css('overflow', 'hidden'); index = $(".discuss-print ul li").index(this); $('.discuss-print ul li').removeClass('on'); $(this).addClass("on"); $('.discuss-print ul li img').css('display', 'block'); $('.Picture').show(); $('.theme img').attr('src', $('.discuss-print .on').find('img').attr('src')); $('.theme').height($('.theme img').height()); }); $(".mine").click(function() { index --; if (index < 0) { index = imgNum-1; selectimg(index); } selectimg(index); }); $(".Next").click(function() { index ++; if (index > imgNum-1) { index = 0; selectimg(index); } selectimg(index); }); }); </script> <style> * { padding: 0; margin: 0; } a { text-decoration: none; } body { margin: 0 auto; } /*evaluate*/ .evaluate { overflow: hidden; margin: 0 auto; } .evaluate-box { overflow: hidden; margin: 0 auto; } .evaluate-bt { overflow: hidden; margin: 0 auto 0; padding: 0 15px; background: #fff; border-bottom: 1px solid #ddd; } .evaluate-bt p { overflow: hidden; margin: 0 auto; height: 44xp; line-height: 44px; float: left; font-size: 15px; color: #333333; } .evaluate-bt p span { overflow: hidden; margin: 0 auto; } .evaluate-bt a { overflow: hidden; margin: 0 auto; height: 44px; line-height: 44px; font-size: 15px; color: #fc3f70; float: right; } .evaluate-bt a.more-btn { color: #333333; position: relative; padding-right: 15px; } .evaluate-bt a.more-btn:after { content: ""; width: 8px; height: 8px; display: block; border-top: 1px solid #333; border-right: 1px solid #333; position: absolute; top: 16px; right: 2px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } .evaluate-list { overflow: hidden; margin: 0 auto; padding: 0 15px; background: #fff; } .evaluate-list .evaluate-px { overflow: hidden; margin: 0 auto; padding: 10px 0; border-bottom: 1px solid #ddd; } .evaluate-list .evaluate-px:last-child { border: none; } .evaluate-list .datum-rw { overflow: hidden; margin: 0 auto; width: 100%; background: #fff; } .evaluate-list .datum-name { overflow: hidden; margin: 0 auto; } .evaluate-list .datum-name i { overflow: hidden; margin: 0 auto; display: block; float: left; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ddd; } .evaluate-list .datum-name i img { margin: 0 auto; display: block; width: 100%; height: 100%; object-fit: cover; } .evaluate-list .datum-name p { overflow: hidden; margin: 0 auto; height: 44px; line-height: 44px; font-size: 16px; color: #333333; padding: 0 10px; } .evaluate-list .datum-name p a { overflow: hidden; margin: 0 auto; height: 44px; line-height: 44px; font-size: 16px; color: #333333; } .evaluate-list .datum-time { overflow: hidden; margin: 0.5rem auto; width: 100%; } .evaluate-list .datum-time p { overflow: hidden; margin: 0 auto; font-size: 12px; color: #cccccc; } .evaluate-list .datum-time p span { overflow: hidden; margin: 0 auto; margin-right: 10px; } .evaluate-list .discuss { overflow: hidden; margin: 0 auto; } .evaluate-list .discuss p { overflow: hidden; margin: 0 auto; font-size: 16px; color: #333333; } .evaluate-list .discuss-print { overflow: hidden; margin: 10px auto 0; } .evaluate-list .discuss-print ul { overflow: hidden; margin: 0 auto; } .evaluate-list .discuss-print ul li { overflow: hidden; margin: 0 auto 0.5rem; float: left; margin-right: 0.5rem; width: calc((100% - 1rem) / 3); } .evaluate-list .discuss-print ul li:nth-of-type(3n) { margin-right: 0; } .evaluate-list .discuss-print ul li a { overflow: hidden; margin: 0 auto; display: block; } .evaluate-list .discuss-print ul li a img { overflow: hidden; margin: 0 auto; display: block; width: 100%; height: 100%; object-fit: cover; } /*图片预览*/ .Picture { overflow: hidden; display: none; margin: 0 auto; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 889; } .Picture-box { overflow: hidden; width: 100%; height: 100%; position: relative; } .Picture-box .theme { overflow: hidden; width: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .Picture-box .open { overflow: hidden; width: 43px; height: 58px; font-size: 16px; color: #666; text-align: center; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; bottom: 0; margin: auto; z-index: 2; } .Picture-box .mine { left: 0; } .Picture-box .Next { right: 0; } .Picture-box .theme img { overflow: hidden; width: 100%; margin: 0 auto; display: block; object-fit: cover; } .Picture-box .gb-btn { overflow: hidden; width: 30px; height: 30px; line-height: 30px; display: block; position: absolute; top: 10px; right: 10px; font-size: 32px; color: #fff; text-align: center; } /*兼容样式*/ @media (min-width:1080px) and (max-width:2400px) { .Picture-box .theme { width: 100%; height: 90%; } .Picture-box .theme img { width: auto; height: 100%; } } </style> </head> <body&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0