javascript - 가장 자연스러운 레이아웃을 얻는 방법은 무엇입니까?

Question

아래와 같이

Answer 1

원 4개를 직사각형의 꼭지점 4개로 생각하고 점선은 테두리 스타일의 점선을 사용하여 구현할 수 있습니다.

그러면 전체 페이지가 이 직사각형처럼 수직으로 하나씩 쌓이게 됩니다. 두 개의 정점이 각 직사각형에 배치되고 직사각형의 왼쪽 상단과 오른쪽 상단에 절대적으로 위치하게 됩니다.

https://codepen.io/straybugs/…

Answer 2

순수한 수평적, 수직적 진보 관계가 없어 매우 어색해 보입니다.
각 레이어 간의 관계는 포인터에 의한 것이 아니라 아래의 단계 수를 보면 알 수 있습니다.
어두운 배경의 프로세스 설명도 2개 있는데 목적을 모르겠습니다.
전체적인 경험이 너무 열악하고, 특히 프로세스가 너무 좁아서 사용자의 주의에 영향을 미칩니다.

Answer 3

배경 이미지
캔버스
의사 클래스

Answer 4

너비가 고정되면 선이 배경에 던져질 수도 있겠네요 ㅎㅎㅎ

Answer 5

width || height: calc는 선 너비를 동적으로 계산합니다. 이 검은 선은 의사 요소인 ::before ::after를 사용할 수 있으며, 해당 부모 클래스는 모두 호스트 요소라고 생각하지만 CSS를 사용하면 가능합니다. .

Answer 6

1. 사진과 함께 커팅하는 것도 하나의 방법입니다.
2. 또는 위치 지정을 위해 레이아웃의 추가 p를 사용하고 스타일을 위해 테두리: 1px 점선 #000을 사용합니다. . 그게 다야.
3. CSS 의사 클래스를 사용하여 구현하세요.

Answer 7

IE8 이후의 브라우저라면 의사 클래스를 사용해 구현하세요

으아아아

이전 브라우저와 호환되는 경우 p만 사용하여 웨이브를 시뮬레이션할 수 있습니다. 이는 개인의 필요에 따라 다릅니다.

Answer 8

캔버스를 사용하는 학생들을 응원해주세요. 한발 물러서서 사진을 활용해 사진을 오려보세요.

Answer 9

먼저 ul li float를 사용하여 부동하고, 그 다음 class.bg{position:relitive}를 작성하고 두 개의 의사 클래스, 즉 수평선과 수직선을 작성하고 디자인 초안에 따라 위치를 지정합니다