Vì không thể gắn các class mới cho các tag (các thẻ) trong trang nên việc chúng ta cần phải làm y là phải xác định được tag nào cần được xữ lý, tag nào không cần.

Ví dụ 1:

Ta có đoạn code sau:
<div id=”main”>

<div class=”col-4”> Nội dung 1 </div>

<div class=”col-4”> Nội dung 2 </div>

</div>

<p>abcdefgh</p>

<p>1234567</p>

Việc ta cần làm là phải chỉnh sửa div chứa “nội dung 1” mà không làm ảnh hưởng đến div chứa “nội dung 2” mặc dù cả 2 div đểu dùng chung 1 class.

Để làm được việc này ta sẽ sữ dụng : CSS Selectors Reference

http://www.w3schools.com/cssref/css_selectors.asp

trong bài viết này sẽ sữ dụng : nth-child và +

Bước 0: tìm hiểu một vài reference

nth-child là thuộc tính để xác định tag tại vị trí nào đó mà ta muốn trong 1 vòng lặp (chu trình)

ví dụ 2:

#main > div:nth-child(2) {background-color: #fff;}

Đoạn code này sẽ set background của div thứ 2 nằm trong thẻ có id=main (ở vd1 ) thành màu đen, các div còn lại không ảnh hưởng

Biến + là biến dùng để xác định tag nằm ngay sau 1 thẻ nào đó

Xem demo:

Ví dụ 3:

div + p {

    background-color: yellow;

}

Đoạn code này sẽ set background của 1 thẻ p nằm ngay sau thẻ div nào đó thành màu vàng, ở vd 1 thì background của “abcdefgh” sẽ thay đổi thành vàng, còn “1234567” thì không thay đổi.

Xem demo: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_element_pluss

Bây giờ các bạn đã có thể hiểu các thức hoạt động của các đoạn code css dưới đây.

Đây là giao diện đơn giản ta sẽ có sau khi đọc xong bài viết

Còn đây là giao diện mặt định của trang checkout:

NOTE: Chỉ cần copy các đoạn code sau đây vào file Check_out.css trong thư mục Assest
Tải file css full tại đây

Bước 1: Chỉnh sửa header để có thể hiện ảnh thay thế cho nút Quay về trang Giỏ Hàng

Code:

/*======================== I. Headder và Link "Back to cart" */

.btn-back {

            display:block;

}

h1 span.btn-back{

            text-indent: -9999px;

            background: transparent;

}

            body.step1 a:nth-child(2) h1{

            font-size:0px;

}

@media (max-width:768px){

            .btn-back {

                        width: 55px;

                        overflow: hidden;

            }

}

@media (min-width:768px){

                        body.step1 a:nth-child(2) h1{

                        margin-top: 20px;

                        height: 105px;

                        background-size: contain;

            }

}

/*Tạo banner thay cho link Back to cart*/

@media (min-width:1025px){

            body.step1 a:nth-child(2) h1{

                        height: 95px;
            }

/*Set ảnh banner hiển thị khi màn hình > 1025px _ thay thế link ảnh vào url của background-image*/

            a h1{ 

                        background-image: url('//hstatic.net/880/1000003880/1000045356/banner-checkout.png?v=34');

                        background-position: 0px 0px;

                        background-repeat: no-repeat;

                        background-size: cover !important;

            }

}

/*Set ảnh banner hiển thị khi màn hình < 1025px

@media (max-width:1024px){

            body.step1 a:nth-child(2) h1::before {

                        content:url("//hstatic.net/880/1000003880/1000020170/logo.png");

            }

}

/* --END Header và Back to cart */

Bước 2: Chỉnh sửa form nhập thông tin

Code:

/*===========================II. From nhập thông tin */

/* Tiêu đề h2*/

.col-4.step1 h2 {

    background: #f9f9f9;

    margin-left: -15px;

    width: 100%;

    padding-left: 30px;

    margin-top: -15px;

    padding-top: 10px;

    border-top-left-radius: 3px;

    border-top-right-radius: 3px;

    padding-bottom: 10px;

    border-bottom: 1px solid #ddd;

}

/* ẩn link các link yêu cầu đăng nhập | đăng ký*/

.user-login{

            display: none;

}

.line{

            display: none;

}

.color-blue{

            display: none;

}

/*Chỉnh lại các thành phần khác để hiển thị đẹp hơn*/

#purchase-form .col-4{

            float: left;

}

.col-4.step1 { /*Thay đổi kích thước khung chứa form nhập thông tin*/

            width: 700px;

            background: #FFF;

            border-radius: 3px; 

            border: 1px solid #ddd;

}

@media only screen and (max-width: 768px) {

            .col-4.step1 {

                        width: 100%!important;

                        min-width: 100%;

                        padding: 0;

                        border:none !important;

            }

            #forminfo .form-group p {

                        display:none;

            }

            .form-group.ctrl-city,

            .form-group.ctrl-district { /*Thanh select vùng miền, thành phố*/

                        margin-left: 0px !important;

            }

            .box-cart {

                        margin-top: 0;

                        margin-bottom: 0;

            }

}

/* Hiện tiêu đề các textbox */

.form-group input + p, .form-group textarea + p {

            display: block;

            float: left;

            width: 130px;

            line-height:36px;

            margin:0px;

            color:#000;

}

            .form-group.ctrl-city,

            .form-group.ctrl-district { /*Thanh select vùng miền, thành phố*/

                        margin-left: 130px;

            }

/*css textbox phát hiện lỗi  */

.error {

    display: inline-block;

}
/*container chứa khung step1*/

.step1 .container {

    padding-top: 10px;

    border: none;

    box-shadow: none;

}

Bước 3: Ẩn mục chọn phương thức thanh toán

Code:

/*===================== III. Phương thức thanh toán */

/* Ẩn mục chọn phương thức thanh toán*/

body.step1 #purchase-form > div:nth-child(5) {

            visibility: hidden;

            margin: 0;

            width: 0;

            height: 0;

}

Bước 4: chỉnh lại vị trí mục Đơn hàng nếu cần thiết

Code:

/*===================== IV. Đơn hàng - box cart*/

.box-cart {

     margin-top: -15px;

}

p/s: Làm tương tự với Step 3