H5 모바일 단말기에서 다양한 목록을 작성하는 방법에 대한 자세한 설명(4)
- 黄舟원래의
- 2017-03-10 16:39:071862검색
H5 모바일 단말기에서 다양한 목록 만드는 방법(4)
이전 리뷰
《H5 모바일 단말기에서 다양한 목록 만드는 방법 제작 방법(1) 》
《H5 모바일 단말기에서 각종 목록 작성하기(2)》
《H5 모바일 단말기에서 다양한 목록 작성하기(3)》
이 글을 먼저 보셨다면 , 위 링크로 가셔서 해당 내용을 먼저 읽어보시면 문맥이 일관되고 이 글의 내용을 더 쉽게 이해하실 수 있을 것입니다.
처음 3장은 모두 일반적인 목록을 구현하는 방법에 대해 이야기합니다. 난이도는 쉬운 것부터 어려운 것까지 있지만 일반적으로 이 장에서는 그래픽 목록을 만들어 보겠습니다.
일반적인 2열입니다. 그림 및 텍스트 목록
2열 그림 및 텍스트 목록은 JDTB와 같은 H5 전자상거래 모바일 단말기에서 훨씬 더 일반적입니다. 아래 그림은
여기 그림과 텍스트 목록의 매우 간단한 2열 레이아웃이 있으며 각 블록에는 그림, 이름 및 가격이 포함되어 있습니다. 하지만 모바일 쪽이기 때문에 다양한 휴대폰의 너비가 일치하지 않습니다.
여기의 사진은 모두 동일합니다. 실제 프로젝트에는 일반적으로 제품 사진에 대한 요구 사항이 있습니다. 제품이 정사각형이 아닌 경우
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 2</title>
<link rel="stylesheet" href="../style/style.css"></head><body><p class="list_2">
<ul>
<li>
<a href="">
<img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
<h4 class="goods_title">这里是商品标题1</h4>
<em class="goods_price">￥4999.00</em>
</a>
</li>
<li>
<a href="">
<img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
<h4 class="goods_title">这里是商品标题2</h4>
<em class="goods_price">￥4999.00</em>
</a>
</li>
<li>
<a href="">
<img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
<h4 class="goods_title">这里是商品标题3</h4>
<em class="goods_price">￥4999.00</em>
</a>
</li>
<li>
<a href="">
<img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
<h4 class="goods_title">这里是商品标题4</h4>
<em class="goods_price">￥4999.00</em>
</a>
</li>
</ul></p></body></html>코드는 비교적 길지만 한 눈에 알아볼 수 있습니다. 다양한 요소에 서로 다른 클래스를 추가했습니다. 이는 이러한 요소의 기본 스타일을 통일하고 CSS 코드를 재사용할 수 있도록 하는 것입니다. 달성할 수 있습니다.
SASS 코드
.list_2 {
ul {
@extend .cf; // 引用清理浮动代码片,看不懂请看本人scss相关教程
li {
width: 50%;float: left;padding: 1rem 0;
outline: 1px solid #ddd; // 使用 outline 模拟边框 (outline不占据盒子模型)
background: #fff; // 使用白色背景颜色,防止 outline 重叠造成 2px 线条
a { display: block;
text-decoration: none; // 去除默认下划线
} .goods_title,.goods_price {
padding: 0 1rem; // 加上左右内填充,防止文字和边框粘结
text-align: center;
} .goods_photo {
width: 60%;margin: .5rem auto;display: block;
}
}
}
}// 全站范围内用到的图文基本样式.goods_title,.goods_price {
display: block;position: relative;
@include ts(); // 引用文字描白边代码片
@include online(1.8rem); // 引用文字超出一行省略号代码片}
.goods_title {color:#000;font-size: 1.2rem;}
.goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}다시 한번 말씀드리지만, 이 튜토리얼 시리즈의 CSS 부분에서는 SASS 구문을 사용합니다. SASS 구문을 모르는 경우에는 비용을 사용하는 것이 좋습니다. 30분에서 1시간 정도 SASS를 학습합니다.
여기에서는 사이트 전반에 걸쳐 몇 가지 일반적인 스타일을 추출합니다. 이렇게 하면 코드 재사용이 쉬워집니다.
요약
이 장에서는 우리는 다음 사항에 초점을 맞추기 위해 그래픽 목록의 간단한 2열 레이아웃을 사용합니다
모바일 측에서는 왼쪽 및 오른쪽 테두리를 사용할 때
border테두리를 사용하지 않도록 노력하세요. 이 예에서는outline-
을 사용하여 테두리를 시뮬레이션하는 경우
outline테두리를 피하려면 배경색을 사용해야 합니다.2px - CSS3 텍스트 획 구현 방법.
text-shadow - 줄임표 표시를 초과하는 CSS3 텍스트 제목 구현 방법
- Sass에 코드 블록을 도입하는 두 가지 방법과 그 유사점과 차이점(직접 고려하거나 관련 튜토리얼을 참조하세요)
In,
html5태그는 블록 수준 요소를 중첩할 수 있습니다. 그러나a또는 이전xhtml버전에서는 이 방법을 사용하지 않는 것이 좋습니다.html
위 내용은 H5 모바일 단말기에서 다양한 목록을 작성하는 방법에 대한 자세한 설명(4)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!