PROMULGATOR

    DFFZMXJ

    北京市
    Html
    Css
    Js

    
                        


                        

                            


body *::-webkit-scrollbar {
	background:transparent;
	width:5px;
	height:5px;
}
@media (min-width:1024px) {
	body *::-webkit-scrollbar {
	width:8px;
	height:8px;
}
}body *::-webkit-scrollbar-thumb {
	background:rgba(0,0,0,0.2);
}
body {
	width:100%;
	height:100%;
	overflow:hidden;
	background:#303030;
	font-family:Roboto,Noto,sans-serif,arial,"Microsoft Yahei";
}
box {
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	width:500px;
	height:500px;
	background:#fafafa;
	transform:translate(-50%,-50%);
	border-radius:3px;
	padding:0;
	box-shadow:0px 0px 10px black;
	transition:height 0.3s ease;
}
box profile {
	height:80px;
	display:block;
	width:100%;
	background:#f1f1f1;
	border-bottom:1px solid rgba(0,0,0,.12);
	cursor:hand;
}
box profile .avatar {
	display:inline-block;
	margin:10px;
	height:60px;
	width:60px;
	border-radius:50%;
	box-sizing:border-box;
	float:left;
}
box profile info {
	display:inline-block;
	margin:10px;
	height:60px;
	width:400px;
	box-sizing:border-box;
	float:left;
}
box profile info username {
	margin:0;
	padding:0;
	display:block;
	height:30px;
	font-size:20px;
	line-height:30px;
	color:rgba(0,0,0,.87);
}
box profile info bio {
	margin:0;
	padding:0;
	display:block;
	height:30px;
	font-size:15px;
	line-height:30px;
	color:rgba(0,0,0,.87);
}
box content {
	width:490px;
	display:block;
	padding:5px;
	height:410px;
	overflow-x:hidden;
	word-break:break-all;
	transition:height 0.3s ease;
}
box content img {
	width:100%;
}
.hide {
	height:80px;
}
.hide content {
	height:0px;
	overflow:hidden;
}
/*当屏幕尺寸过小时提示*/
box {
	display:none;
}
warning {
	height:100vh;
	width:100vw;
	line-height:100vh;
	position:fixed;
	background:lightcoral;
	text-align:center;
}
@media screen and (min-height:500px) {
	@media screen and (min-width:500px) {
	box {
	display:block;
}
warning {
	display:none;
}
}

                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
CSS3折叠内容卡片

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
按下profile元素（资料部分）即可折叠或展开卡片。
如果要做成列表，可以在添加如下代码后实现：
box {
    position: static;left: none;top: none;transform: translate(50 % , 50 % );
}
如果要默认折叠，可以在box元素上添加.hide类实现。
如果动态加入了卡片，请使用 panelinit() 函数重新初始化。
如果要自定义卡片展开后的高度，请同时修改父元素(box)和子元素(box content)的高度或用calc()方法使子元素可自动设定高度。
在实际使用中，请去除warning元素和相关css代码。

                         

                     

                   
                


                
1



  
    
      
    
    

     

            
    
              
    
              
      
                
       DFFZMXJ1
      
                
       2018/7/31 9:47:42
      
                
      
              
    
              
      
                
      因为没考虑到预览界面的尺寸，所以预览不了。
      预览的话请先给css代码做如下修改：
      /*删除部分*/ /*当屏幕尺寸过小时提示*/
 box {
	display:none;
}
warning {
	height:100vh;
	width:100vw;
	line-height:100vh;
	position:fixed;
	background:lightcoral;
	text-align:center;
}
@media screen and (min-height:500px) {
	@media screen and (min-width:500px) {
	box {
	display:block;
}
warning {
	display:none;
}
}/*加入部分*/ box {
	display:block;
}
warning {
	display:none;
}
      
                
                回复