Tạo layout website cùng CSS Grid
TIL
720
CSS3
49
HTML5
24
White

Tấn Huy viết ngày 15/08/2018

Sau khi đã tìm hiể về Grid ở hai phần trước - về các property thông dụng của grid (phần 1, phần 2) thì chúng ta cũng đã thấy grid rất hữu dụng vì thao tác được cả hai chiều hơn cả flex-box. Vì vậy, hôm nay chúng ta sẽ làm bài tập cùng với grid để có thể nhớ lâu hơn, đó là tạo layout cho website cùng với grid. Đây là một ví dụ nhỏ do mình chế ra (chắc cũng giống mấy cái layout khác thôi, nói chế cho sang :laughing: vẽ bằng paint nha :v) chúng ta sẽ dùng nó để luyện tập grid :3
alt text
Ví dụ trên đây nhìn giống như một cái blog, với phần header sẽ là logo và vài dòng miêu tả gì đó. Tiếp đến là phần nội dung chính của trang web với section 1 là phần giống như bài viết mới nhất của trang và section 2 là các bài viết của blog và chia thành từng ô. Cuối cùng và phần footer với bên trong là một số ô vuông có thể cho vào đó là các địa chỉ để contact với tác giả. Bắt tay vào làm thôi.

HTML

Như các bài tạo layout trước, việc cần làm đầu tiên sẽ là bố trí HTML cho web của mình trước sau đó sẽ là "tô màu" bằng CSS.

Header

Như ở trên, phần đầu tiên của chúng ta sẽ là logo và một vài dòng giới thiệu.

<header id="header-id">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqfcAsD6WSKniz_ejkLCZd_jcEUSmvdgWuuz7WyPh0MtWBqSJQ">
        <h1>HyHy's Blog</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, quidem.</p>
    </header>

Ở đây mình cho một cái ảnh bất kì và tên blog là HyHy's blog kèm dưới đó là vài dòng lảm nhảm :3
alt text

Main

Tiếp đến là phần nội dung chính của chúng ta, nội dung chính chúng ta sẽ có hai phần đó là: section 1section 2 mình sẽ đặt cả hai trong tag <main> - đây là một tag của HTML5 và có level là block.

Section 1

section 1 chúng ta sẽ có một tấm hình và phía dưới là nội dung của nó. Mình sẽ đặt nó trong class new-post

      <section id="section-1">
            <div class="new-post">
                <img src="https://cdn.shopify.com/s/files/1/1235/6514/products/shiba_stickers_part_2_1024x1024.jpg?v=1494955577">
                <div class="new-post-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda sequi impedit sunt a, nam veritatis. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
                </div>
            </div>
        </section>

alt text
Hình khá lớn nên mình chỉ cắt một phần ra thôi :laughing:.

Section 2

Tiếp theo là section 2, ở phần này chúng ta sé có 9 ô đại diện cho 9 bài post của chúng ta (dí dụ dậy). cấu trúc của nó cũng giống như phần new-post ở trên nhưng chúng ta sẽ đặt trong class khác, gọi là post đi. 9 ô này cấu trúc như nhau, chỉ khác là ở phần hình ảnh và nội dung, vì làm biến nên mình sẽ làm 1 ô và lặp lại 9 lần :3.

/*Nhớ cái này là nằm trong tag <section id="section-2">*/
<div class="post">
    <img src="https://cdnb.artstation.com/p/assets/images/images/011/902/733/large/th-trung-nguy-n-shiba.jpg?1532009523">
    <div class="post-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda sequi impedit sunt a, nam veritatis. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    </div>
</div>
/*Nhớ lặp lại 9 lần nha :3 hoặc bao nhiêu lần tùy thích :v*/

alt text

Footer

Phần footer của chúng ta bên trong sẽ có các ô vuông là các icon contact nên mình sẽ đặt các ô này trong class contactvà bên trong các icon mình sẽ đặt thêm một class contact-box để lát có thể style cho icon dễ hơn , ở đây mình dùng library của Font Awesome để trích ra các icon như facebook, linkedin, mây mây, không cần download chỉ cần gắn link vào phần head và gắn class có chứa icon bạn muốn và tag span hay i là được. (tham khảo thêm ở đây, ngoài ra có cả library của bootstrap và google).

<footer id="footer-id">
        <div class="contact">
            <span class="fa fa-facebook contact-box"></span>
            <span class="fa fa-github contact-box"></span>
            <span class="fa fa-google-plus contact-box"></span>
            <span class="fa fa-linkedin contact-box"></span>
        </div>
        <p>Project by &copy;<a href="">HyHy</a></p>
    </footer>

bé bé, xinh xinh:
alt text

CSS

htmlđã có giờ thì chúng ta sẽ tiến hành đến với css để chia layout cũng như là "tô màu" cho web của chúng ta.

Trước khi đi vào style cho từng phần thì chúng ta style một số cho phần chung:

/*core*/
    *{
        box-sizing:border-box;
    }
    body{
        padding:0;
        margin:0;
        line-height:1.5;
        font-family:Arial, Helvetica, sans-serif;
    }

Tìm hiểu thêm về box-sizing ở đây

Header

Ở phần header chúng ta sẽ cho tất cả ra chính giữa và thu nhỏ cái logo cũng như là "vo" tròn nó lại :v

#header-id{
        margin-top:0.5em;
        text-align:center;
    }
#header-id img{
    border-radius:50%;
    width:10em;
    height:10em;
}

cute gớm:
alt text

Main

section 1

Ở phần section 1 này thì không có gì đặc biệt, chúng ta sẽ làm cong và đổ bóng phần new-post bằng border-radiusbox-shadow, và vì hình ảnh trên kia khá lớn nên sẽ thu nhỏ nó lại và chỉnh vừa vặn bằng object-fit:cover. Ngoài ra chúng sẽ có :hover để khi rê chuột vào còn biết là ta đang nhắm tới nó.

#section-1{
        padding:1em;
    }
    .new-post{
        text-align:center;
        box-shadow:2px 3px 5px rgba(0,0,0,0.24);
        border-radius:8px;
        /*cho hiệu ứng :hover mượt hơn nè*/
        transition:0.4s;
    }
    .new-post:hover{
        background:rgb(177, 171, 171);
    }
    .new-post img{
        border-radius:8px 8px 0 0;
        width:100%;
        max-height:300px;
        object-fit:cover;
    }
    .new-post-content{
        padding:1em;
    }

Trông có vẻ ổn hơn:
alt text

Section 2

Đây là phần mà chúng ta sẽ áp dụng grid, ở đây phần container sẽ chính là section 2 với id là section-2 và các items bên trong là các class post. Sau khi chia ra thì các post sẽ dính lại với nhau, chúng ta sẽ dùng grid-gap để tách chúng ra cho đẹp hơn. Phần post thì chúng ta sẽ lấy lại những cái mà chúng ta đã style cho phần new-post luôn (lấy cả :hover và transition luôn)

#section-2{
        padding:1em;
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        grid-gap:1em;
    }
    .post{
        text-align:center;
        box-shadow:2px 3px 5px rgba(0,0,0,0.24);
        border-radius:8px;
        transition:0.4s;
    }
    .post:hover{
        background:rgb(177, 171, 171);
    }
    .post img{
        border-radius:8px 8px 0 0;
        width:100%;
        height:auto;
    }

Đây là kết quả:
alt text
9 ô dài quá cắt không hết :laughing:

Footer

Cuối cùng là phần footer, ở đây chúng ta chỉ đơn giản là chỉnh màu cho footer và làm cho các contact icon trông đẹp hơn thôi:

#footer-id{
        background:black;
        color:white;
        padding:1em;
        text-align:center;
    }
    .contact-box{
        background:#f0f0f0;
        padding:1em;
        margin-right:0.2em;
        color:black;
    }
    .contact-box:hover{
        background:darkgray;
        color:white;
    }
    #footer-id a{
        text-decoration:none;
        font-weight:bold;
        color:rgb(29, 101, 134);
    }
    #footer-id a:hover{
        text-decoration:underline;
    }

alt text

Xem lại quá trình nãy giờ để xem nó khác bọt như thế nào :laughing: :

  • Trang web lúc chưa có CSS vào:

  • Trang web đã có CSS vào:

HyHy 14-08-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
19 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
12 2
Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp ch...
Tấn Huy viết 1 năm trước
12 2
White
8 1
Ở phần trước mình đã nói về các property của phần parent trong CSS Flexbox (xem lại (Link)). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các pr...
Tấn Huy viết 1 năm trước
8 1
White
6 0
1. Website layouts Như chúng ta biết, bố cục của một website sẽ được chia ra thành nhiều phần, các phần chính đáng chú ý nhất là: Header: Tiêu đ...
Tấn Huy viết 1 năm trước
6 0
Bài viết liên quan
White
36 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hà Phạm viết gần 4 năm trước
36 8
White
19 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 3 năm trước
19 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
19 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!