프런트 엔드 페이지 레이아웃과 다양한 효과가 정말 눈부십니다. 회사의 디자이너들은 하나의 웹사이트에서 모든 프런트 엔드 레이아웃과 스타일 효과를 사용하고 싶어합니다.
다음과 같은 레이아웃 효과를 얻으려면 어떻게 해야 합니까? 나는 이 레이아웃 효과에 작은 div 레이아웃의 카드 스태킹이라는 이름을 부여했습니다. 그런 다음 Baidu를 검색하여 실제로 이 스택 효과가 구현되어 있다는 것을 알았습니다. 예를 들어 jQuery와 CSS3의 멋진 스택 카드 확장 및 축소 효과가 있습니다. 카드 스택을 검색하여 카드 스택에 대한 효과를 찾았습니다. 물론 위의 두 URL에 대한 효과는 상대적으로 복잡합니다. 다음 효과가 달성되는 한 여기에서 필요한 것은 간단합니다.
코드는 다음과 같습니다.
<style> .container { margin: 50px auto; width: 328px; } .box { background: #f7f7f7; position: relative; } .box-content { padding: 20px; width: 70%; } .box-content-title { margin: 0 0 10px; } .box-content-desc { -webkit-box-orient: vertical; color: #333; display: -webkit-box; font-size: 14px; line-height: 1.5; -webkit-line-clamp: 4; margin-bottom: 30px; overflow: hidden; text-overflow: ellipsis; } .box-content-link { color: #006ec8; font-size: 14px; text-decoration: none; } .box-content-link:hover { text-decoration: none; } .box-img { position: absolute; right: -38%; top: 20px; } </style> <div class="container"> <div class="box"> <div class="box-content"> <h5 class="box-content-title">A公司</h5> <div class="box-content-desc">A公司是B公司的重要战略伙伴,致力于为C行业提供一站式 解决方案,目前处于高速发展期。公司旗下有四个事业部,业务主要涵盖以下三个方面,2016年公司 年营业额达到100万元。 </div> <a class="box-content-link" href="javascript:void(0);">查看 >></a> </div> <img class="box-img" src="../../asset/images/logo/obama-card196x172.jpg" alt=""> </div> </div>
실제로는 매우 간단합니다. .box.box의 하위 요소는 상대적으로 위치가 지정되고 배경색을 추가합니다. .box-content는 정상적으로 정렬되고 너비와 패딩은 하위 요소의 위치를 제어하는 데 사용되며 .box-img는 위치를 제어하는 데 사용됩니다. 기본적으로 원하는 효과를 얻을 수 있습니다.