<div class="articalContent" id="">
<div style="display: flex;align-items: center;justify-content: center;">
<div>
<style type="text/css">* {
 box-sizing: border-box;
}

body {
 font-family_replace: Arial;
}

.header {
 text-align: center;
 padding: 32px;
}

.row {
 display: -ms-flexbox; /* IE 10 */
 display: flex;
 -ms-flex-wrap: wrap; /* IE 10 */
 flex-wrap: wrap;
 padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
 -ms-flex: 100%; /* IE 10 */
 flex: 100%;
 padding: 0 4px;
}

.column img {
 margin-top: 8px;
 vertical-align: middle;
}

/* Style the buttons */
.btn {
 border: none;
 outline: none;
 padding: 10px 16px;
 background-color: #f1f1f1;
 cursor: pointer;
 font-size_replace: 18px;
}

.btn:hover {
 background-color: #ddd;
}

.btn.active {
 background-color: #666;
 color: white;
}

img {border-color: white; border-width: 1px; border-style: solid;}
</style>
</div>
</div>
<table bgcolor="#81960b" border="1" bordercolor="#ffffff" cellpadding="58" style="color:#ffffff">
<tbody>
<tr>
<td align="center" width="1200">
<div class="header" id="myHeader">
非常喜欢这两期的活动 - 花花和颜色。
说起颜色五年多前开始我的《衣裳之锦，自然之蓝》系列，已经做了11集。蓝色当然不止可以在大自然里看到，生活中也有很多很多，各式各样。这一集选了些我喜欢的，希望在炎炎夏日能给你带去一丝清爽。
下面四个按钮分别选择一列两列四列或八列显示。一列图最大可以看最多的细节，八列图最小看帖子全貌。缺省是一列。这个排版是从www.w3schools.com学来，非常感谢！
<button class="btn active" onclick="one()">1</button><button class="btn" onclick="two()">2</button><button class="btn" onclick="four()">4</button><button class="btn" onclick="eight()">8</button></div>
<div class="row">
<div class="column">1 厨巾<a href="http://soulstratum.tumblr.com/post/145027165913" target="_blank"><img src="https://78.media.tumblr.com/c96b16091b95f6f10fc129a2811bbee7/tumblr_o7v12bCj2A1sn4o7po1_500.jpg" style="width:100%"/></a> 
 
 
2 中国风<a href="http://awonderfulpalmettolife.tumblr.com/post/124595743423" target="_blank"><img src=" http://36.media.tumblr.com/1266eb437096b24dd11d4cc9747675f4/tumblr_nr4yrisKWH1rvnhllo1_500.jpg" style="width:100%"/></a> 
 
 
3 卵玻璃<a href="https://www.pinterest.com/pin/258112622372910600/" target="_blank"><img src=" https://i.pinimg.com/564x/80/55/72/8055724c21a265c296117adbdb599640.jpg" style="width:100%"/></a> 
 
 
4 阳光<a href="https://www.pinterest.com/pin/546765211002784054/" target="_blank"><img src=" https://i.pinimg.com/564x/17/3e/8a/173e8a3d9af24e98f29f5f75551cd150.jpg" style="width:100%"/></a> 
 
			 </div>
<div class="column">5 桌饰<a href="http://awonderfulpalmettolife.tumblr.com/post/121247268278" target="_blank"><img src=" http://41.media.tumblr.com/5f26630d3872c8f6659ed07ef845a22a/tumblr_nppiy5r8YY1rvnhllo1_500.jpg" style="width:100%"/></a> 
 
 
6 旋梯<a href="https://zsazsabellagio.tumblr.com/post/173519648533/ollebosse-by-marzena-wieczorek" target="_blank"><img src=" https://78.media.tumblr.com/d6d09cd303ed4341b187a18b1c61ed0c/tumblr_p6pyoe820O1rcf4reo1_640.jpg" style="width:100%"/></a> 
 
 
7 花布<a href="https://magicalhomestead.tumblr.com/post/174821032602/love-this-bright-beautiful-bedroom-mixing" target="_blank"><img src=" https://78.media.tumblr.com/749816946d7ed83e9848b0e47de7b11e/tumblr_pa7ssoWVj91wd76zwo1_640.jpg" style="width:100%"/></a> 
 
 
8 墙砖<a href="http://awonderfulpalmettolife.tumblr.com/post/111411130553" target="_blank"><img src=" http://40.media.tumblr.com/4377726dcbe05a1540debfe7ccf774e3/tumblr_mwjk7lvMdf1qah1feo1_500.jpg" style="width:100%"/></a> 
 
			 </div>
<div class="column">9 蓬勃<a href="http://burbaie.tumblr.com/post/133764838574" target="_blank"><img src=" http://40.media.tumblr.com/43cc68a0028bd21639a2e26b6214d3fa/tumblr_nj79yqIQPc1tf77o1o1_1280.jpg" style="width:100%"/></a> 
 
 
10 绿松石<a href="http://awonderfulpalmettolife.tumblr.com/post/109910580278" target="_blank"><img src=" http://41.media.tumblr.com/tumblr_lvayw57AVK1r436heo1_500.jpg" style="width:100%"/></a> 
 
 
11 打磨<a href="http://eclecticpandas.tumblr.com/post/107270752084" target="_blank"><img src=" http://40.media.tumblr.com/499d48cdd805302b970a85b9766616c9/tumblr_mylbhm8cJI1r5wynfo1_500.jpg" style="width:100%"/></a> 
 
 
12 布衣<a href="http://herminehesse.tumblr.com/post/112997830921" target="_blank"><img src=" http://40.media.tumblr.com/1fe994b088c4b67db7030e110180752f/tumblr_nedh7t1jP51tayn6co1_500.jpg" style="width:100%"/></a> 
 
			 </div>
<div class="column">13 沙滩石<a href="http://peaceandlovexo.tumblr.com/post/120432291001" target="_blank"><img src=" http://40.media.tumblr.com/2b910fe18e63441ef0755e1bdc863fa7/tumblr_naxmmrN3GR1sqyy5eo1_500.jpg" style="width:100%"/></a> 
 
 
14 梵高<a href="http://dawn-in-paris.tumblr.com/post/120493156350" target="_blank"><img src=" http://40.media.tumblr.com/93961a5b70385ab2c512c796509c9021/tumblr_nglruw7HrU1rshw4wo1_1280.jpg" style="width:100%"/></a> 
 
 
15 鱼贯<a href="https://www.pinterest.com/pin/546765211003020321/" target="_blank"><img src=" https://i.pinimg.com/564x/f4/eb/52/f4eb52df114c7b37b449764a7db19a0c.jpg" style="width:100%"/></a> 
 
 
16 斑斓<a href="http://ana-rosa.tumblr.com/post/101677469733" target="_blank"><img src=" http://40.media.tumblr.com/55b40682b3a3d41101571addddc2cfb1/tumblr_ncf4c2UZJZ1qbycdbo1_1280.jpg" style="width:100%"/></a> 
 
			 </div>
<div class="column">17 秋天<a href="http://serendipityandsweettea.tumblr.com/post/117875377511" target="_blank"><img src=" http://40.media.tumblr.com/149b000b632163e4cbcd83e61fe342a5/tumblr_nic8n5JC791u8wonlo1_1280.jpg" style="width:100%"/></a> 
 
 
18 七彩<a href="https://www.pinterest.com/pin/176695985357409725/" target="_blank"><img src=" https://i.pinimg.com/564x/94/ff/81/94ff81430a61c503247b8115f8a989f1.jpg" style="width:100%"/></a> 
 
 
19 天青<a href="http://www.pinterest.com/pin/318418636124520897/" target="_blank"><img src=" http://s-media-cache-ak0.pinimg.com/736x/6d/fa/7f/6dfa7fa06b2ca97710f7f2626724c1e5.jpg" style="width:100%"/></a> 
 
 
20 拾贝<a href="http://freestylehippiesoul.tumblr.com/post/134337844359" target="_blank"><img src=" http://40.media.tumblr.com/d7c992172d2c90bc5c2a39cb1edf34f2/tumblr_nykucbLTWF1ups262o1_500.jpg" style="width:100%"/></a> 
 
			 </div>
<div class="column">21 项链<a href="http://serendipityandsweettea.tumblr.com/post/117874812341" target="_blank"><img src=" http://68.media.tumblr.com/c1239e55995a38ced88f78b08d38df89/tumblr_nm2zaxShOD1tbhljdo1_1280.jpg" style="width:100%"/></a> 
 
 
22 屋角<a href="https://www.pinterest.com/pin/355643701807231958/" target="_blank"><img src=" https://i.pinimg.com/564x/05/6a/9e/056a9eee4708735cf406bf0bf22c1148.jpg" style="width:100%"/></a> 
 
 
23 铅笔<a href="http://bella-luna-cha-cha.tumblr.com/post/113598238286" target="_blank"><img src=" http://36.media.tumblr.com/5b99e237e69c6e01420215e729b8c166/tumblr_ni261k0Qtf1rbchl1o1_500.jpg" style="width:100%"/></a> 
 
 
24 彩戳<a href="http://freestylehippiesoul.tumblr.com/post/117406198759/my-daily-inspiration-photos-had-to-share-this" target="_blank"><img src=" http://40.media.tumblr.com/8ec483e29fd6e74400e918b6c89440cb/tumblr_nnek33yXBz1sr7t7fo1_500.jpg" style="width:100%"/></a> 
 
			 </div>
<div class="column">25 热情<a href="http://soulstratum.tumblr.com/post/144730681488" target="_blank"><img src=" http://65.media.tumblr.com/516cbd03a0bbf167415e7e84f7329f95/tumblr_o7k4aqgAV61sn4o7po1_500.jpg" style="width:100%"/></a> 
 
 
26 排列<a href="http://bella-luna-cha-cha.tumblr.com/post/120103190621/peonyandbee-beeslikehoney-by-emilyblincoe" target="_blank"><img src=" http://36.media.tumblr.com/24d0853098947ef4495fb580876ae06b/tumblr_nolmguaL2c1r1vjs5o1_500.jpg" style="width:100%"/></a> 
 
 
27 青石<a href="http://pappledapple.tumblr.com/post/130741141896/tinamotta-via-denisearmstrongtumblrcom" target="_blank"><img src=" http://41.media.tumblr.com/ea437c3755df757424406334ededcec5/tumblr_nvhwixTwEV1tbsm2oo1_500.jpg" style="width:100%"/></a> 
 
 
28 松果<a href="http://vestidoslindosatelier.tumblr.com/post/132621437316" target="_blank"><img src=" http://41.media.tumblr.com/2ea4fa7a81faa8f9e40641200de189b9/tumblr_nxd1xuwUaq1rrqsx6o1_500.jpg" style="width:100%"/></a> 
 
			 </div>
<div class="column">29 耳鬓<a href="http://pappledapple.tumblr.com/post/128307485421/thebabyanimals-beautiful-blog-full-of-baby" target="_blank"><img src=" http://40.media.tumblr.com/c1e3203d81f0b8e089c39f2b71f729f3/tumblr_ns9qm0aUWm1tm0lv8o1_500.jpg" style="width:100%"/></a> 
 
 
30 样片<a href="http://66.media.tumblr.com/ae6fb15803c50fa25a6df0283e879746/tumblr_movl4gdOSP1qezwmho1_500.jpg" target="_blank"><img src=" http://66.media.tumblr.com/ae6fb15803c50fa25a6df0283e879746/tumblr_movl4gdOSP1qezwmho1_500.jpg" style="width:100%"/></a> 
 
 
31 淡青<a href="http://soulstratum.tumblr.com/post/145595947048" target="_blank"><img src=" http://65.media.tumblr.com/fe7b8cd7600c4560f09f5e3c395ad3ee/tumblr_nt36jcKOkf1qbvkoao1_500.jpg" style="width:100%"/></a> 
 
 
32 后院<a href="http://thisivyhouse.tumblr.com/post/105773946368" target="_blank"><img src=" http://40.media.tumblr.com/06f23c17ba77e41edf4dc8aa61a458ed/tumblr_neknc8RdX21silnnno1_500.jpg" style="width:100%"/></a> 
 
			 </div>
</div>
<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// Declare a loop variable
var i;

// Full-width images
function one() {
 for (i = 0; i < elements.length; i++) {
 elements[i].style.msFlex = "70%"; // IE10
 elements[i].style.flex = "70%";
 }
}

// Two images side by side
function two() {
 for (i = 0; i < elements.length; i++) {
 elements[i].style.msFlex = "50%"; // IE10
 elements[i].style.flex = "50%";
 }
}

// Four images side by side
function four() {
 for (i = 0; i < elements.length; i++) {
 elements[i].style.msFlex = "25%"; // IE10
 elements[i].style.flex = "25%";
 }
}

// Eight images side by side
function eight() {
 for (i = 0; i < elements.length; i++) {
 elements[i].style.msFlex = "12.5%"; // IE10
 elements[i].style.flex = "12.5%";
 }
}

// Add active class to the current button (highlight it)
var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
 btns[i].addEventListener("click", function() {
 var current = document.getElementsByClassName("active");
 current[0].className = current[0].className.replace(" active", "");
 this.className += " active";
 });
}
</script>
(所有图片的出处都可以点图得到）
 
Have a nice weekend!
greenlawn
:)
 
 
我的相关文章： 
			- <a href="http://blog.wenxuecity.com/myblog/48918/201409/153.html">炎炎夏日，来一些凉爽的东东解解暑，养养眼睛</a> 
- <a href="http://blog.wenxuecity.com/myblog/48918/201404/9743.html">好色之图 用这些惊艳的色彩养养眼睛，在细节中品味美好</a> 
- <a href="http://blog.wenxuecity.com/myblog/48918/94939.html">我的 自然之蓝和白黑灰等各色衣服 专栏</a>
 
 
</td>
</tr>
</tbody>
</table>
</div>

events

2024-01-28T18:16:23	美国欧洲加拿大等国，科技金融互联网等行业公司裁员信息

屋里屋外，缤纷的细腻，满眼的色彩