Tạo layout website cùng CSS Flex-box
TIL
720
CSS3
49
White

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

Sau khi đã tìm hiểu về flex-box và các property của nó (xem lại phần 1, phần 2) thì tiếp theo chúng ta sẽ dùng nó để thực hành nhẹ một tí cho không quên bài :laughing: cũng như là xem thử dùng flex-box tạo một cái layout cho web thì dễ hơn bình thường nhiều không (có thể xem lại bài tạo layout website cơ bản của mình :v ở đây). Lần này chúng ta sẽ thực hành với một layout nhằng hơn phần layout cũ một tí.
alt text
Đây là một layout mình dùng paint chế ra, kiểu layout này giống như là một layout cho blog cá nhân :laughing: dùng flex-box xử nó thôi.

Bắt tay vô làm

Gõ HTML

Trước tiên, chúng ta sẽ tiến hành viết một cái sườn HTML cho cái web trước sau đó muốn trang điểm thế nào thì làm thế đó sau.

Branding

Branding - Nhãn hiệu (hay biển hiệu :v) của trang web là thứ cần làm đầu tiên. Ở đây vì đơn giản + làm biếng chúng ta sẽ dùng h1 để viết và lát trang trí tẹo là xong, ở đây mình sẽ dùng header (cũng như các phần dưới là aside, section,..) để theo chuẩn HTML5.

<header>
        <h1>Website's Logo</h1>
</header>

Branding của chúng ta:
alt text

Navigation Menu

Tiếp theo là phần navigation menu của chúng ta, phần này ngoài các mục như home,news...(vài thứ khác) thì còn ta thêm chung một thanh tìm kiếm ở góc bên kia nữa. Vì thế ta sẽ chia phần nav ra làm hai: một class menu cho các mục home, news,.. và một class search-zone cho thanh tìm kiếm.

<nav>
    <div class="menu">
        <a class="active" href="#link">Home</a>
        <a href="#link">News</a>
        <a href="#link">Something</a>
        <a href="#link">Something</a>
    </div>
    <div class="search-zone">
        <form>
            <input type="text" placeholder="Search...">
        </form>
    </div>
</nav>

Nó đây, thật ọp ẹp và xấu xí :v :
alt text

Content

Tiếp đên là phần nội dung trang web, ở đây mình sẽ dùng section để quy định phần nội dung. Vì mình chia nó ra làm hai phần đó là nội dung phụ và nội dung chính, vì thế nên chúng ta sẽ dùng aside để viết phần nội dung phụ và article để viết nội dung chính.

<section>
    <aside>
        <h1>About me</h1>
        <p>Lorem ipsum dolor sit amet</p>
        <p>consectetur adipiscing elit. Proin pulvinar vehicula ex, ac efficitur metus efficitur eu. Vestibulum tincidunt quam urna, quis venenatis risus hendrerit sit amet. Maecenas vulputate ultrices maximus</p>
        <div id="fakeimg1">
            Image
        </div>
        <h1>Contact</h1>
        <p>consectetur adipiscing elit. Proin pulvinar vehicula ex, ac efficitur metus efficitur eu. Vestibulum . Maecenas vulputate ultrices maximus</p>
        <div class="contact-box">
            <div class="box">Facebook</div>
            <div class="box">Instagram</div>
            <div class="box">Twitter</div>
            <div class="box">Github</div>
        </div>
    </aside>
    <article>
        <div class="post">
            <h1>Your post topic: bla bla bla</h1>
            <div id="fakeimg1">Image</div>
            <p>Sed massa neque, convallis vel mauris nec, ornare iaculis lorem. Praesent et sapien eu tellus rutrum scelerisque. Ut id purus venenatis, suscipit tellus vel, bibendum nunc. Phasellus vel mauris vel mi elementum tempor a et odio</p>
            <p>Sed massa neque, convallis vel mauris nec, ornare iaculis lorem. Praesent et sapien eu tellus rutrum scelerisque.</p>
        </div>
        <div class="post">
            <h1>Your post topic: bla bla bla</h1>
            <div id="fakeimg1">Image</div>
            <p>Sed massa neque, convallis vel mauris nec, ornare iaculis lorem. Praesent et sapien eu tellus rutrum scelerisque. Ut id purus venenatis, suscipit tellus vel, bibendum nunc. Phasellus vel mauris vel mi elementum tempor a et odio</p>
            <p>Sed massa neque, convallis vel mauris nec, ornare iaculis lorem. Praesent et sapien eu tellus rutrum scelerisque.</p>
        </div>
        <div class="post">
            <h1>Your post topic: bla bla bla</h1>
            <div id="fakeimg1">Image</div>
            <p>Sed massa neque, convallis vel mauris nec, ornare iaculis lorem. Praesent et sapien eu tellus rutrum scelerisque. Ut id purus venenatis, suscipit tellus vel, bibendum nunc. Phasellus vel mauris vel mi elementum tempor a et odio</p>
            <p>Sed massa neque, convallis vel mauris nec, ornare iaculis lorem. Praesent et sapien eu tellus rutrum scelerisque.</p>
        </div>
    </article>
</section>

Ở trên chúng ta sẽ thấy các phần box hay fakeimg1 là mình dùng để mô phỏng hình ảnh và các icon liên hệ (làm vậy cho nhanh :laughing:)
Phần nội dung, thực chất thì giờ cũng chưa biết đâu là phụ đâu là chính :v
alt text

Footer

Cuối cùng là phần footer, chúng ta cũng làm đơn giản:

<footer>
    <h3>Your name &copy; 2xxx</h3>
</footer>

kết quả:
alt text

Gõ CSS

Ở trên thì ta đã có được một cái khung cho trang web của chúng ta rồi, bây giờ là lúc ứng dụng flex-box và một số CSS khác để làm đẹp nó thôi.

Branding

Ở phần này, mình sẽ dùng CSS gradient (quảng cáo tiếp :laughing:, xem lại CSS gradient ở đây) để làm cho cái background "lạ" thêm tí so với trước là để background một màu và căn chỉnh, giãn nở thêm tí nữa cho cái "biển hiệu" nhìn lung linh hơn.

header{
    background:linear-gradient(120deg,gray ,lightgray,gray);
    text-align:center;
    padding:2em 1em;
}

Tada:
alt text

Navigation Menu

Tiếp đến là phần menu khó nhằng, vì nó chia ra làm 2 phần nên đây là lúc dùng flex-box :3. Phần nav sẽ là phần parent nên sẽ có display:flex.

nav{
    display:flex;
    background-color:#333;
}

Tiếp đến là 2 phần items bên trong, đầu tiên là phần menu, chúng ta sẽ cho nó chiếm 70% chiều rộng và trang trí lại phần link đẹp hơn.

.menu{
    flex:70%;
    padding:0.6em;
}
nav a{
    text-decoration:none;
    color:white;
    margin:1em;
}

Thêm nữa, chúng ta sẽ thêm 1 class active (để biết được là ta đang ở phần nào của trang web: home,news hay vân vân mây mây) và phần :hover (để lúc trỏ chuột vào các mục sẽ có hiệu ứng)

nav a:hover:not(.active){
    font-weight:bold;
    color:#ffa366;
}
.active{
    color:orange;
    font-weight:bold;
}

Về phần search-zone, chúng ta cho nó chiếm 30% còn lại và chỉnh sửa cho nó ổn hơn:

.search-zone{
    flex:30%;
    margin:0.5em;
}
.search-zone input[type="text"]{
    width:100%;
    padding:0.3em;
    border-radius:1em;
    border:1px solid gray;
    outline:none;
    background-color:#e0e0e0;
    transition:0.5s;
}

Vì bỏ đi outline của ô tìm kiếm, nên chúng ta sẽ thêm vào phần focus để khi click vào sẽ có sự khác nhau:

.search-zone input[type="text"]:focus{
    background-color:white;
}

Màu #e0e0e0 ở trên là xám nhẹ và khi click vào ô tìm kiếm sẽ chuyển sang màu trắng. Đây là navigation menu mới của chúng ta :3 (màu cam nhạt ở News là lúc chúng ta rê chuột vào)
alt text

Content

Chúng ta cũng sử dụng flex-box để chia phần nội dung ra làm hai, với sectionparentitems lần lượt là asidearticle.

section{
    display:flex;
    flex-wrap:wrap;
}

aside sẽ chiếm 30% và 70% còn lại là của article

aside{
    flex:30%;
    background-color:#e0e0e0;
    padding:1em;
}
article{
    flex:70%;
    background-color:#f8f8f8;
    padding:1em;
}

Ngoài ra chúng ta có các phần phụ boxfakeimg1 (hình ảnh giả :v)

#fakeimg1{
    height:12em;
    background-color:darkgray;
    border-radius:2px;
    width:100%;
}
.contact-box .box{
    width:100%;
    height:2em;
    margin-top:0.5em;
    border-radius:4px;
    background-color:darkgray;
}

Đây là phần nội dung của chúng ta, rõ ràng là giờ đã biết được đâu là chính đâu là phụ :v
alt text

Footer

Cuối cùng là phần footer đơn giản:

footer{
    background-color:#333;
    text-align:center;
    color:white;
    padding:0.6em;
}

alt text
Xem lại toàn bộ cái web mà chúng ta vừa thiết kế xong ở demo dưới đây:

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
7 0
Sau khi đã tìm hiể về Grid ở hai phần trước về các property thông dụng của grid ((Link), (Link)) thì chúng ta cũng đã thấy grid rất hữu dụng vì tha...
Tấn Huy viết 1 năm trước
7 0
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
White
2 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 7 tháng trước
2 0
White
22 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 3 năm trước
22 1
{{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á!