스타일 체인 CSS

Question

며칠 전이 멋진 psd를 발견했습니다 랜딩 페이지 그리고 스타일을 잘 모르겠습니다. 오래 전에 이런 스타일링을 보았습니다. 이 선은 이미지가되어야합니까? 또한 유사한 스타일의 코드 예제를 보낼 수 있습니까?

Screenshot

Answer 1

내가 10 분이 채찍질 그렇게하기 전에 다음 중 하나를 확인하고 싶었습니다, 나는 SCSS를 사용하고 있습니다 - 다음 "CSS (SCSS)"일반 CSS는 갈매기 옆에있는 드롭 다운 메뉴를 클릭하여 볼 수 "컴파일 된 CSS보기". 내가 사용하는 것을의 http://codepen.io/z-/pen/bwPBjY/

분석 : .entries는 margin:auto를 사용하여 중심 및 순서 픽셀 최대 폭 비율에와 폭을 주어, 각 이벤트는 .entry이며, 그들은 모두 .entries에 포함된다 다양한 화면 크기 지원.

다른 모든 항목은 그래서 내가 오른쪽 왼쪽으로 text-align로 float 수 있도록 모든 짝수 항목을 선택 :nth-child(2n)를 사용하고 동일한 측에; 홀수 번호로 지정된 기본 스타일을 덮어 쓰려면이 코드를 사용합니다.

줄의 양쪽에 항목을 넣으려면 기본적으로 너비가 calc(50% - 80px)인데, 이것은 기본적으로 텍스트와 줄 사이에 80px 간격이 있다는 것을 의미합니다. 왜냐하면 우리는 바깥쪽으로 떠 있기 때문입니다. 또한 우리는 엔트리를 꽤 높이 가깝게 (수직 간격을 둔 이미지가 고르지 않아서 그냥 무시하고 내 자신의 일을 처리했습니다) margin-top을 -60px으로 지정하고 싶습니다. 겹치는 부분은 우리가 원하는 부분이므로 clear:both을 추가해야 요소가 열린 공간으로 표류하는 것을 막을 수 있습니다. 첫 번째 항목이 페이지 상단에서 사라지지 않으므로 :not() 선택 자 .entry:not(:first-child) {margin-top:-60px;}을 사용할 수 있습니다. 그러면 첫 번째 요소를 제외한 모든 요소에 음의 위쪽 여백이 생깁니다.

의사 요소 :before 또는 :after을 사용하여 원을 추가하려면 제목을 기본으로 사용하고 원을 만들어 픽셀 수만큼 선 밖으로 이동하십시오. 난 그냥 머리 위로 갔다 말한 것을 나는 당신이 어딘가에 같은 https://codecademy.com/