微信公众号多图文列表css_仿公众号列表

admin

1. 
   
2. 
   
3. <style type="text/css">
   
4.    
   
5. .msg_page{
   
6.   font-size:12px;
   
7.   background-color:#f4f4f4;
   
8.   padding:10px 0;
   
9.   width:60%;
   
10. }
    
11. 
    
12. .msg_list{
    
13.   zoom:1;
    
14.   margin-bottom:5px;
    
15.   margin-left:5px;
    
16.   margin-right:5px;
    
17. }
    
18. 
    
19. .msg_list_bd{
    
20.   margin-left:auto;
    
21.   margin-right:auto;
    
22.   background-color:#fff;
    
23.   border:1px solid #cacbcb;
    
24.   box-shadow:0 1px 2px #ddd;
    
25.   -moz-box-shadow:0 1px 2px #ddd;
    
26.   -webkit-box-shadow:0 1px 2px #ddd;
    
27.   padding:10px 20px;
    
28. }
    
29. 
    
30. .msg_wrapper{
    
31.   font-size:14px;
    
32. }
    
33. 
    
34. .msg_inner_wrapper{
    
35.   display:inline-block;
    
36.   width:100%;
    
37.   color:#000;
    
38.   text-decoration:none;
    
39. }
    
40. 
    
41. .images_box{
    
42.   margin-top:4px;
    
43. }
    
44. 
    
45. .msg_title{
    
46.   font-size:13px;
    
47.   font-weight:700;
    
48.   color:#000;
    
49.   word-wrap:break-word;
    
50.   word-break:break-all;
    
51. }
    
52. 
    
53. .msg_date{
    
54.   color:#9a9a9a;
    
55. }
    
56. 
    
57. .msg_cover{
    
58.   position:relative;
    
59.   height:150px;
    
60.   overflow:hidden;
    
61.   font-size:0;
    
62.   text-decoration:none;
    
63.   display:block;
    
64. }
    
65. 
    
66. .msg_cover img{
    
67.   width:100%;
    
68. }
    
69. 
    
70. .msg_cover .msg_title{
    
71.   color:#fff;
    
72.   text-decoration:none;
    
73.   padding:5px;
    
74. }
    
75. 
    
76. .msg_desc{
    
77.   color:#9a9a9a;
    
78.   word-wrap:break-word;
    
79.   word-break:break-all;
    
80. }
    
81. 
    
82. .msg_title_bar{
    
83.   position:absolute;
    
84.   bottom:0;
    
85.   left:0;
    
86.   width:100%;
    
87.   background-color:rgba(0,0,0,0.8);
    
88. }
    
89. 
    
90. .sub_msg_list{
    
91.   padding-top:8px;
    
92. }
    
93. 
    
94. .sub_msg_item{
    
95.   overflow:hidden;
    
96.   zoom:1;
    
97.   border-top:1px solid #e5e5e5;
    
98.   display:block;
    
99.   text-decoration:none;
    
100.   padding:3px 0;
     
101. }
     
102. 
     
103. .thumb{
     
104.   float:right;
     
105.   border:1px solid #e5e5e5;
     
106.   font-size:0;
     
107.   padding:1px;
     
108. }
     
109. 
     
110. .thumb img{
     
111.   width:50px;
     
112. }
     
113. 
     
114. 
     
115. </style>
     
116. 
     
117. 
     
118. <div class="msg_page" id="msg_page">   
     
119. 
     
120. <div class="msg_list">
     
121.         <div class="msg_list_bd">
     
122.             
     
123.             <div class="msg_wrapper">
     
124.                     <p class="msg_date">XXXXXXXXXXXXXXX</p>
     
125.                     <div class="msg_inner_wrapper default_box news_box">
     
126.                     <div class="msg_item multi_news">
     
127.                         <a class="msg_cover redirect" href="http://weibo.com/1253711052/profile?topnav=1&wvr=6" target="_blank">
     
128.                             <img alt="" style="visibility: visible !important;" src="http://ww4.sinaimg.cn/bmiddle/69c94e53jw1f1xjp4bxtrj20b405k0tb.jpg">
     
129.                             <div class="msg_title_bar">
     
130.                                 <h4 class="msg_title">XXXXXXXXXXXXXXXXXXX1</h4>
     
131.                             </div>
     
132.                         </a>
     
133.                         
     
134.                             <div class="sub_msg_list">
     
135.                                 <a class="sub_msg_item redirect" href="http://weibo.com/1253711052/profile?topnav=1&wvr=6" target="_blank">
     
136.                                     <span class="thumb">
     
137.                                         <img alt="" style="width: 50px; height: 50px; visibility: visible !important;"  src="http://ww2.sinaimg.cn/bmiddle/884f7263jw1f1xjk4u64qj20ir0dsjsy.jpg">
     
138.                                     </span>
     
139.                                     <h4 class="msg_title">灯下看她22</h4>
     
140.                                 </a>
     
141.                             </div>
     
142. 
     
143.                             <div class="sub_msg_list">
     
144.                                 <a class="sub_msg_item redirect" href="http://weibo.com/1253711052/profile?topnav=1&wvr=6" target="_blank">
     
145.                                     <span class="thumb">
     
146.                                         <img alt="" style="width: 50px; height: 50px; visibility: visible !important;"  src="http://ww2.sinaimg.cn/bmiddle/884f7263jw1f1xjk4u64qj20ir0dsjsy.jpg">
     
147.                                     </span>
     
148.                                     <h4 class="msg_title">灯下看她333</h4>
     
149.                                 </a>
     
150.                             </div>
     
151.                         
     
152.                     </div>
     
153.                 </div>
     
154.             </div>
     
155.             
     
156.         </div>
     
157.     </div>
     
158.    
     
159. </div>

复制代码