Đôi khi, nó cũng có nút kêu gọi hành động để người dùng truy cập trang web nhấp vào nút kêu gọi hành động trên biểu ngữ anh hùng hiển thị động cơ rõ ràng của trang web hoặc doanh nghiệp

Nút kêu gọi hành động này có thể là nút dùng thử miễn phí, nút đăng ký, v.v.  

Tạo biểu ngữ hình ảnh anh hùng

Bước 1 - Tạo cấu trúc HTML

Chúng tôi sẽ bắt đầu bằng cách tạo cấu trúc HTML cho trang web của chúng tôi.  

Chúng tôi cũng sẽ liên kết biểu định kiểu CSS với trang HTML

Bây giờ, chúng tôi thêm một số cấu trúc HTML khác. Chúng tôi sẽ thêm một số thành phần HTML để tạo hình ảnh anh hùng của mình và sau đó chúng tôi cũng sẽ thêm các thành phần để tạo lớp phủ văn bản cho biểu ngữ anh hùng này

Trong bài viết này, bạn sẽ học cách thiết kế một tiêu đề đơn giản trong CSS cho trang web của mình bằng cách sử dụng phương pháp truyền thống cũng như phương pháp flexbox

HTML

    
Company Name
    
Company Mission Statement goes here
    Call To Action

Đoạn mã HTML ở trên có một bộ chứa section với tên lớp là header và nó có ba phần tử con lần lượt là h1, p và a

khá thẳng về phía trước

CSS

@import url[//fonts.googleapis.com/css?family=Lato:400,300,100,700,900];

h1,
p,
a{
  margin: 0;
  padding: 0;
  font-family: 'Lato';
}

h1 {
  font-size: 2.8em;
  padding: 10px 0;
  font-weight: 800;
}

p {
  font-size: 1.1em;
  font-weight: 100;
  letter-spacing: 5px;
}

.header {
  width: 100%;
  padding:60px 0;
  text-align: center;
  background: #33cccc;
  color: white;
}


.btn-bgstroke {
  font-size: 20px;
  display: inline-block;
  border: 1px solid white;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 300;
  margin-top: 30px; 
}

.btn-bgstroke:hover {
  background-color: white;
  color: #33cccc;
}

Như bạn có thể thấy CSS khá đơn giản

Tôi đã sử dụng căn chỉnh văn bản. quy tắc trung tâm để. lớp tiêu đề để làm cho các phần tử bên trong căn giữa theo chiều ngang

Để căn giữa các phần tử theo chiều dọc, tôi đã thêm phần đệm trên và dưới cho. lớp tiêu đề là tốt

Điều này tốt hơn là đưa ra một chiều cao cố định để vùng chứa bên ngoài có thể phát triển theo chiều dọc khi nội dung của các phần tử bên trong tăng lên

Tìm hiểu cách tạo Hình ảnh anh hùng bằng CSS

Hình ảnh chính là hình ảnh lớn có văn bản, thường được đặt ở đầu trang web

Tự mình thử »

Thí dụ

Tôi là John Doe

Và tôi là một nhiếp ảnh gia

Thí dụ

body, html {
    chiều cao. 100%;
}

/* Hình ảnh anh hùng */
. hero-image {
  /* Sử dụng "linear-gradient" để thêm hiệu ứng nền tối cho hình ảnh [nhiếp ảnh gia. jpg]. Điều này sẽ làm cho văn bản dễ đọc hơn */
  background-image. linear-gradient[rgba[0, 0, 0, 0. 5], rgba[0, 0, 0, 0. 5]], url["nhiếp ảnh gia. jpg"];

  /* Đặt chiều cao cụ thể */
  chiều cao. 50%;

  /* Định vị và căn giữa hình ảnh để chia tỷ lệ đẹp mắt trên tất cả các màn hình */
  background-position. trung tâm;
  lặp lại nền. không lặp lại;
  kích thước nền. bìa;
  vị trí. họ hàng;
}

/* Đặt văn bản vào giữa hình ảnh */
. văn bản anh hùng {
  căn chỉnh văn bản. chính giữa;
  vị trí. tuyệt đối;
  top. 50%;
  còn lại. 50%;
  chuyển đổi. translate[-50%, -50%];
  color. trắng;
}

Biểu ngữ trong HTML là gì?

Làm cách nào để triển khai biểu ngữ trong HTML?