중간 시작 페이지

최근 트위터 창업자가 설정 한 새로운 멋진 소셜 미디어 출판은 내 첫번째 생각은했다중간 시작 페이지

https://medium.com/라고 : 오, 와우, 어떻게이 사람이 훌륭하신 시작 페이지를 짓을 한거야?

내 바보 같은 질문 : 트위터 부트 스트랩과 비슷한 것을 빠르고 간단하게 할 수있는 방법이 있습니까?

2012-11-24 xbelanch

난 당신이 부트 스트랩을 단지 필요가 있다고 생각하지 않습니다 링크 >>> < < < 사이에, appearently SO의 링크의 구조와 같은 정규 표현식 나던 (// 그것은 http로의 엉망이됩니다) 그런 페이지를 만드십시오. 그냥 평범한 HTML과 CSS로 충분하다. 문제가있는 구체적인 것이 있습니까? – 1nterference

** "부트 스트랩으로 구동되는"웹 사이트가 아닙니다 **입니다 **. BTW, 부트 스트랩 프로그래머는 더 이상 트위터에서 일하지 않습니다. 그것은 스스로를위한 프로젝트였습니다. 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 정의를 볼 수 있음).

다른 해상도/장치 유형 (안드로이드 전화와 같은)에 맞게 크기가 조정 된 일부 사진이 필요하므로 정확한 치수가 지정된 이미지를 즉시 전달하고 페이지가로드 될 때 본문에 삽입 할 수 있습니다.

편집 :

출처

2012-11-24 17:01:24 davidkonrad

중간 시작 페이지

답변

관련 문제