Vua Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kinh doanh, bán hàng, tư vấn, bảo hiểm Những cá nhân, tổ chức, đại lý,muốn bán, hợp đồng bảo hiểm
Saturday, April 23, 2016

Một đoạn css khá đẹp mắt dùng để trang trí thẻ <pre> nhằm giúp cho khách truy cập dễ dàng hơn trong việc xem các đoạn mã lệnh mà bạn chia sẽ, các đoạn code sẽ được đặt trong thẻ <pre>...</pre> với việc tự động chèn 2 màu xen kẽ giữa các dòng code và hiển thị một chủ đề phía bên trên nhằm giúp cho người đọc dễ dàng hơn khi xem các đoạn code mà bạn chia sẽ. 




- Với blogspot, chỉ cần chèn đoạn css dưới đây trước thẻ đóng ]]></b:skin> và Lưu lại 
01pre {
02  background-color:white;
03  background-image:-webkit-linear-gradient(top#f5f5f5 50%white 50%);
04  background-image:-moz-linear-gradient(top#f5f5f5 50%white 50%);
05  background-image:-ms-linear-gradient(top#f5f5f5 50%white 50%);
06  background-image:-o-linear-gradient(top#f5f5f5 50%white 50%);
07  background-image:linear-gradient(top#f5f5f5 50%white 50%);
08  -webkit-background-size:30px 30px;
09  -moz-background-size:30px 30px;
10  -ms-background-size:30px 30px;
11  -o-background-size:30px 30px;
12  background-size:30px 30px;
13  background-repeat:repeat;
14  font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
15  color:#333;
16  border:2px solid #666;
17  position:relative;
18  padding:0 7px;
19  margin:10px 0;
20  overflow:auto;
21  word-wrap:normal;
22  white-space:pre;
23  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
24  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
25  box-shadow:0 1px 2px rgba(0,0,0,0.2);
26  position:relative;
27}
28 
29pre[data] {
30  padding:29px 1em 7px 1em;
31}
32 
33pre[data]:before {
34  content:attr(data);
35  display:block;
36  position:absolute;
37  top:0;
38  right:0;
39  left:0;
40  background-color:#666;
41  padding:0 7px;
42  font:bold 11px/20px Arial,Sans-Serif;
43  color:white;
44}
45 
46code pre[data="HTML"] {border-color:#0B7E88;color:#08464B;}
47pre[data="CSS"] {border-color:#7B990C;color:#4B5D08;}
48pre[data="JavaScript"] {border-color:#545448;color:#1F2E24;}
49pre[data="JQuery"] {border-color:#395540;color:#2E2E27;}
50pre[data="PHP"] {border-color:#FF9900;color:#865003;}
51pre[data="XML"] {border-color:#FF0C39;color:#790015;}
52 
53pre[data="HTML"]:before {background-color:#0B7E88;}
54pre[data="CSS"]:before {background-color:#7B990C;}
55pre[data="JavaScript"]:before {background-color:#545448;}
56pre[data="JQuery"]:before {background-color:#395540;}
57pre[data="PHP"]:before {background-color:#FF9900;}
58pre[data="XML"]:before {background-color:#FF0C39;}
- Để sử dụng chỉ cần chèn mã bạn muốn hiển thị vào các thẻ tương ứng dưới đây: 
1<pre data="HTML"> ... </pre>
2<pre data="CSS"> ... </pre>
3<pre data="JavaScript"> ... </pre>
4<pre data="JQuery"> ... </pre>
5<pre data="PHP"> ... </pre>
6<pre data="XML"> ... </pre>
Nguồn http://www.nhatchanh.info/
tcaviet@gmail.com

0 comments:

Post a Comment

domain, domain name, premium domain name for sales

Bài hay:

kinh doanh, bán hàng, tư vấn, bảo hiểm Những cá nhân, tổ chức, đại lý,muốn bán, hợp đồng bảo hiểm