Tôi chỉ cho bạn xem chiếc thuyền buồm này, bởi vì những gì tôi sẽ dạy bạn trong khóa học này sẽ thúc đẩy sự phát triển giao diện người dùng của bạn theo đúng nghĩa đen
Có thể bạn đã nghe nói rằng với TailwindCss, bạn có thể phát triển các trang web và giao diện đẹp và độc đáo rất nhanh chóng
Nhưng lợi thế quan trọng nhất đối với tôi là bạn không phải tạo vô số biểu định kiểu để điều chỉnh trang web của mình cho các kích thước màn hình khác nhau
Ví dụ: nếu bạn chỉ muốn áp dụng một lớp cho kích thước màn hình lớn trở lên, bạn chỉ cần thêm “lg. ” đến lớp mà bạn đang sử dụng
Tên tôi là Martin và tôi đã sử dụng CSS và các Framework như Bootstrap ở cấp độ chuyên nghiệp trong một thời gian rất dài
Tôi phải nói với bạn rằng - đối với tôi - TailwindCss thực sự là một cuộc cách mạng nhỏ trong lĩnh vực phát triển web
Trên thực tế, với TailwindCss, bạn đang kết hợp các ưu điểm của CSS bình thường với các ưu điểm của các framework như Bootstrap
Trong khóa học này, tôi sẽ chỉ cho bạn Thông tin chi tiết về cách cài đặt, định cấu hình và trong nhiều ví dụ về cách áp dụng TailwindCss
Chúng tôi sẽ thực hiện Bố cục đáp ứng, Ảnh động và hơn thế nữa
Hơn nữa, tôi sẽ giới thiệu ngắn gọn về núi cao. js, cũng là một cuộc cách mạng, khi dễ dàng kích hoạt hành vi như hoạt ảnh trong thiết kế web của bạn
Tôi sẽ cung cấp cho bạn mã nguồn đầy đủ cho mọi bước chúng ta thực hiện trong khóa học này, cũng như một số bảng gian lận hữu ích - sẽ giúp bạn ghi nhớ sau này những gì bạn đã học
Khóa học này không dài lắm, tôi thực sự muốn khuyên bạn nên đầu tư một ngày cuối tuần hoặc vài buổi tối để tham gia khóa học này và học được điều gì đó, điều đó rất thú vị và điều gì đó chắc chắn sẽ đóng vai trò rất quan trọng trong việc phát triển web ở
Khi bạn xem một trang web, bạn có thể hoàn toàn kinh ngạc về bố cục hoặc cách khác. Nếu đó là trước bạn có thể nghĩ. Làm thế nào mà họ làm điều này? . tôi có thể làm tốt hơn thế này
Dù thế nào đi chăng nữa, bạn có thể khởi chạy trình chỉnh sửa mã của mình với ý định tạo lại bố cục của trang web. Trừ khi bạn có kinh nghiệm trong việc thiết kế một trang web, bạn có thể gặp rắc rối và dành vô số thời gian trên các công cụ tìm kiếm để tìm kiếm giải pháp.
Số giờ dành cho công cụ tìm kiếm có thể được tiết kiệm nếu bạn có thể tạo một mô hình tinh thần về bố cục trang web. Khi bạn đã quen với mô hình này, bạn sẽ có được mức độ tự tin cao khi bắt đầu tạo bất kỳ bố cục nào mà bạn tìm thấy ở đó. Tôi gọi mô hình tinh thần. Suy nghĩ trong hộp
Bây giờ, bạn có thể hỏi. Tại sao phải suy nghĩ trong hộp?
Hãy nhìn vào hình ảnh dưới đây. Tôi đã đánh dấu tất cả các phần tử của trang Web trên trang chủ của Google và mọi thứ trông giống như một cái hộp
Tôi cảm thấy một câu hỏi khác xuất hiện trong đầu của bạn. Tại sao chúng là những chiếc hộp mà không phải là một số hình dạng khác?
Hãy cùng tìm hiểu
Khi tôi đánh dấu trang chủ của Google, bạn sẽ nhận thấy rằng tôi đã sử dụng các đường viền xuyên suốt và các đường viền đều có màu xanh lục. Màu sắc là từ CSS mà tôi đã thêm vào trang Web thông qua các công cụ dành cho nhà phát triển và lần lượt tất cả các phần tử xuất hiện dưới dạng "hộp"
Lý do chúng xuất hiện dưới dạng hộp là vì tất cả các thành phần HTML có thể được coi là hộp trong CSS. Gì? . Mô hình hộp CSS
Mô hình hộp CSS
Mô hình hộp CSS là hộp bao quanh các thành phần trang Web được tạo thành từ các thuộc tính sau
- lề
- đệm
- biên giới
- Nội dung
Lề
Đây là khu vực bên ngoài hộp
đệm
Khu vực xung quanh nội dung
Biên giới
Đường viền bao quanh phần đệm và nội dung
Nội dung
nội dung của hộp
Để biết thêm thông tin về mô hình hộp CSS, tôi đã viết về nó
Các thuộc tính này có thể được thao tác để di chuyển một phần tử trang Web mong muốn đến một vị trí khác trên trang Web vì tôi tin rằng các phần tử trang Web chỉ là các hộp
Bên dưới, tôi đã di chuyển "Google" bên dưới hộp tìm kiếm bằng cách sử dụng thuộc tính margin
và như được đánh dấu, đó chỉ là một hộp
Chúng ta di chuyển logo sang bên trái thì sao?
Bạn có thể di chuyển bất kỳ phần tử trang web hộp nào xung quanh vì đó là một hộp. Nhưng chờ đã, tôi có chắc về điều đó không? . Làm thế nào mà?
Chà, nếu bạn định di chuyển một thành phần trang Web, thì nó phải là một thành phần cấp khối. Sau đó, nếu đó là một yếu tố cấp độ nội tuyến như span
thì sao?
Bạn có thể sử dụng các thuộc tính khác sang một bên margin
để di chuyển các phần tử của trang Web. Chúng bao gồm
transform
position
Khi bạn sử dụng transform
, bạn có thể thực hiện các thao tác sau trong số những thao tác khác
- Xoay hộp
- Di chuyển hộp dọc theo trục X và Y
- Quy mô hộp
- Xiên cái hộp
Hình ảnh bên dưới là một trang hồ sơ trên Unsplash trong đó tôi đã áp dụng thuộc tính transform
với giá trị là margin
0 và viền đen
Thuộc tính position
có thể được sử dụng để di chuyển một "hộp" đến hầu hết mọi vị trí trên trang Web
Trong hình bên dưới, tất cả các hộp được di chuyển với thuộc tính position
và thuộc tính offset i. e. margin
3, margin
4, margin
5, margin
6
Cách suy nghĩ về bố cục
Lần tới khi bạn nhìn thấy một bố cục trang Web, hãy nghĩ về nó như một chiếc hộp lớn khổng lồ. e. phần tử gốc margin
7 với rất nhiều hộp được sắp xếp trong đó [bắt đầu bằng thẻ margin
8]. Bạn có thể sắp xếp lại hộp theo ý muốn
Hãy ghi nhớ điều này vào lần tới khi bạn bắt đầu một dự án Web. Nó chỉ là một chiếc hộp khổng lồ và tôi có thể sắp xếp các hộp theo cách mình muốn và tôi có thể điều khiển hành vi của các hộp bằng CSS hoặc JavaScript
lưu ý bên lề
Nếu bạn muốn áp dụng đường viền xung quanh toàn bộ thành phần trang Web như tôi đã làm với Unsplash và Google, hãy thực hiện các bước sau
- Mở trang Web
- Nhấp chuột phải vào bất kỳ phần tử nào trên trang và chọn Kiểm tra phần tử, thao tác này sẽ mở Công cụ dành cho nhà phát triển
- Trong tab Quy tắc, nhấp vào + để thêm CSS mới vào trang như trong hình bên dưới
Nếu bạn đang sử dụng Chrome, phần này sẽ nằm trong tab Kiểu
- Sau đó, bạn có thể áp dụng kiểu cho tất cả các phần tử bằng bộ chọn chung *. Thí dụ
/**
* This will apply a black border around every
* element on the Web page.
*/
* {
border: 2px solid #1a1a1a;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sự kết luận
Các phần tử HTML là các hộp trong CSS và bạn có thể di chuyển chúng xung quanh. Khi bạn sắp xếp chúng để tạo thành một mẫu, nó được gọi là bố cục. Khi bạn áp dụng màu sắc và hoạt ảnh cho bố cục, bây giờ là thiết kế web