Question

最近，Twitter创始人已经建立了一个名为https://medium.com/

的新酷社交媒体出版物

我的第一个想法是：哦，哇，这些人怎么做了这个好的启动页面？

所以，我的愚蠢问题是：是否有一种快速而简单的方法来与Twitter Bootstrap做类似的事情？

Answer 1

对我来说似乎很容易。如果你看代码（这里是一个美化版本）：

  <body itemscope itemtype="http://schema.org/CreativeWork" style="background-image:url('//dnqgz544uhbo8.cloudfront.net/_/fp/img/home/b.PJ4x7XRiSEPMkdWrQj2WbQ.jpg')">
    <div class="mask">
    </div>
    <div class="content page-splash">
      <div class="logo-terms">
        <a href="//medium.com/policy/9db0094a1e0f" class="tos">
          Our Terms of Service
        </a>
        <div class="logo">
          Medium
        </div>
      </div>
      <div class="message">
        <span class="quote">
          “
        </span>
        <span class="pull-quote">
          We’re rethinking publishing and building a new platform from scratch. This is a preview.
        </span>
        <span class="actions">
          <a href="//medium.com/about/9e53ca408c48">
            Read more
          </a>
          <span class="or">
            or
          </span>
          <a href="/m/account/authenticate-twitter">
            Sign in with Twitter&nbsp;
            <span class="twitter">
            </span>
          </a>
        </span>
      </div>
    </div>
  </body>

重要的部分是body background-image和mask，此处定义的CSS＆gt;＆gt;＆gt; dnqgz544uhbo8.cloudfront.net/_/fp/css/splash-base.umkWq9wEC0rFHI0pblZljA.css＆lt;＆lt;＆lt; - mask定位宽度/高度100％高于正文z-index 100和透明色＃E3E3E1。其他项quote，pull-quote和actions位于其上方（您可以在上述链接中看到他们的CSS定义）。

您还需要一些尺寸适合不同分辨率/设备类型的图片（如Android手机），这样您就可以非常快速地传送正确尺寸的图像，并在加载页面时作为背景图像插入到正文中。

编辑：链接介于＆gt;＆gt;＆gt;之间＆lt;＆lt;＆lt;＆lt;＆lt;，显然SO的正则表达式不喜欢链接的结构（它被http：//搞砸了）

Twitter Bootstrap中的中等启动页面

1 个答案: