Tôi đã tìm kiếm một số giải pháp cho trang trí đơn giản này và tôi đã tìm thấy khá nhiều loại, một số điều kỳ lạ, một số thậm chí với JS để tính toán chiều cao của phông chữ và bla, bla, bla, sau đó tôi đã đọc Một trong bài đăng này và đọc một bình luận từ baydot nói về fieldset
và legend
và tôi nghĩ đó là nó.thirtydot speaking about fieldset
and legend
and I thought that was it.
Tôi đang ghi đè lên 2 kiểu yếu tố đó, tôi đoán bạn có thể sao chép các tiêu chuẩn W3C cho chúng và đưa nó vào lớp .middle-line-text
của bạn [hoặc bất cứ điều gì bạn muốn gọi nó] nhưng đây là những gì tôi đã làm:
Your text goes here
.featured-header{
border-bottom: none;
border-left: none;
border-right: none;
text-align: center;
}
.featured-header legend{
-webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
-webkit-padding-end: 8px;
background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find [: */
font-weight: normal; /* I preffer the text to be regular instead of bold */
color: YOU_CHOOSE;
}
Đây là fiddle: //jsfiddle.net/legnaleama/3t7wjpa2/
Tôi đã chơi với các kiểu biên giới và nó cũng hoạt động trong Android;] [được thử nghiệm trên KitKat 4.xx]
EDIT:
Theo ý tưởng của Bekerov Artur cũng là một tùy chọn hay, tôi đã thay đổi hình ảnh .png Base64 để tạo đột quỵ bằng .SVG để bạn có thể hiển thị trong bất kỳ độ phân giải nào và cũng thay đổi màu của phần tử mà không cần bất kỳ phần mềm nào khác liên quan :]
/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url["data:image/svg+xml;utf8,"];
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}
//vimeo.com/270702335
Với các lớp và ID, chúng tôi đã thấy rằng có thể tùy chỉnh sự xuất hiện của các yếu tố nhất định.
Có nhiều cách dễ dàng để phá vỡ cấu trúc của trang của bạn để phân tách các chủ đề hoặc ý tưởng mà không cần tạo các lớp hoặc ID.
Bạn có thể sử dụng ngắt dòng hoặc các quy tắc ngang [nghĩa là các dòng] để làm như vậy!
Giả sử bạn muốn viết mã một bài viết về Coffeeshops tốt nhất của New York và bạn muốn nó được cấu trúc như sau:
Chú ý đến hai điều:
Các địa chỉ dưới mỗi tên Coffeeshop
Dòng phân tách danh sách Manhattan với Danh sách Brooklyn
Đây là những gì chúng tôi sẽ đề cập trong chương này.
Dòng phá vỡ
Các đoạn là các phần tử cấp khối, có nghĩa là chúng chiếm chiều rộng của phần tử chứa của chúng theo mặc định. Họ cũng có khoảng cách trên và bên dưới họ. Nó không chỉ là một sự phá vỡ dòng đơn giản.
Xem khoảng trống giữa "dòng 1" và "dòng 2" trong hình ảnh sau? Không gian đó được thêm tự động vào phần tử HTML [bởi CSS]:
Đôi khi, bạn không muốn không gian thêm đó. Bạn sẽ muốn ít khoảng trống hơn giữa mỗi dòng:
Điều này đúng đặc biệt cho địa chỉ và bài thơ. Bạn không cần một đoạn hoàn toàn mới cho mỗi dòng trong một địa chỉ! Một đơn giản, và hẹp hơn, phá vỡ dòng sẽ làm.
Để tạo đường ngắt trong HTML, hãy sử dụng thẻ. Không có thẻ đóng cần thiết.
Toby's Estate
125 N 6th St
Brooklyn, NY 11249
Trong mã ở trên, sẽ có một dòng phá vỡ giữa "125 N 6 St" và "Brooklyn, NY 11249" sẽ không có lượng không gian kỳ quặc xuất hiện giữa hai phần tử đoạn. Nó sẽ chỉ là một sự phá vỡ tốt đẹp!
Đây là những gì địa chỉ sẽ trông giống như hai yếu tố riêng biệt thay vì một đoạn chứa một đường ngắt:
Đó là một lượng không gian kỳ lạ, phải không? & NBSP; Nó cũng không có ý nghĩa về mặt ngữ nghĩa vì một địa chỉ là một đơn vị, vì vậy để tách nó ra vì nhiều đoạn không phù hợp.
Quy tắc ngang
Bạn có thể có các chủ đề nội dung khác nhau trong một trang có liên quan nhưng có giá trị tách biệt cho rõ ràng. Trong ví dụ trên, Coffeeshops ở Manhattan được tách ra khỏi các quán cà phê ở Brooklyn vì nó giúp nhóm nội dung khác nhau trong bài viết.
Để tạo một dòng hoặc "quy tắc ngang" trong HTML, chỉ cần sử dụng thẻ.
Quy tắcManhattan
...
...
Brooklyn
HorizontalĐây là mã HTML đầy đủ cho bài viết của Coffeeshop [tìm đó và thẻ!]:
New York's best coffeeshops
New York has some great coffeeshops. Make sure not to miss the hot new addresses opening up left and right!
Manhattan
The Bean
824 Broadway
New York, NY 10003
There are multiple Bean locations in the city. It's a good place to get work done because they're open late.
Third Rail
240 Sullivan St
New York, NY 10012
Coffee and donuts! What more could you want?
Black Fox Coffee Co.
70 Pine St
New York, NY 10270
Black Fox has an incredible bean selection and nice snacks.
Stumptown
18 W 29th St
New York, NY 10001
Does this even need explaining?
Brooklyn
Toby's Estate
125 N 6th St
Brooklyn, NY 11249
Toby's has grown a lot from its initial location in Brooklyn. They now have three locations in NYC.
Practice!
Đi đến bài tập Codepen này.Bạn sẽ thêm một phần mới cho khu phố Nữ hoàng bằng cách sử dụng quy tắc ngang.Bạn sẽ thêm một Coffeeshop ở Queens [thực hoặc tưởng tượng], đảm bảo tạo địa chỉ của nó bằng cách sử dụng một đường ngắt.
Thêm một quy tắc ngang [