起步圈个人博客

文章内容

红色系个人博客自适应模板首页二

发布时间:2018-06-19T10:32:49来源:所属栏目:[ html5+css3] <<连载文章:本文上一篇 连载文章:本文下一篇>>

    这个系列的第二篇说说怎样实现自适应模板:
    这需要对每个不同分辨率写对应的css,
    先对768分辨率,这个系列的第一篇已经写了红色系个人博客模板首页所需要的html+css了,现在只要加下面的css就可以实现对768分辨率下的自适应了。

      @media screen and (max-width: 768px) {
      .mainContent { float: none; width: auto; }
      h1#logo { float: none }
      #mem{ float: none;display: block;width: 100%; }
      #mem li { display: block; list-style: none; padding: 1px; text-align: center; }
      #mem li a { display: block;padding: 8px 10px;  }
      nav { float: none; }
      nav li { display: block; list-style: none; padding: 1px; text-align: center; }
      nav li a { display: block; }
      .leftlist {float: none;}
      }
    效果图:

     


    下一篇我们说说在480分辨率下又是怎样实现自适应的。

[留言列表]