WeChat 미니 프로그램의 CSS 사용 기술 요약

이 글에서는 최근 인기를 끌고 있는 WeChat 미니 프로그램의 CSS 활용 기술을 소개합니다. 도움이 필요한 학생들은 이 글을 참고하세요

WeChat 미니 프로그램 CSS 활용 기술

1: 순수 CSS로 삼각형을 만드는 원리 위쪽, 왼쪽, 오른쪽 숨기기(색상을 투명하게 설정)

.demo {
 
width:0;
 
height:0;
 
border-width:20px;
 
border-style:solid;
 
border-color:transparenttransparentredtransparent;
 
}

2: 최대 높이 설정... 슬라이드 가능

max-height:550rpx;
 
overflow-y:scroll;

3: text-overflow 속성은 텍스트가 오버플로될 때 발생하는 상황을 지정합니다. 포함 요소

clip: 텍스트 자르기

ellipsis: 줄임표를 사용하여 잘린 텍스트를 나타냅니다.

string: 주어진 문자열을 사용하여 잘린 텍스트를 나타냅니다.

핵심은 3개입니다. 동시 사용: text-overflow:ellipsis;white-space:nowrap;overflow:hidden;

4:overflow: Hidden 줄 바꿈을 강제로 하지 않을 때, Overflow:hidden을 사용하여 줄 바꿈을 초과하는 부분을 숨깁니다. 인터페이스

5: margin-bottom이 유효하지 않습니다

margin-bottom은 요소가 아래쪽으로 이동하는 것을 허용하지 않습니다. 위쪽 여백 역할을 합니다. 요소를 아래로 "밀어냅니다".

아이콘을 하단에서 30px로 설정하려면 ul에 position:absolute,bottom:30px를 설정하면 됩니다. (같은 효과를 얻기 위해 이 문장을 추가한 것은 아닙니다.) 또한 상위 요소 position:relative

ㅋㅋㅋ

자동 줄 바꿈 ㅋㅋㅋ

p{
 
word-wrap: break-word;
 
word-break:normal;
 
}

위 내용은 WeChat 미니 프로그램의 CSS 사용 기술 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!