Kênh 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!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
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/

0 comments:

Post a Comment

Popular Posts