begin二次修改-调整页脚友链宽度
yumanutong发表于 2015-12-26 04:10:11
页脚的友链这个默认全宽，其实挺好看的。但是如果有一些用户自己弄了跟随小工具，到这个地方可能会挡住？所以可以修改下CSS。
后台-外观-编辑-style.css，搜索：#links
- /** 链接 **/
- #links {
- margin: 0 -2px;
- /*增加这一行*/
- width: 760px;
- }
修改增加width定义即可。但是，会发现一个问题，相对的链接都缩小了，怎么办呢？修改这里。
- @media screen and (min-width: 1024px) {
- .lx7 {
- width: 14.2857%; /* 改为 20% */
- transition-duration: .5s;
- }
- }
大概的样子如图：
然后，我们缩小屏幕，会发现在某些宽度下，排版有点问题。对比了中间的代码，发现其实是比例，而不是PX，所以，第一个修改代码的地方，应该改为这样。
- /** 链接 **/
- #links {
- margin: 0 -2px;
- /* 下面的px改为百分比 */
- width: 70.4%;
- }
这样就OK了，继续缩小，又发现问题，于是我们需要借助一个好东西，那就是@media属性。
- /* 搜索类似代码 */
- /** 等于或小于900px **/
- @media screen and (max-width: 900px) {
- #primary {
- width: 99.9%;
- }
- /* 后面添加下面代码 */
- #links {
- margin: 0 -2px;
- width: 99.9%;
- }
这样修改后，基本就OK了。继续缩小友链会隐藏起来，如果希望很小的时候也能看到，以此类推的思路去修改样式即可。这里不再继续讲。
教程，主要是给思路，思路有了，以后才能自己自定义的修改。