모바일 HTML5 목록을 만드는 방법
- 一个新手원래의
- 2017-09-06 10:21:192113검색
머리말
이 기사 시리즈의 CSS 부분은 모두 SASS 구문으로 작성됩니다. SASS를 모른다면 "CSS 사전 컴파일 기술 - SASS 학습 경험"을 포함한 관련 튜토리얼을 읽는 것이 좋습니다. 요약' 튜토리얼.
이번 시리즈에서는 브라우저 스타일을 재설정하는 데 사용되는 두 가지 기본 문서인 Reset.scss 및 mixin.scss와 일부 기본 SASS 코드 블록을 참조하겠습니다. 코드가 길기 때문에 "모바일 터미널 시리즈 블로그 기본 사항"을 참조하세요. Reset.scss and mixin.scss》obtain.
제 레벨은 제한되어 있고 실력은 보통 수준이라 글에 오류나 누락이 있을 수 있으니, 언제든지 글에 댓글 남겨주시면 답변해드리겠습니다.
가장 간단한 목록
먼저 우리가 이루고 싶은 효과는 아래 그림과 같습니다.
위에서 보듯이 달성하려면 이렇게 간단한 목록이 필요합니다.
html 코드
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><title>list 1</title><link rel="stylesheet" href="../style/style.css"></head><body><p class="list_1">
<ul>
<li><a href="">这是一个列表1</a></li>
<li><a href="">这是一个列表2</a></li>
<li><a href="">这是一个列表3</a></li>
<li><a href="">这是一个列表4</a></li>
<li><a href="">这是一个列表5</a></li>
<li><a href="">这是一个列表6</a></li>
<li><a href="">这是一个列表7</a></li>
<li><a href="">这是一个列表8</a></li>
</ul></p></body></html> 여기서 설명해야 할 것은 모바일 단말기가 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">이 코드를 추가해야 한다는 것입니다. 그렇지 않으면 모바일 브라우저가 이를 다음과 같이 처리합니다. 확장 가능한 웹 페이지의 PC 버전입니다.
인코딩으로 인해 문자가 깨지는 것을 방지하기 위해 서버, 데이터베이스, 백엔드 프로그램, 프런트엔드 HTML 및 CSS를 모두 utf-8로 인코딩하는 것이 좋습니다.
SASS 코드
.list_1 {
ul {}
li {
border-bottom:1px solid
#ddd;padding:0 1.6rem;
a {display: block;
height: 4rem;
line-height:
4rem;overflow:
hidden;font-size: 1.4rem;}
}
}
这里的单位全部使用的是,我们里面,已经将的字体大小设置为了,也就相当于正常情况下的10px.也就是说,上面的相当于.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释.
不会sass的,请先阅读sass相关教程.不要觉得难,一个小时保证学会,两天能玩的非常溜.여전히 간단한 목록입니다
먼저 렌더링을 살펴보겠습니다.
얼핏 보면 이 목록과 위 목록 사이에 차이가 없습니다. 자세히 보면 아래 선이 직선이 아니라는 것을 알 수 있습니다.
놀라지 마세요. 디자이너들은 이런 디자인을 하는 경우가 많습니다. 프론트엔드 직원으로서 우리는 일부를 충실히 복원해야 합니다. 디자이너가 디자인한 작은 디테일이죠 ㅎㅎ
html 코드는 첫 번째 예시와 똑같습니다. 더 이상 코드를 반복하지 마세요
SASS 코드
.list_1 {
ul {padding-left: 1.6rem;}
li {border-bottom: 1px solid
#ddd;padding-right: 1.6rem;
a {display: block;
height: 4rem;
line-height: 4rem;
overflow: hidden;
font-size: 1.4rem;}
}
}생각이 약간 바뀌면 데모1의 로딩 li에 대한 패딩 값을 ul과 li에 할당하면 됩니다.
위 내용은 모바일 HTML5 목록을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!