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

. 发布于 HTML,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;}}

效果图:
请输入图片描述

微信分享

评论:

暂无评论

Friend Link

搜索
去往底部
返回顶部