아름답고 간결한 CSS3 가격표 예제 소스 코드의 부트스트랩 구현에 대한 자세한 설명

머리말

이것은 아름답고 간결한 CSS3 가격표 스타일입니다. 가격표는 부트스트랩 그리드 시스템을 기반으로 구성됩니다. CSS3 코드는 가격표를 아름답게 만드는 데 사용됩니다. 스타일은 매우 세련되고 아름답습니다. 다양한 화면에서 좋은 효과를 표시할 수 있습니다.

렌더링 먼저 보기

데모 다운로드 소스코드 보기

우선 bootstrap.min.css 파일이 페이지에 소개되어 있습니다. 여기서는 공식 CDN 리소스를 사용하여 로컬에서 사용할 수도 있습니다.

<link rel="stylesheet" href="http//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

css3 가격표의 HTML 구조는 다음과 같습니다.

<p class="container"> 
    <p class="row"> 
        <p class="col-md-4 col-sm-6"> 
            <p class="pricingTable"> 
                <h3 id="Standard">Standard</h3> 
                <p class="price-value"> 
                    <span class="month">per month</span> 
                    <span class="amount"> 
                        <span class="currency">$</span> 
                        10 
                        <span class="value">99</span> 
                    </span> 
                </p> 
                <ul class="pricing-content"> 
                    <li>50GB Disk Space</li> 
                    <li>50 Email Accounts</li> 
                    <li>50GB Monthly Bandwidth</li> 
                    <li>10 Subdomains</li> 
                    <li>15 Domains</li> 
                </ul> 
                <a href="#" class="pricingTable-signup">sign up</a> 
            </p> 
        </p> 
 
        <p class="col-md-4 col-sm-6"> 
            <p class="pricingTable"> 
                <h3 id="Business">Business</h3> 
                <p class="price-value"> 
                    <span class="month">per month</span> 
                    <span class="amount"> 
                        <span class="currency">$</span> 
                        20 
                        <span class="value">99</span> 
                    </span> 
                </p> 
                <ul class="pricing-content"> 
                    <li>60GB Disk Space</li> 
                    <li>60 Email Accounts</li> 
                    <li>60GB Monthly Bandwidth</li> 
                    <li>15 Subdomains</li> 
                    <li>20 Domains</li> 
                </ul> 
                <a href="#" class="pricingTable-signup">sign up</a> 
            </p> 
        </p> 
    </p> 
</p>

CSS3

가격표에 다음 CSS 스타일을 추가하세요. 렌더링하고 아름답게 만듭니다.

.pricingTable{ 
    text-align: center; 
    background: #fff; 
    padding: 30px 0; 
} 
.pricingTable .title{ 
    font-size: 22px; 
    font-weight: 600; 
    color: #2e282a; 
    text-transform: uppercase; 
    margin: 0 0 30px 0; 
} 
.pricingTable .price-value{ 
    padding: 30px 0; 
    background: #ba5289; 
    margin-bottom: 30px; 
    position: relative; 
} 
.pricingTable .price-value:before{ 
    content: ""; 
    border-top: 15px solid #fff; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    position: absolute; 
    top: 0; 
    left: 46%; 
} 
.pricingTable .month{ 
    display: block; 
    height: 50px; 
    font-size: 15px; 
    font-weight: 900; 
    color: #fff; 
    text-transform: uppercase; 
} 
.pricingTable .amount{ 
    display: inline-block; 
    font-size: 50px; 
    color: #fff; 
    position: relative; 
} 
.pricingTable .currency{ 
    position: absolute; 
    top: -1px; 
    left: -35px; 
} 
.pricingTable .value{ 
    font-size: 20px; 
    position: absolute; 
    top: -11px; 
    right: -27px; 
} 
.pricingTable .pricing-content{ 
    padding: 0; 
    margin: 0 0 30px 0; 
    list-style: none; 
} 
.pricingTable .pricing-content li{ 
    font-size: 16px; 
    color: #868686; 
    line-height: 35px; 
} 
.pricingTable .pricingTable-signup{ 
    display: inline-block; 
    padding: 8px 40px; 
    background: #fca4a7; 
    font-size: 15px; 
    font-weight: 600; 
    color: #fff; 
    text-transform: capitalize; 
    border: 2px solid #fca4a7; 
    border-radius: 30px; 
    transition: all 0.5s ease 0s; 
} 
.pricingTable .pricingTable-signup:hover{ 
    background: #fff; 
    color: #fca4a7; 
} 
@media only screen and (max-width: 990px){ 
    .pricingTable{ margin-bottom: 30px; } 
}

이제 브라우저를 열어서 효과를 확인할 수 있으며, 휴대폰에서도 효과가 좋습니다.

Bootstrap의 아름답고 간결한 CSS3 가격표 예제 소스 코드 구현에 대한 자세한 설명은 PHP 중국어 웹사이트를 참고하세요!

관련 기사:

Bootstrap의 순수 CSS3 화살표 버튼 스타일에 대한 자세한 설명

jQuery는 BootStrap 스타일을 기반으로 무한 영역 연결을 구현합니다

Bootstrap 양식을 사용하여 예제 코드 만들기