帮忙分析一下网站布局实现的细节

Question

http://school-100.view.sitest...
这是网址。尽量是实现响应是布局。也可以说一下不响应的。

Answer 1

基本上就这样，你可以按照自己的想法去做，尽量按照模块化布局的思路做就可以了。注意复用性，先写相同部分，再写不同部分。先布局后写细节。

<div class="top"></div>
  <div class="header">
    <div class="logo"></div>
    <div class="nav">
      <ul>
        <li>...</li>
        ...
      </ul>
      <div class="search"></div>
      <span class="tel"></span>
    </div>
  </div>
  <div class="main">
    <div class="container">
      <div class="content about-us"></div>
      <div class="content teacher-strength"></div>
      <div class="content contact-us"></div>
    </div>
    <div class="container">
      <div class="left">
        <h1 class="news-center"></h1>
        ...
      </div>
      <div class="slide">
        <h1 class="school"></h1>
      </div>
    </div>
    ...
  </div>

Answer 2

其实很不想直接跟你说思路， 建议你看下 segmenfault官网例子，例如这个页面，就是响应式的。

或者简书也可以。http://www.jianshu.com/

其实做响应式最大的问题在于设计的时候就考虑到，而不是代码难度。

思路在于怎么用@media (max-width: 1588px) {}来修改css而已

Answer 3

直接看这个网站的源码就是了

Answer 4

谢邀。这个不叫响应式，就是给了一个980的宽度，margin：0 auto了一下。移动端没法看。

Answer 5

乱七八糟的网站 不值得参考