programming html

Căn chỉnh hình ảnh: đúng html

Tìm hiểu cách căn giữa hình ảnh bằng CSS

Căn giữa ảnh

Trang chủ Tin tức Liên hệ

Tìm kiếm Về chúng tôi

Thanh điều hướng với tab ở bên phải màn hình

Một vài nội dung..

Các bạn lưu ý nhé, vì mình sẽ chọn 2 tab "Tìm kiếm" và "Về ta" sang bên phải mà hình, nên mình sẽ chọn vào 1 thẻ

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

6 riêng nhé, và tất cả đều nằm trong thanh

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

Sau khi viết xong HTML, chúng ta sẽ thiết kế CSS để chỉnh sửa menu theo ý mình

CSS

Tab "Trang chủ" mình sẽ hiển thị mặc định khi trang web bắt đầu tải nhé, vì vậy mình sẽ thiết kế CSS cho tab có màu nền khác đi để các bạn dễ hình dung nhé

Chúng ta sử dụng thuộc tính

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

8 cho lớp

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

9 để chuyển 2 tab "Tìm kiếm" và " Về với chúng tôi" sang bên phải màn hình nhé

CSS CHẠY

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

Kết quả

Trang chủ Tin tức Liên hệ

Tìm kiếm Về chúng tôi

Thanh điều hướng với tab menu ở giữa màn hình

Một vài nội dung..

Mình chia thanh điều hướng thành 3 nhóm. nhóm bên phải, nhóm bên trái và nhóm ở giữa nhé. Ở giữa mình sẽ đặt tab "Trang chủ" và để hiển thị mặc định khi mở trang web nhé

CSS

Tiếp theo chúng ta sẽ thiết kế CSS nhé

CSS CHẠY

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate[-50%, -50%];
}

.topnav-right {
  float: right;
}

/* Responsive thanh navigation [cho mobile] */
@media screen and [max-width: 600px] {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }
  
  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}

Cũng tương tự như ví dụ trên, phần menu bên phải mình sẽ sử dụng thuộc tính

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

8 nhé

Đối với phần menu ở giữa, mình sẽ sử dụng thuộc tính



  
  
    Trang chủ
  
  
  
  Tin tức
  Liên hệ
  
  
  
    Tìm kiếm
    Về chúng tôi
  
  



  Thanh điều hướng với tab menu ở giữa màn hình
  Một vài nội dung..

1 để tùy chỉnh tab "Trang chủ" không ảnh hưởng đến các phần khác trong trang web của mình. Đầu tiên mình sẽ thiết lập thuộc tính



  
  
    Trang chủ
  
  
  
  Tin tức
  Liên hệ
  
  
  
    Tìm kiếm
    Về chúng tôi
  
  



  Thanh điều hướng với tab menu ở giữa màn hình
  Một vài nội dung..

1 cho thanh điều hướng là

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

1 [

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

2. set up an element using property position which does not doing the image to the display of the start]. Tiếp theo, đặt thuộc tính

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

3 cho css của thẻ

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

4 nằm trong lớp

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

5 để thiết lập vị trí ở giữa cho tab "Trang chủ".

Sau khi thiết lập, chúng ta sẽ thêm một vài thuộc tính position khác để căn chỉnh lại vị trí đó nhé. Thêm các thuộc tính

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}

9 và giá trị của nó để căn chỉnh vị trí cho tab "Trang chủ" nhé

Trong ví dụ này, mình có làm thêm



  
  
    Trang chủ
  
  
  
  Tin tức
  Liên hệ
  
  
  
    Tìm kiếm
    Về chúng tôi
  
  



  Thanh điều hướng với tab menu ở giữa màn hình
  Một vài nội dung..

0. Mình thiết lập màn hình ở 2 độ phân giải là >=600px và =600px, thanh navigation sẽ hiển thị theo khối ngang. Còn khi

Thanh điều hướng với tab ở bên phải màn hình

Thanh điều hướng với tab menu ở giữa màn hình

Thanh điều hướng với tab menu ở giữa màn hình

Thanh điều hướng với tab menu ở giữa màn hình

Thanh điều hướng với tab menu ở giữa màn hình

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề