index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>华师匣子官网</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/static/images/favicon/apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/images/favicon/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/images/favicon/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/images/favicon/apple-touch-icon-144x144.png" />
    <link rel="apple-touch-icon-precomposed" sizes="60x60" href="/static/images/favicon/apple-touch-icon-60x60.png" />
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/static/images/favicon/apple-touch-icon-120x120.png" />
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/static/images/favicon/apple-touch-icon-76x76.png" />
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/static/images/favicon/apple-touch-icon-152x152.png" />
    <link rel="icon" type="image/png" href="/static/images/favicon/favicon-196x196.png" sizes="196x196" />
    <link rel="icon" type="image/png" href="/static/images/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/png" href="/static/images/favicon/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="/static/images/favicon/favicon-16x16.png" sizes="16x16" />
    <link rel="icon" type="image/png" href="/static/images/favicon/favicon-128.png" sizes="128x128" />
    <meta name="application-name" content="&nbsp;"/>
    <meta name="msapplication-TileColor" content="#FFFFFF" />
    <meta name="msapplication-TileImage" content="/static/images/favicon/mstile-144x144.png" />
    <meta name="msapplication-square70x70logo" content="/static/images/favicon/mstile-70x70.png" />
    <meta name="msapplication-square150x150logo" content="/static/images/favicon/mstile-150x150.png" />
    <meta name="msapplication-wide310x150logo" content="/static/images/favicon/mstile-310x150.png" />
    <meta name="msapplication-square310x310logo" content="/static/images/favicon/mstile-310x310.png" />
</head>
<body>
    <div class="header background-size font-size">
      <div class="content background-repeat background-size">
        <div class="content-left inline-block">
          <div class="gif-wrapper">
            <img class="gif" src="/static/images/screen.png">
          </div>
        </div>
        <div class="content-right inline-block vertical-align">
          <div class="top">
            <div class="top-word">华师匣子2.0</div>
            <div class="top-word">解锁更多姿势 尽在匣子</div>
          </div>
          <div class="middle">整合校园多方面信息的轻量查询工具，便利学生在校的学习和生活。</div>
          <div class="bottom">
            <div class="bottom-left  bottom-img background-repeat background-size inline-block"></div>
            <div class="bottom-right  bottom-img background-repeat background-size inline-block"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="interface auto">
        <div class="advantage inline-block vertical-align">
            <div class="new-advantage color">全新界面打造</div>
            <div class="more color">更快捷：课程表和图书馆底部放置；</div>
            <div class="more color">更美观：用户界面简洁统一；</div>
            <div class="more color">更亲和：页面增加情感化元素 。</div>
        </div>
        <div class="picture background-size inline-block"></div>
    </div>
    <div class="function auto">
      <div class="function-top color text-align">重大新功能上线</div>
      <div class="function-middle color text-align">你们所期待的，就是我们所努力的</div>
      <div class="function-bottom font-size">
        <div class="function-bottom-img inline-block">
          <div class="bottom-picture-left  bottom-picture background-repeat auto"></div>
          <div class="bottom-word">
            <div class="bottom-word-left color inline-block">计算学分</div>
            <div class="bottom-word-right inline-block text-align">new</div>
          </div>
          <div class="bottom-bottom auto color text-align">快捷计算已修总学分和平均学分绩</div>
        </div>
        <div class="function-bottom-img inline-block">
          <div class="bottom-picture-middle  bottom-picture background-repeat auto"></div>
          <div class="bottom-word">
            <div class="bottom-word-left color inline-block">空闲教室</div>
            <div class="bottom-word-right inline-block text-align">new</div>
          </div>
          <div class="bottom-bottom auto color text-align">轻松查看某时段的空闲教室情况</div>
        </div>
        <div class="function-bottom-img inline-block">
          <div class="bottom-picture-right  bottom-picture background-repeat auto"></div>
          <div class="bottom-word">
            <div class="bottom-word-left color inline-block">分享匣子</div>
            <div class="bottom-word-right inline-block text-align">new</div>
          </div>
          <div class="bottom-bottom auto color text-align">多平台分享匣子让更多人享受校园便利</div>
        </div>
      </div>
    </div>
    <div class="browse">
      <div class="browse-top auto color text-align">全部功能概览</div>
      <div class="browse-middle auto color text-align">多项功能轻松为你扫除在校疑难症</div>
      <div class="browse-bottom auto">
        <div class="row font-size">
          <div class="block">
            <div class="score blockpicture auto"></div>
            <div class="word text-align">成绩</div>
          </div>
          <div class="block">
            <div class="notice blockpicture auto"></div>
            <div class="word text-align">校园通知</div>
          </div>
          <div class="block">
            <div class="electrica blockpicture auto"></div>
            <div class="word text-align">电费</div>
          </div>
        </div>
        <div class="row font-size">
          <div class="block">
            <div class="card blockpicture auto"></div>
            <div class="word text-align">校园卡</div>
          </div>
          <div class="block">
            <div class="computation blockpicture auto"></div>
            <div class="word text-align">算学分</div>
          </div>
          <div class="block">
            <div class="classroom blockpicture auto"></div>
            <div class="word text-align">空闲教室</div>
          </div>
        </div>
        <div class="row font-size">
          <div class="block">
            <div class="information blockpicture auto"></div>
            <div class="word text-align">部门信息</div>
          </div>
          <div class="block">
            <div class="calendar blockpicture auto"></div>
            <div class="word text-align">校历</div>
          </div>
          <div class="block">
            <div class="website blockpicture auto"></div>
            <div class="word text-align">常用网址</div>
          </div>
        </div>
        <div class="row font-size">
          <div class="block">
            <div class="xueer blockpicture auto"></div>
            <div class="word text-align">学而</div>
          </div>
          <div class="block">
            <div class="library bad background-repeat auto background-size"></div>
            <div class="word text-align">图书馆</div>
          </div>
          <div class="block">
            <div class="schedule bad background-repeat auto background-size"></div>
            <div class="word text-align">课程表</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer font-size">
      <div class="bottom-top"></div>
      <div class="footer-container auto">
        <div class="logopicture display background-repeat"></div>
        <div class="logoword display">华师匣子</div>
        <div class="joinlogo display background-repeat"></div>
        <div class="joinwho display">华中师范大学木犀团队出品</div>
        <a href="http://muxistudio.com/join" class="joinus display">加入我们</a>
      </div>
    </div>
</body>
</html>