begin二次开发-调整页脚友链宽度

页脚的友链这个默认全宽,其实挺好看的。但是如果有一些用户自己弄了跟随小工具,到这个地方可能会挡住?所以可以修改下CSS。

后台-外观-编辑-style.css,搜索:#links

  1. /** 链接 **/
  2. #links {
  3.     margin: 0 -2px;
  4. /*增加这一行*/
  5.     width760px;
  6. }

修改增加width定义即可。但是,会发现一个问题,相对的链接都缩小了,怎么办呢?修改这里。

  1. @media screen and (min-width1024px) {
  2. .lx7 {
  3.     width: 14.2857%; /* 改为 20% */
  4.     transition-duration: .5s;
  5.     }
  6. }

大概的样子如图:

begin二次开发-调整页脚友链宽度

然后,我们缩小屏幕,会发现在某些宽度下,排版有点问题。对比了中间的代码,发现其实是比例,而不是PX,所以,第一个修改代码的地方,应该改为这样。

  1. /** 链接 **/
  2. #links {
  3.     margin: 0 -2px;
  4. /* 下面的px改为百分比 */
  5.     width: 70.4%;
  6. }

这样就OK了,继续缩小,又发现问题,于是我们需要借助一个好东西,那就是@media属性。

  1. /* 搜索类似代码 */
  2. /** 等于或小于900px **/
  3. @media screen and (max-width900px) {
  4.     #primary {
  5.         width: 99.9%;
  6.     }
  7. /* 后面添加下面代码 */
  8. #links {
  9.     margin: 0 -2px;
  10.     width: 99.9%;
  11. }

这样修改后,基本就OK了。继续缩小友链会隐藏起来,如果希望很小的时候也能看到,以此类推的思路去修改样式即可。这里不再继续讲。

教程,主要是给思路,思路有了,以后才能自己自定义的修改。

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:1   其中:访客  1   博主  0

  1. avatar yumanutong 5

    不过,我自己没这样做。哈哈。我还没想好首页怎么布局呢目前。。因为会增加新栏目。只是看到觉得可以写个教程,方便需要的人。

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情