Latest topics
Today at 09:01» [Game] Nếu Dơi bị nướng?...by Rei Skywalker
Yesterday at 18:47» Đứt cáp, mạng chậmby Rei Skywalker
18/6/2018, 16:30» [Reitaisai 15][ESQUARIA] EXFLORAby sawsore
18/6/2018, 16:29» [Reitaisai 15][C-CLAYS] 境懐 -キョウカイ-by sawsore
18/6/2018, 16:29» [Reitaisai 15][EastNewSound] Mystic Gate the Instrumentalby sawsore
18/6/2018, 16:28» [Reitaisai 15][彩音 ~xi-on~] Fairy Tale -フェアリー・テイル-by sawsore
18/6/2018, 16:28» [Reitaisai 15][Amateras Records] Addicted Moonby sawsore
18/6/2018, 16:27» [Reitaisai 15][舞音KAGURA] NAGIby sawsore
18/6/2018, 16:26» [Reitaisai 15][TAMUSIC] ピアノのための東方超絶技巧曲集7by sawsore
18/6/2018, 16:25» [Reitaisai 15][天秤亭] Imaginary Night -TABLETALK ROLE PLAY TOHO 12-by sawsore
18/6/2018, 16:24» [Reitaisai 15][THE OTHER FLOWER] 菫by sawsore
18/6/2018, 16:23» [Reitaisai 15][TsuBaKi] Cadeau~親愛なる君へby sawsore
18/6/2018, 10:45» Members' Fanartby jcebreakr
18/6/2018, 10:41» Bản nhạc bạn đang nghe là gì? Ver 3by jcebreakr
17/6/2018, 20:52» Hỏi đáp chungby Rei Skywalker
17/6/2018, 17:55» Touhou WTF - Ver 12by mr.equal
15/6/2018, 20:29» [Rủ rê] lập team làm game fan made .by mr.equal
11/6/2018, 19:22» [Reitaisai 15][ONSEN PROJECT] ORIENTAL-GIRLFRIENDby sawsore
11/6/2018, 19:21» [Reitaisai 15][アベニュールーム] 百花繚乱by sawsore
11/6/2018, 19:21» [Reitaisai 15][CielArc] Majestic GIGby sawsore
11/6/2018, 19:19» [Reitaisai 15][Trancy] 東方ファンタズムby sawsore
11/6/2018, 19:18» [Reitaisai 15][TUMENECO] Re:TMNC Acoustic Collectionby sawsore
11/6/2018, 19:18» [Reitaisai 15][SYNC.ART'S] Angelic Meisterby sawsore
11/6/2018, 19:17» [Reitaisai 15][TAMUSIC] 東方バイオリンロック 零-ZERO-by sawsore
11/6/2018, 19:16» [Reitaisai 15][C-CLAYS] 伝唱 -でんしょう-by sawsore
11/6/2018, 19:16» [Reitaisai 15][まらしぃ] 幻想遊戯<天>by sawsore
9/6/2018, 17:01» Điểm danh!!!by namvipboy1234
8/6/2018, 22:42» Giao diện forumby Fire_Eye
8/6/2018, 19:58» Báo lỗiby mr.equal
7/6/2018, 21:25» Kourindou P shopby Reisen Udongein Inaba

BBCode [box]

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

BBCode [box]

Bài gửi by mr.equal on 12/6/2015, 21:46

[indent]BBCode box[/indent]

Bài giới thiệu BBCode box, BBCode đơn giản nhưng có vai trò quan trọng bậc nhất nếu bạn muốn trình bày bài viết một cách cầu kỳ.

[hs1]BBCode box[/hs1]
[box="border: 5px double black; float: left; margin-right: 5px; padding: 5px; background-color: #fff"]
Mục lục
[toc][/box][hs2]box[/hs2]: Tạo ra một cái hộp (box) chứa nội dung
[indent][cbox][ob]box[cb]{Nội dung}[ob]/box[cb][/cbox]
[box]Nội dung Nội dung Nội dung[/box]
[ob]box[cb]Nội dung Nội dung Nội dung[ob]box[cb]
Những gì bạn thấy là... không có gì cả. Cái box chứa nội dung thực sự tồn tại, chỉ có điều do nó chưa được đặt thông số về viền hay màu nền nên nó không hiện ra mà thôi.
[box box="border: 2px solid #00dddd"]Nội dung Nội dung Nội dung[/box]
[ob]box box="border: 2px solid #00dddd"[cb]Nội dung Nội dung Nội dung[ob]box[cb]
Các thuộc tính của box
[indent][hs3]box[/hs3]: Quyết định bề ngoài của box
Thuộc tính này nhận các thông số CSS.
[box box="border: 8px groove #00dddd; padding: 2px"]Nội dung Nội dung Nội dung[/box]
[ob]box box="border: 8px groove #00dddd; padding: 2px"[cb]Nội dung Nội dung Nội dung[ob]box[cb]

[hs3]class[/hs3]: Đặt lớp cho box
Thuộc tính này sẽ đưa các thông số css chứa trong class tương ứng vào cột.
[box class="custom"]Nội dung Nội dung Nội dung[/box]
[ob]box class="custom"[cb]Nội dung Nội dung Nội dung[ob]box[cb]
[/indent][/indent]

[hs2]Chú ý[/hs2]
[indent]Box là một BBCode quan trọng, tuy nhiên nó có một đặc điểm là mỗi box chỉ nằm trên một dòng, thử đưa hai box nằm trên cùng một dòng sẽ cho ra kết quả là hai box nằm trên hai dòng khác nhau.
Để khắc phục, hãy dùng thông số display: inline-block.
Còn nhiều cách khắc phục khác nữa nhưng không tiện nêu ở đây.
[/indent]

[hs1]FAQ[/hs1]
Q: Mình có thể tạo một box có hình tròn không?
A: Được, bằng cách dùng border-radius: 50% với một box hình vuông
[box="border: 3px solid green; border-radius: 50%; width: 100px; height: 100px"][/box]
Q: Mình có thể tạo một box có hình tam giác không?
A: Được, cách làm tương đối khó hiểu, vậy nên tham khảo ở đây http://apps.eky.hk/css-triangle-generator/ là nhanh nhất, copy nguyên văn thông số css vào thôi (nhớ xóa hết mấy dấu xuống dòng).
[box="border-style: solid; border-width: 20px 0 0 20px; border-color: transparent transparent transparent green"][/box]
Q: Mình có thể...
A: Giới hạn sáng tạo với BBCode box là không có, nếu khi nào đó rảnh mình có thể liệt kê một vài thủ thuật đơn giản, những thủ thuật ảo diệu hơn thì hãy search google.
[id="xyz"]-----------------[/id]



[box="width: 250px; height: 100px; perspective: 1000px; display: inline-block"][box="position: relative; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(50deg) rotateZ(0deg)"]
[box class="square x1"][/box][box class="square x2"][/box][box class="square x3"][/box][box class="square x4"][/box][box class="square x5"][/box][box class="square x6"][/box][box class="square2 x11"][/box][box class="square2 x21"][/box][box class="square2 x31"][/box][box class="square2 x41"][/box][box class="square2 x51"][/box][box class="square2 x61"][/box]
[/box][/box][box="width: 200px; height: 100px; perspective: 1000px; display: inline-block"][box="position: relative; transform-style: preserve-3d; transform: rotateX(-150deg) rotateY(30deg) rotateZ(10deg)"]
[box class="square x1"][/box][box class="square x2"][/box][box class="square x3"][/box][box class="square x4"][/box][box class="square x5"][/box][box class="square x6"][/box][box class="square2 x11"][/box][box class="square2 x21"][/box][box class="square2 x31"][/box][box class="square2 x41"][/box][box class="square2 x51"][/box][box class="square2 x61"][/box]
[/box][/box][box="width: 200px; height: 100px; perspective: 1000px; display: inline-block"][box="position: relative; transform-style: preserve-3d; transform: rotateX(-40deg) rotateY(20deg) rotateZ(0deg)"]
[box class="square x1"][/box][box class="square x2"][/box][box class="square x3"][/box][box class="square x4"][/box][box class="square x5"][/box][box class="square x6"][/box][box class="square2 x11"][/box][box class="square2 x21"][/box][box class="square2 x31"][/box][box class="square2 x41"][/box][box class="square2 x51"][/box][box class="square2 x61"][/box]
[/box][/box][clear]


[space="125px"]Chúng được tạo ra từ box *true_story*


[metabox][style="square"]border: 3px solid black; width: 94px; height: 94px; text-align: center; vertical-align: top; position: absolute; display: inline-block; border-radius: 10px[/style]
[style="x1"]transform: rotateX(-25deg) translateZ(50px); transform-origin: 0px 100px 50px; background-color: rgba(255,0,0,1)[/style]
[style="x2"]transform: rotateY(90deg) translateZ(50px); background-color: rgba(0,255,0,0.5)[/style]
[style="x3"]transform: rotateY(180deg) translateZ(50px); background-color: rgba(255,0,0,0.5)[/style]
[style="x4"]transform: rotateY(270deg) rotateX(-25deg) translateZ(50px) translateX(-100px); transform-origin: 0px 100px 50px; background-color: rgba(0,255,0,1)[/style]
[style="x5"]transform: rotateX(90deg) translateZ(50px); background-color: rgba(0,0,255,1)[/style]
[style="x6"]transform: rotateX(270deg) translateZ(50px); background-color: rgba(0,0,255,0.5)[/style]
[style="square2"]border: 3px solid black; width: 44px; height: 44px; text-align: center; vertical-align: top; position: absolute; display: inline-block; border-radius: 5px; background-color: gray;[/style]
[style="x11"]transform: rotateX(0deg) translateZ(50px) translateY(25px)[/style]
[style="x21"]transform: rotateY(90deg) translateZ(25px) translateX(-25px) translateY(25px)[/style]
[style="x31"]transform: rotateY(180deg) translateZ(0px) translateY(25px)[/style]
[style="x41"]transform: rotateY(270deg) translateZ(25px) translateX(25px) translateY(25px)[/style]
[style="x51"]transform: rotateX(90deg) translateZ(0px) translateY(25px)[/style]
[style="x61"]transform: rotateX(270deg) translateZ(50px) translateY(-25px)[/style]
[style="custom"]border: 8px ridge #dd00dd;
background-color: #00dddd;
padding: 2px[/style][/metabox]
Waifu
avatar
mr.equal
Administrator
Xem lý lịch thành viên

Waifu Order : FA
. :
Online
Offline

Posts : 4820
Power : 9530
Faith : 2019
Ngày tham gia : 07/11/2014
Địa điểm : SDM

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang


Permissions in this forum:
Bạn không có quyền trả lời bài viết