中飛濺頁

近日，微博創始人已經建立了一個新酷的社交媒體發佈所謂https://medium.com/中飛濺頁

我首先想到的是：哦，哇，怎麼這個傢伙已經這樣做了優美的初始頁面？

所以，我這個愚蠢的問題：有沒有一種快速簡單的方法來做類似的Twitter Bootstrap？

2012-11-24 xbelanch

我不認爲你需要引導剛：連結>>> < < <之間，appearently SO的正則表達式犯規喜歡的鏈接結構（//它就會以http混亂的）做出這樣的一頁。只需簡單的HTML和CSS就足夠了。有什麼具體的問題嗎？ – 1nterference

它肯定是**而不是**「引導動力」網站。順便說一下，引導程序員不再在Twitter上工作，它本身就是一個項目http://blog.getbootstrap.com/2012/09/29/onward/ – davidkonrad

對我來說這似乎很容易。如果你看一下代碼（這裏享福版）：

<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>

的重要部分是bodybackground-image和mask，CSS這裏定義>>> dnqgz544uhbo8.cloudfront.net/_/fp/css/splash -base.umkWq9wEC0rFHI0pblZljA.css < < < - mask定位在身體上方的寬度/高度100％，其中z-index 100和透明顏色＃E3E3E1。其他項目quote,pull-quote和actions位於上方（您可以在提到的鏈接中看到它們的CSS定義）。

您還需要一些尺寸適合不同分辨率/設備類型（如android手機）的圖片，因此您可以立即提供正確尺寸的圖像，並且可以在頁面加載時作爲背景圖像插入到主體中。

編輯：

來源

2012-11-24 17:01:24 davidkonrad

回答

相關問題