首页 » HTML,CSS » 这次把主题升级了下,然后哭着改完CSS(多列布局属性)

最后更新于 2018年04月11日

距离自己上次魔改主题也过去了一段时间,说实话我差不多把自己改的地方都忘了,然后这次脑子一抽就更新了,然后就是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;}}

效果图:
请输入图片描述

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao