这次把主题升级了下，然后哭着改完CSS（多列布局属性）

距离自己上次魔改主题也过去了一段时间，说实话我差不多把自己改的地方都忘了，然后这次脑子一抽就更新了，然后就是666.....

从凌晨2点左右就在搞了，各种更新调试，只能怪自己不熟练，找了好多地方调整，然后本来如果是直接在原来的css的属性上改会比较省事，但是发现以后要是再更新，那我不得想死，于是又单独开了一列，用了超多!important属性，然后呕心沥血的改好了，防止自己作死删了修改好的源文件，直接贴上大部分的CSS吧！又需要也可以自己粘贴使用哈哈，不过仅限于YoUDu这个主题。

说下心得：

• 本来我是想着既然css3出了一个多列布局的属性，那么不用白不用，就来体验下，发现，这个属性最大的bug在于不能控制高度，宽度的控制也是差强人意，虽然从某种角度来说，这个属性在这种多列布局里算是简单的不能再简单，即便如此，他用起来也不是很好用，所以我们宁愿用div+百分比估计也不会使用这个属性，他的判定太要命了！

列举下多列布局的属性：

1. columns：auto（宽度自动，也可直接写大小）3（几列）；【这里的宽度是指当屏幕最小的时候显示的大小，如果超出了就显示为一列，这里就比较蛋疼了，实际控制宽度的居然是"3（几列）"】
2. column-fill:balance;(对列进行协调。浏览器应对列长度的差异进行最小化处理。!没什么卵用)
3. column-gap：30px;(只能使用px，百分比无效，其他的自行测试。)
4. column-rule：1px solid #333;(设置列的边框，和border一样，不同的是这个边框不占据空间大小，相当于浮动着！)

主题源代码：

/*个人修改*/
body {font-weight: lighter !important;}
hr {border: none;border-bottom: 2px dashed #ff8c3a;}
.art-column{columns: 350px 2;column-gap: 30px;column-rule: 1px solid #eee;column-fill: balance;-moz-columns: 350px 2;-moz-column-gap: 30px;-moz-column-rule: 1px solid #eee;-moz-column-fill: balance;-webkit-columns: 350px 2;-webkit-column-gap: 30px;-webkit-column-rule: 1px solid #eee;-webkit-column-fill: balance;}
.main {background: #f7f7f7;}
#sidebar {text-align: center;box-shadow: 0 1px 5px #666;} ul.cd{padding-left: 0;}
.tx img{border: 5px solid #eee;transform: scale(1)}
.tx img:hover{-webkit-transform:scale(.8);-moz-transform:scale(.8);transform:scale(.8);}
sidebar .tx span {color: white !important}
.tx {width: 98%;margin: 0 auto;background: #ff8c3a;}
.post p a{color: #F38181 !important;}a:hover,h1.title a:hover {color: #ff8c3a !important;font-weight: lighter !important;}.post h1 a{color: #333 !important;}.post .meta a,.post .cancel-comment-reply a,.content .jrotty-links a {color: #4ea1d3 !important;}
.cd a i{font-style:normal}
h1.title {font-weight: lighter !important;}
.post{border-bottom: 2px dashed #ff8c3a !important;}
blockquote {color: #4aa0d5 !important;font-size: 1.5rem !important;border-left: .25em solid #FF895D !important;background: #f1f1f1 !important;}
#comments #textarea {color: #666 !important;}
.search-form--modal,.search-form input {background: rgba(0,0,0,.6) !important;}
.search_close::after, .search_close::before{background-color: white !important;}
.search_close::before,.search-form--modal .search-form__inner p,.search-form input::-moz-placeholder {color: white !important;}
.btn--one:hover, .btn--two:hover,.tags section a:hover {border: 1px solid #ff8c3a;color: #ff8c3a !important;}
.content {font-size: 1.7rem !important;}
.content .jrotty-links {background: #f7f7f7 !important;transition: all .3s;}
.content .jrotty-links:hover{border-radius:10px !important;background:white !important;box-shadow:0 15px 30px -15px #ff8c3a;color:#ff8c3a;opacity:.8;cursor:url(images/pointer.cur),pointer;transform: scale(.9);}
.tagses a:hover::before {border-right-color:#ff8c3a !important;border-right:12px solid #ff8c3a !important;}
.tagses a:hover{color: #fff !important;background: #ff8c3a !important;}
#lamu img, #leimu img{height: 100px;}
#lamu, #leimu{transition: all .3s;}
#lamu:hover, #leimu:hover{border-radius: 50%;overflow: hidden;}
@media only screen and (min-width:1560px){sidebar{width:300px !important;}}
@media only screen and (min-width:768px) and (max-width:1023px){#bottom-bar{width: calc(100% - 100px);}}
@media only screen and (min-width:1919px){body {width: 100% !important;}.post{min-height:270px !important;}#bottom-bar{width: 1700px !important;left: calc((100% - 2130px) / 2 + 351px) !important;}#lamu{right: calc((100% - 2050px)/ 2)!important;}}

效果图：