Chữ nằm ngang trong css
HTML viết:
Hiển thị trình duyệt khi chưa có CSS:Canh trái Canh giữa Canh phải CSS viết:p.alignLeft {
text-align: left;
}
p.alignCenter {
text-align: center;
}
p.alignRight {
text-align: right;
}Hiển thị trình duyệt khi có CSS:Canh trái Canh giữa Canh phải Menu ngang là một phần không thể thiếu trong các website tin tức, bán hàng. Vậy cách làm nó như thế nào trong nội dung bài này tôi sẽ hướng dẫn bạn từng bước. Ý tưởngTrước hết bạn cần xác định cấu trúc html của menu nang một cấp. Các phần tử menu có tính chất giống nhau chính vì vậy bạn nên sử dụng cấu trúc
Trước hết bây giờ chúng ta cần thực hiện reset lại css. Đây là bước hủy bỏ những thiết lập mặt định lên các đối tượng html để dễ dàng định dạng hiển thị theo ý mình. *{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}Chúng ta sẽ tạo phân thân website căn giữa và có độ rộng #wrapper{
width: 960px;
margin: 0px auto;
}Để thiết lập các phần tử của menu nằm ngang chúng ta thiết lập d *{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}0 cho *{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}1.ul#main-menu{
display: flex;
background: orange;
}Tiếp tục định dạng cho thẻ a của từng menu ul#main-menu a{
padding: 5px 10px;
display: block;
color: #ffffff;
}Sau khi hoàn thành bước trên ta có được kết quả như bên dưới Bây giờ chúng ta sẽ làm thiết lập hiệu ứng khi hover vào menu. ul#main-menu li:hover a{
color: #4f4242;
}Bên dưới là hết quả sau khi hover Bên dưới là nội dung file *{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}2*{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
#wrapper{
width: 960px;
margin: 0px auto;
}
ul#main-menu{
display: flex;
background: orange;
}
ul#main-menu a{
padding: 5px 10px;
display: block;
color: #ffffff;
}
ul#main-menu li:hover a{
color: #4f4242;
}
#content {
padding: 20px 0px;
}
Kết luận Vậy chúng ta đã xây dựng được menu ngang 1 cấp bằng html css vô cùng nhanh chóng. Bây giờ bạn hoàn toàn có thể dựa vào ý tưởng này để thay đổi màu sắc, background, font chữ để có được menu đúng theo nhu cầu của mình. Trong một bài viết khác tôi sẽ tiếp tục hướng dẫn bạn xây dựng menu ngang đa cấp. Tạo menu bằng HTML và CSS là trong những việc mà front-end dev nào cũng từng làm qua. Tuy nhiên đối với những bạn mới bắt đầu tìm hiểu thì có thể gặp đôi chút khó khăn. Vậy hãy cùng Miko Tech tìm hiểu 3 bước đơn giản để tạo menu trong HTML & CSS nhé. Bài viết này sẽ giúp bạn tạo thanh menu trong HTML & CSS đơn giản với 3 bước: Viết HTML, viết reset CSS và viết CSS cho từng dạng menu ngang và dọc. Bên cạnh đó, Miko Tech cũng sẽ hướng dẫn bạn tạo menu ngang và dọc có dropdown (đổ xuống). Xem Nhanh Tại sao cần tạo menu cho website?Đối với người truy cập các trang web thì thanh menu (thanh điều hướng) rất quan trọng. Menu cho phép người truy cập nhanh chóng và dễ dàng tìm thấy thông tin họ đang tìm kiếm.  Menu trở thành một phần thiết yếu cho trải nghiệm người dùng và chiến lược website của cá nhân, doanh nghiệp. Lợi ích của menu mang lại còn nhiều hơn thế. Hệ thống điều hướng tốt sẽ giúp website có cơ hội được người truy cập duyệt website nhiều hơn và giảm tỷ lệ thoát trang. Menu đa cấp là gì?Menu đa cấp hay menu xổ xuống (dropdown) là dạng menu cung cấp danh sách các tùy chọn, xuất hiện ở đầu trang web. Khi nhấp hoặc rê chuột vào mục hiển thị, các mục khác trong danh sách sẽ thả xuống để người dùng tùy chọn. Đối với các website có số lượng chỉ mục nhiều, khó sắp xếp trên giao diện thì menu đa cấp chính là sự lựa chọn thông minh. Lợi ích của menu đa cấpMenu đa cấp giúp người dùng có thể linh hoạt lựa chọn và thấy tất cả các mục trên website. Bên cạnh đó, người dùng còn dễ dàng điều hướng và tìm kiếm thông tin mình cần. Đồng thời, tạo menu đa cấp trong HTML còn giúp nhà thiết kế website truyền tải nội dung hiệu quả đến người dùng. Đặc biệt là trong trường hợp có quá nhiều chỉ mục cần đặt lên giao diện website. Chính vì thế, menu đa cấp là giải pháp hữu ích để nâng cao tính thẩm mỹ cho website và tránh tình trạng khiến cho người dùng bị rối mắt. Nhà thiết kế website sẽ linh hoạt hơn trong thiết kế của mình. Bước 1 – Viết HTML (cách tạo menu trong HTML)Để tạo được menu ngang, dọc bằng HTML và CSS, trước tiên chúng ta cần có phần code HTML. Với menu thì điều cơ bản cần có chính là việc tạo danh sách các mục cần có trong menu, chúng ta sẽ sử dụng thẻ Trong đó, ta sẽ sử dụng thẻ Bước 2: Viết CSS để có được một menu hoàn chỉnhĐầu tiên, để dễ dàng cho việc chỉnh viết CSS về sau, hãy thực hiện việc Reset CSS bằng đoạn code sau: Tiếp theo, chúng ta sẽ viết CSS cho phần “body” với phần code sau: Đến đây thì menu của bạn sẽ trông như thế này: Bước 3 – Viết CSS cho từng dạng Menu ngang/dọcMenu ngangCùng tìm hiểu cách tạo menu ngang trong HTML & CSS ngay dưới đây nhé! Vì thẻ Đoạn code dưới đây sẽ cho menu căn giữa bằng thuộc tính
Khi đến bước này, menu của chúng ta sẽ trông như thế này: Nhưng cái chúng ta cần là menu ngang, vậy tiếp theo cần phải làm gì? Để các mục con xếp thành hàng ngang thì bạn có 2 sự lựa chọn:
Cách 1: Kiểu inline blockSau đây là đoạn code CSS cho kiểu Với thuộc tính color thì mã màu #f1f1f1 sẽ cho ra màu trắng, tiếp theo sẽ thêm thuộc tính width (chiều rộng) và height (chiều cao). Lúc này các mục vẫn chưa được căn giữa, vì vậy cần bổ sung thuộc tính line-height với giá trị bằng height thì kết quả cho ra sẽ như hình dưới đây. Cách 2: Kiểu floatVới kiểu float thì sau đây sẽ là đoạn code CSS: Nếu bạn dùng kiểu float thì cần phải thêm một vài thuộc tính cho #menu ul như sau: Sau khi xếp các mục thành hàng ngang bằng 2 cách bên trên, thì cuối cùng ta sẽ trang trí menu bằng cách thêm style cho thẻ Thuộc tính Kết quả tạm có sẽ như sau: Tiếp theo, nếu bạn muốn có hiệu ứng xuất hiện khi rê chuột đến các mục con trong menu thì sẽ làm như sau: Trên đây, bộ chọn “ Menu ngang có dropdown (đổ xuống)/menu đa cấpNếu bạn muốn trong mục Sản phẩm sẽ có các menu con thì sẽ phải làm như thế nào? Sau đây sẽ là phần code tạo dropdown menu trong HTML để bạn kham khảo. Đầu tiên, bạn cần viết HTML, việc này sẽ tương tự bước 1 nhưng có chút khác bởi vì bạn cần bổ sung thêm thẻ Tiếp theo, bạn sẽ thực hiện tương tự như bước 2 bên trên và viết tiếp CSS cho menu như đoạn code bên dưới đây: Đến đây bạn sẽ thấy menu con của mục Sản phẩm hiển thị như thế này: Chính vì vậy, tiếp theo ta cần ẩn đi sub-menu và sẽ sử dụng vùng chọn thứ cấp liền nhau để sau này bạn sử dụng nhiều cái sub-menu bên trong thì bạn sẽ dễ dàng làm việc hơn. Tuy nhiên, lúc này phần menu con vẫn còn đang bị đẩy lên. Bạn cần tùy biến lại cái sub-menu. Việc tùy biến vị trí một phần tử mà không ảnh hưởng đến phần tử khác thì sẽ sử dụng thuộc tính position. Cái bạn cần ở đây chính là cái menu con phải nằm gần phần tử mẹ, thì bạn phải thiết lập Và tiếp theo là cho cái Tiếp theo, bạn cần cho cái .sub-menu thành kiểu absolute để nó luôn nằm trong phạm vi phần tử mẹ (#menu li). Đoạn code sẽ có dạng như sau: Kết quả cho ra sẽ là menu con không còn bị đẩy lên trên nữa. Khi rê chuột vào menu mẹ, để hiển thị .sub-menu thì bạn cần kết hợp class dạng “:hover” và gán display (kiểu hiển thị) là block. Đây chính là kết quả cuối cùng của menu ngang có dropdown! Menu dọcSau khi bạn thực hiện xong bước 1 và bước 2, ta sẽ đến phần cách tạo menu dọc trong HTML. Đầu tiên, chúng ta sẽ thêm CSS vào Đến đây, kết quả sẽ hiển thị như sau: Tiếp theo ta sẽ viết CSS cho các thẻ Kết quả tạm thu được như sau: Cuối cùng là viết CSS cho thẻ a bên trong menu, chuyển nó qua thành block và thêm các style cần thiết, đồng thời tạo thêm hiệu ứng background khác khi rê chuột vào mục menu. Cuối cùng, chúng ta sẽ tiến hành viết CSS cho thẻ Đây là kết quả thu được sau khi hoàn thành việc tạo menu dọc: Menu dọc có dropdown (đổ xuống)Ví dụ rằng bây giờ bạn muốn ở mục Sản phẩm sẽ có thêm vài menu con nữa thì cần phải làm gì? Dưới đây sẽ là phần hướng dẫn để tạo menu xổ xuống trong HTML. Đầu tiên sẽ tương tự như bước 1 nhưng sẽ có một chút khác bởi vì bạn cần phải thêm một số thẻ để tạo sub menu (menu con). Kế tiếp, ta sẽ đến bước tiếp theo là viết CSS cho menu: Kết quả thu được sẽ như hình ảnh sau đây: Lúc này, các mục con trong mục Sản phẩm đang bị lỗi hiển thị. Vì thế, chúng ta cần bổ sung phần code CSS bằng cách đưa Kế tiếp, ta sẽ chuyển menu cấp 2 (tức #menu .sub-menu) về dạng absolute, chỉnh vị trí thụt sang bên trái với giá trị 250px bằng với chiều rộng của menu và đồng thời đưa về độ cao bằng phần tử mẹ. Mặc dù, đến đây đã có menu dropdown rồi, nhưng bạn muốn là khi rê chuột đến thì menu con mới hiện ra thì sẽ thực hiện với đoạn code như sau: Trên đây, Miko Tech đã cùng bạn tìm hiểu về 3 bước đơn giản để tạo menu trong HTML & CSS kiểu ngang, dọc. Trong đó, bài viết đã bao gồm bước đầu tiên là viết HTML, bước 2 là viết reset CSS và bước 3 là viết CSS theo từng loại menu ngang/ dọc. Hy vọng rằng bài viết này đã giúp cho các bạn mới tiếp xúc với HTML & CSS sẽ dễ dàng tạo menu HTML kiểu ngang và dọc cho mình nhé! |
