Hướng dẫn tạo layout giao diện ba cột cho website
Bài viết này mình sẽ bắt đầu hướng dẫn các bạn layout một giao diện hoàn chỉnh. Ở bài này mình sẽ hướng dẫn layout một giao diện ba cột đơn giản bằng HTML và CSS.
Dưới đây hình ảnh giao diện ba cột sau khi chúng ta tiến hành xong việc layout...
Hướng dẫn tạo menu dọc đơn giản cho website
Trong thiết kế web có hai dạng menu cơ bản là menu ngang và menu dọc. Ở bài trước mình đã hướng dẫn các bạn Tạo menu ngang đơn giản bằng CSS và HTML, tiếp bài viết hôm nay mình sẽ hướng dẫn các bạn xây dựng và hoàn thiện dạng menu thứ hai là menu dọc...
Hướng dẫn tạo menu ngang đơn giản cho website
Bài viết này sẽ hướng dẫn các bạn tạo một menu ngang đơn giản bằng CSS và HTML. Nếu như bạn nào đã đọc các bài viết trước thì sẽ dễ hiểu và sẽ dễ dàng hơn.
Đầu tiên chúng ta tạo file menu.html và thiết kế HTML để có được một menu ngang như sau...
Sự khác nhau giữa ID và Class trong CSS
Trong CSS có hai trường phái (Nói vậy nó Sang) là Id và Class. Tuy chức năng của hai bạn này như nhau, nhưng giữa chúng có sự khác biệt rất rõ nét. Và nếu như chúng ta biết sử dụng chúng một cách hợp lý thì layout sẽ đạt đến trình độ cao và chuyên nghiệp...
Tổng hợp một số lệnh thường gặp trong CSS
Bài viết này sẽ tổng hợp đến các bạn một số lệnh căn bản và thường hay gặp nhất trong CSS và để layout hoàn chỉnh một trang web thì không thể thiếu những lệnh này.
1. Lệnh margin:
Lệnh margin nói một cách để các bạn dễ hiểu và hình dung là nó giúp...
Khái quát cơ bản và nâng cao về thẻ DIV
Thẻ div là một trong những thẻ khá là đặc biệt trong html, ngày càng được sử dụng nhiều hơn và được nhiều người đánh giá rất cao về mặt công dụng trình bày. Các lão làng trong thiết kế thường dùng các thẻ div rất nhiều thay vì các thẻ table. Thẻ div thật...
Tìm hiểu thẻ table trong HTML
Bài viết này chúng ta sẽ tìm hiểu qua thẻ Table trong HTML. Thẻ table trong html cũng giống như excel trong microsoft office vậy nó được dùng để trình bày các bảng biểu, các bài viết, nội dung… có nhiều dòng và nhiều cột trong một website.
Thẻ table được ký hiệu...
Hướng dẫn sử dụng Javascript thuần tuý để tạo slider
Đa số chúng ta đều lấy các slider có sẵn trên mạng được viết bằng JQuery và tìm cách gắn vào website của mình đúng không cả nhà? Đúng là các chuyên gia viết rất đẹp nhưng không lẽ mình cứ lệ thuộc vào cái có sẵn mãi. Tại sao không thử tự tay...
Cách làm Popup Social cho trang web
Khi các bạn vào một số website tin tức, blog nổi tiếng bạn sẽ thường thấy website có những nút social để người dùng có thể like hoặc share website của bạn lên mạng xã hội. Ở bài viết này mình sẽ hướng dẫn bạn tạo 1 Popup Social chứa nút like và share của...
Hướng dẫn sử dụng Jquey Validation Engine để bắt lỗi nhập dữ liệu
Việc bắt lỗi nhập dữ liệu là 1 bài toán không thể thiếu khi xây dựng website. Hôm nay mình sẽ hướng dẫn bạn sử dụng thư viện Jquey Validation Engine để giải quyết bài toán này. Thư viện này bắt lỗi khá đầy đủ các dạng lỗi như...
Hướng dẫn cách thêm jQuery TwentyTwenty so sánh 2 hình ảnh cực đẹp và mượt cho website
TwentyTwenty là 1 plugin được viết bằng jquery dùng để so sánh sự khác biệt giữa 2 hình ảnh. Nếu bạn hay đọc báo từ 2 trang zing.vn và 24h.com.vn sẽ thấy họ thường dùng plugin này để so sánh sự khác biệt giữa...
Khái niệm về Lorem Ipsum
Nếu bạn là người quen với việc thiết kế web, chắc chắn không dưới một lần bạn đã từng thấy những giao diện được thiết kế và có các dòng chữ không phải là ngôn ngữ quen thuộc nào trên thế giới. Đó chính là những dòng chữ quen thuộc của giới thiết kế layout “Lorem Ipsum...
Tìm hiểu cú pháp trong CSS
Dưới đây là một ví dụ rất đơn giản của CSS, nó được viết để định dạng thẻ h3 của tài liệu sẽ có màu xanh dương
h3 {color: blue;}
Do vậy nếu bạn có code HTML như sau
<h3>Đoạn văn bản này sẽ có màu xanh trong trình duyệt</h3>
Về cơ bản cú pháp của CSS bao gồm 2 phần...
Tìm hiểu độ lớn thực sự của Box trong CSS
Khi thiết kế giao diện nhiều cột sử dụng CSS thì độ lớn của các box rất quan trọng và chúng chịu ảnh hưởng rất lớn đến nhau. Nếu một box này bị phình to ra hơn kích thước bạn muốn, nó có thể đẩy box bên cạnh di chuyển sang hướng khác và hậu quả là cả...
Tìm hiểu kỹ thuật Clear và Float
Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng CSS với hai tính năng cùng tên là Clear và Float. Float dùng để tách một thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho những thành phần ở sau di chuyển lên và phủ...
Tìm hiểu Position Property trong CSS
Khi đã sử dụng CSS để thiết kế giao diện thì Position Property là một trong những phần quan trọng nhất mà bạn cần hiểu rõ. Position Property chi phối mối tương quan giữa các thành phần của trang web. Có tất cả 4 giá trị cho Position property là: Static...
Hướng dẫn cách áp dụng hướng đối tượng dựa vào cấp bậc XHTML
Trong bài trước bạn đã biết về cấp bậc của XHTML, trong bài này mình sẽ hướng dẫn bạn cách hướng đối tượng cụ thể nằm sâu hơn trong cấp bậc của HTML. Có 2 cách bạn có thể hướng đối tượng cụ thể là Contextual Selector và Child Selector...
Tìm hiểu khái niệm thứ bậc trong XHTML
Thứ bậc trong XHTML là một khái niệm rất quan trọng mà bạn cần nắm rõ để sử dụng CSS sau này. Thứ bậc của XHTML giống như phả hệ của một gia đình vậy. Ở trên cùng là cụ tổ, xuống dưới là cụ, ông, cha, chú, anh chị em …
Ở hình ví dụ trên bạn sẽ thấy rõ...
Tìm hiểu khái niệm Contextual Position
Contextual Positioning là một khái niệm hết sức quan trọng mà bạn cần nắm vững nếu bạn muốn sử dụng CSS để thiết kế giao diện thay cho dùng bảng HTML. Nói nôm na thì Contextual Positioning có nghĩa là khi bạn định vị một thành phần bất kỳ sử dụng 4 giá trị...
Tìm hiểu và cách sử dụng Pseudo Class
Pseudo (phát âm là: sju:dou) tiếng Việt có nghĩa là “giả, không thật”, sở dĩ nó được đặt tên là Pseudo Class hay gọi là “Class giả” là vì nó không được gắn liền với những thẻ XHTML như những class thông thường bạn đã biết. Pseudo Class sẽ tạo ra thay đổi...