Báo giá W3.CSS
Nỗi đau chính là tình yêu, là hệ thống lưu trữ chính. Rằng khối lượng cuộc sống không phải là một nụ cười ấm áp của những con gấu. Tiếng cười của cái bình Không có gì là phức tạp.
Hiển thị Báo giá
Lớp bảng điều khiển w3 là lớp hoàn hảo để hiển thị báo giá.
Trích dẫn thường được hiển thị với nền màu xám, thanh viền bên trái và kiểu phông chữ nghiêng:
Thí dụ
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
Báo giá lớn
Các dấu ngoặc kép lớn thường được sử dụng trên Internet:
Thí dụ
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
Dấu ngoặc kép
Nếu bạn sử dụng phần tử <blockquote> HTML tiêu chuẩn, hãy lưu ý rằng trình duyệt sẽ thêm một lề trái và phải:
"Make it as simple as possible, but not simpler."
Albert Einstein
Thí dụ
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
Sử dụng các ký hiệu HTML
Bạn có thể sử dụng các ký hiệu HTML tiêu chuẩn thay vì ký hiệu và:
| Biểu tượng | Mã số |
|---|---|
| ≪ | # 8810 |
| ✂ | # 9986 |
| ❝ | # 10077 |
| ❞ | # 10078 |
| ❠ | # 10080 |
| ✔ | # 10004 |
Nỗi đau chính là tình yêu, là hệ thống lưu trữ chính. Rằng khối lượng cuộc sống không phải là một nụ cười ấm áp của những con gấu. Tiếng cười của cái bình Không có gì là phức tạp.
Nỗi đau chính là tình yêu, là hệ thống lưu trữ chính. Rằng khối lượng cuộc sống không phải là một nụ cười ấm áp của những con gấu. Tiếng cười của cái bình Không có gì là phức tạp.
Thí dụ
<div class="w3-panel w3-light-grey">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert
Einstein</p>
</div>
Thí dụ
<div class="w3-panel w3-center w3-leftbar w3-sand">
<p><i
class="w3-serif w3-xlarge">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">✔</span>
Programming in C will slowly decline.<br>
Programming in JavaScript
will be more important.</i></p>
</div>
Sử dụng biểu tượng phông chữ tuyệt vời
Bạn cũng có thể sử dụng các biểu tượng từ thư viện Font Awesome:
Thí dụ
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
</div>
Bạn cũng có thể thay đổi màu sắc và độ mờ:
Thí dụ
<div class="w3-panel w3-sand w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge w3-opacity"></i>
<span class="w3-serif
w3-xlarge">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</span></p>
</div>
Một câu trích dẫn màu đen:
Nỗi đau chính là tình yêu, là hệ thống lưu trữ chính. Rằng khối lượng cuộc sống không phải là một nụ cười ấm áp của những con gấu. Tiếng cười của cái bình Không có gì là phức tạp.
Thí dụ
<div class="w3-panel w3-black">
<p class="w3-large
w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
Hiển thị Báo giá dưới dạng Thẻ
Nỗi đau chính là tình yêu, là hệ thống lưu trữ chính. Rằng khối lượng cuộc sống không phải là một nụ cười ấm áp của những con gấu. Tiếng cười của cái bình Không có gì là phức tạp.
Thí dụ
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
<p
class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge
w3-text-red"></i><br>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit ...</p>
</div>
Nỗi đau chính là tình yêu, là hệ thống lưu trữ chính. Rằng khối lượng cuộc sống không phải là một nụ cười ấm áp của những con gấu. Tiếng cười của cái bình Không có gì là phức tạp.
Thí dụ
<div class="w3-panel w3-card-4 w3-center" style="width:50%">
<span
style="font-size:100px">❝</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>