Tạo các dòng tìm kiếm thú vị trên các trang web có thẻ HR
Nếu bạn cần thêm các đường ngang, kiểu phân cách vào trang web của mình, bạn có một vài tùy chọn. Bạn có thể thêm các tệp hình ảnh thực tế của những dòng đó vào trang của bạn, nhưng điều đó sẽ yêu cầu trình duyệt của bạn truy xuất và tải các tệp đó, có thể có tác động tiêu cực đến hiệu suất trang web.
Bạn có thể sử dụng thuộc tính đường viền CSS để thêm các đường viền hoạt động như các dòng ở trên cùng hoặc ở cuối phần tử, tạo hiệu quả đường phân cách của bạn.
Cuối cùng, bạn có thể sử dụng phần tử HTML cho quy tắc ngang -
Phần tử quy tắc ngang
Nếu bạn đã từng đặt một phần tử trên một trang web, bạn có thể phát hiện ra rằng cách mặc định mà các dòng này được hiển thị không lý tưởng. Điều này có nghĩa là bạn cần phải chuyển sang CSS để điều chỉnh giao diện trực quan của các yếu tố này để phù hợp với cách bạn muốn trang web của mình trông như thế nào.
Thẻ nhân sự cơ bản được hiển thị theo cách trình duyệt muốn hiển thị nó. Các trình duyệt hiện đại thường hiển thị các thẻ HR không được đặt trước với chiều rộng là 100%, chiều cao là 2px và viền 3D màu đen để tạo dòng.
Dưới đây là ví dụ về yếu tố nhân sự chuẩn hoặc bạn có thể thấy trong hình ảnh này về cách một nhân sự không có cấu trúc tìm kiếm trong các trình duyệt hiện đại.
Chiều rộng và chiều cao là các trình duyệt xuyên suốt nhất quán
Các kiểu duy nhất nhất quán trên các trình duyệt web là chiều rộng và kiểu. Chúng xác định mức độ lớn của đường. Nếu bạn không xác định chiều rộng và chiều cao, chiều rộng mặc định là 100% và chiều cao mặc định là 2px.
Trong ví dụ này, chiều rộng là 50% của phần tử cha (lưu ý các ví dụ dưới đây tất cả bao gồm các kiểu nội tuyến. Trong một cài đặt sản xuất, các kiểu này thực sự sẽ được viết trong một biểu định kiểu bên ngoài để dễ quản lý trên tất cả các trang của bạn):
style = "width: 50%;">
Và trong ví dụ này chiều cao là 2em:
style = "height: 2em;">
Thay đổi biên giới có thể trở thành thách thức
Trong trình duyệt hiện đại, trình duyệt xây dựng đường bằng cách điều chỉnh đường viền. Vì vậy, nếu bạn xóa đường viền với thuộc tính kiểu, dòng sẽ biến mất trên trang. Như bạn có thể thấy (tốt, bạn sẽ không thấy bất cứ điều gì, vì các dòng sẽ không nhìn thấy được) trong ví dụ này:
style = "border: none;">
Điều chỉnh kích thước, màu sắc và kiểu đường viền sẽ làm cho dòng trông khác và có cùng tác dụng trong tất cả các trình duyệt hiện đại. Ví dụ, trong phần trình diễn này đường viền màu đỏ, đứt nét và rộng 1px:
style = "border: 1px tiêu tan # 000;">
Nhưng nếu bạn thay đổi đường viền và chiều cao, các phong cách trông hơi khác trong các trình duyệt rất lỗi thời so với các trình duyệt hiện đại. Như bạn có thể thấy trong ví dụ này, nếu bạn xem nó trong IE7 và dưới đây (một trình duyệt vốn đã lỗi thời và không còn được hỗ trợ bởi Microsoft) thì có một đường bên trong vát không hiển thị trong các trình duyệt khác (bao gồm IE8 trở lên) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Những trình duyệt cũ này thực sự không có nhiều mối quan tâm trong thiết kế web ngày nay, vì chúng đã được thay thế phần lớn bằng các tùy chọn hiện đại hơn.
Tạo một đường trang trí với hình nền
Thay vì một màu, bạn có thể xác định một hình nền cho nhân sự của bạn để nó trông chính xác như bạn muốn nó, nhưng vẫn hiển thị ngữ nghĩa trong đánh dấu của bạn.
Trong ví dụ này, chúng tôi sử dụng một hình ảnh có ba đường lượn sóng. Bằng cách đặt nó làm hình nền mà không lặp lại, nó tạo ra sự phá vỡ trong nội dung trông giống như bạn thấy trong sách:
style = "height: 20px; background: #fff url (aa010307.gif) trung tâm cuộn không lặp lại; border: none;">
Chuyển đổi nhân tố
Với CSS3, bạn cũng có thể làm cho dòng của bạn thú vị hơn. Phần tử HR thường là một đường ngang , nhưng với thuộc tính biến đổi CSS, bạn có thể thay đổi cách chúng trông như thế nào. Một chuyển đổi yêu thích trên phần tử nhân sự là thay đổi vòng quay.
Bạn có thể xoay phần tử nhân sự của bạn để nó chỉ hơi chéo:
hr {
-moz-transform: xoay (10deg);
-webkit-transform: xoay (10deg);
-o-transform: xoay (10deg);
-ms-transform: xoay (10deg);
chuyển đổi: xoay (10deg);
}
Hoặc bạn có thể xoay nó sao cho nó hoàn toàn thẳng đứng:
hr {
-moz-transform: xoay (90deg);
-webkit-transform: xoay (90deg);
-o-transform: xoay (90deg);
-ms-transform: xoay (90deg);
chuyển đổi: xoay (90deg);
}
Hãy nhớ rằng điều này quay nhân sự dựa trên vị trí hiện tại của nó trong tài liệu, vì vậy bạn có thể cần phải điều chỉnh vị trí để có được nó ở nơi bạn muốn nó. Bạn không nên sử dụng điều này để thêm đường thẳng đứng vào thiết kế, nhưng đó là cách để có được hiệu ứng thú vị.
Một cách khác để nhận các dòng trên trang của bạn
Một điều mà một số người làm thay vì sử dụng yếu tố nhân sự là dựa vào biên giới của các yếu tố khác. Nhưng đôi khi một nhân sự thuận tiện hơn và dễ sử dụng hơn là cố gắng thiết lập biên giới. Các vấn đề về mô hình hộp của một số trình duyệt có thể giúp thiết lập biên giới thậm chí còn phức tạp hơn.