Re: [痞客] 部落格宽度调整问题请益

楼主: likangrace (沊沊)   2014-06-10 12:14:58
※进行一下动作之前,请务必将范本CSS做好备份,以备不时之需
┌─#container3 ────────────┐简单了解版面结构(只将会影响的区块
│┌#header ─────────────┐│粗画出来)
││ ││第一步:找出最上层宽度有设限者,
│└─────────────────┘│找到了 #container3{……}
│┌#main ──────────────┐│其中width被设定为950px,修大宽度
││┌#content──────┐┌#links┐││来个1100px好了(根据原po给的范例XDDD)
│││┌.article-content┐││ │││
│││└────────┘││ │││第二步:了解main、content 、links
││└──────────┘└───┘││现的宽度
│└─────────────────┘│main=
│┌#footer ─────────────┐│1100px-25px*2=1050px
│└─────────────────┘│#content{ width: 670px;}
└───────────────────┘#links{ width: 200px;}
670+200=870,嗯,宽的扣打还有180px
第三步:将扣打加入#content里,将#content{ width: 670px;}
改成#content{ width: 850px;}
ρ(-ω-〃) 呃,这样文章和侧栏黏TT的,太密个人不喜欢,
所以将850px缩小为840px,习惯留点空间呼吸~~(呼)
第四步:.article-content{ width: 670px;}改成#content{ width: 830px;}
基本上宽度加宽到此算一个结束,以下是细部美化部份
首先,我的banner图怎么怪怪的Σ(-`ω′-;)
这是因为原背景图宽度只有960,宽度拉成1100它就不够宽,重复的部份就跑出来
解决办法(1)重新将背景图加宽上传,更新#banner{ background:url("图片位置")}
(2)我图不改,右边还是维持白色,背景图不要重复就可了
#banner {
background: url("图片位置") repeat scroll 0 0 rgba(0, 0, 0, 0)
}中的repeat改成no-repeat 完工
接下来,我的文章标题怎么怪怪的Σ(-`ω′-;)
加宽的关系,文章标题也要加大了.title{ width: 535px;}
840-10-115= 715
#content宽度-.article-head的padding-发文日期宽度
所以请修改成.title{ width:715px; }
疑~~我文章宽度增加了被什么我的图没一起变大!!!!!
请将 .article-content-inner img[src$=".jpg"] { height: auto; width:100%;}
加入到CSS中,应该就看得到所有文章图变大了
作者: TongWang (阿乐马麻)   2014-06-11 01:51:00
大人~你太棒了(叩拜)按照你的方法,我弄了好久终于搞定!但是banner图还是无法...我土法炼钢好久还是不行@@而且有些细节好像怪怪的,说不上来的怪@@banner的部份,我全部改成no-repeat还是不行(已哭)而且我所有文章中的直图全部变好大大大@@
作者: corehs (corehs)   2014-06-11 16:55:00
推教学
作者: TongWang (阿乐马麻)   2014-06-13 01:18:00
大人~~~你太棒了,我搞定了(欢呼),请接受我的叩拜OTZ
楼主: likangrace (沊沊)   2014-06-13 08:10:00
(v ̄ω ̄(v ̄ω ̄(v ̄ω ̄) ya~~~~
作者: hirorei (深井有猫饼)   2014-07-02 10:51:00
作者: suching128 (香奈儿公主)   2014-09-19 14:18:00
太棒了!多亏有神人,我的网志也搞定了!感谢!顺便请问一下,banner的图片设定不重复后,是否能设定图片置中呢?拜求神人解析!

Links booklink

Contact Us: admin [ a t ] ucptt.com