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

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

后台-外观-编辑-style.css，搜索：#links

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

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

  1. @media screen and (min-width: 1024px) {
  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-width: 900px) {
  4.     #primary {
  5.         width: 99.9%;
  6.     }
  7. /* 后面添加下面代码 */
  8. #links {
  9.     margin: 0 -2px;
  10.     width: 99.9%;
  11. }

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

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

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

支付宝扫一扫赞助

微信钱包扫描赞助

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

  1. avatar yumanutong 5
    回复 2015年12月26日 14:02  -9楼

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

评论加载中...

发表评论

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

图片 表情