开启左侧

[学习借鉴] 美丽帖子编辑利器Discuz颜色及排版布局模板代码分享

[复制链接]
发表于 2016-6-24 11:27 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
相信很多人都想要自己发布的帖子是美美的,漂亮的,
今天就给大家分享一下如何把帖子编辑的漂漂亮亮的
感兴趣的盆有可以进来学习下哦!
1 f0 ~8 Q  y4 o6 j& H
简单边框之一:  G$ ~) n( h# @% R4 \8 t* v
  q( v- F6 M* b
单纯的内容边框
6 O5 l0 N" v$ `$ C" d6 A' O
8 F: Y* P& b$ x: \7 k$ A+ z/ ?9 g; a6 o1 Q0 r8 H* G1 n  N$ B
内容
9 j% i. ~; y3 U& Z! Q! |. {
代码如下:
* d3 x6 |1 T  B) [. i+ j" z* Q
  • 内容

    0 L$ |' {9 F7 a( y/ {  G

+ r0 d0 i- e! K- i, M: U复制代码

0 b% t3 e% v' T, j2 ], H( s. l
1层边框* J) i, m  m8 V/ p8 |
内容
代码如下:
  1. [table=560,#ff0000][tr][td][table=548,#ffffff][tr][td] 内容[/td][/tr][/table][/td][/tr][/table]
    ! i% U0 S7 M# B$ V
  2. 复制代码
复制代码
2 C+ C  F, z7 f. p4 y8 b. l
- G0 E" U" C6 p- F5 g; p& B
  • 内容

    7 |' ^! B; S- W( K8 v

0 F$ c8 V6 ?* C. m: M复制代码
2 g! K7 S( T( ?8 k' d3 ?

: u8 [- b6 v8 e+ }  ?
2层边框
9 v3 \7 L* W1 I% a7 D) s, }4 G
: B8 w& g: U$ b) }, E$ t% j
内容
代码如下:
  1. 01.[table=560,#cc3299][tr][td][table=548,#5c4033][tr][td][table=536,white][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
复制代码
# \6 K# t. H+ E

! O. G) C4 G, L; |
  • 01.
    内容
    % O+ I0 u0 b* R9 z( b
/ i1 b6 Z' I; i5 L2 t) c: ~6 T
复制代码

5 O+ M8 R* ]3 S2 I: e
0 I. j  F4 T- o1 h# l
3层边框3 ^  g8 T: w' l7 g. W
内容
代码如下:
  1. [table=560,mediumvioletred][tr][td][table=548,palevioletred][tr][td][table=536,lavenderblush][tr][td][table=524,white][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
复制代码

, T: F- e/ @# Y* r, r8 C% t9 X$ g; r6 a! o/ r6 [4 E( }. }: U6 F" l
  • 01.
    内容

    , Z4 |+ r: M6 S* W" k' a1 p
! E& A5 s8 }; N
复制代码
0 F7 z/ E+ m5 Z# C5 E8 B, p
1 x. k- _) }9 O9 S7 z. l9 v4 W

9 I* A6 `+ o  B; t, h
简单边框二:6 ^) |/ I% v4 ?$ H; E4 ?- D
$ E; J5 o( [0 b9 A$ q: T
边框效果:. A. [# d* D' }/ O# O! ]% m. D

5 M* K- g/ c' |+ }* k
内容
1 e- W- M& P4 A: F$ x- }
代码如下:
8 R3 ]; h; v& F! ]% R' o- U
0 F- \% T5 z1 C7 V! T' T6 f

1 a# t$ C# C3 F2 Q8 v) K
; A8 U: V6 _' O. i; V& B* ]9 `7 C6 Q: r2 n% Q% K7 r% g. \
+ b+ W5 @$ ^' s0 v! w! z* K& \
  1. 01.[table=560,#000000][tr][td][table=548,#ffffff][tr][td][table=536,#000000][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]# p& n1 t8 a4 U% T: X' r
  2. 复制代码
复制代码

3 Q/ O7 l: R( h
% o# S7 t5 Q; E2 o1 R' f

9 N1 P1 O6 }9 \9 a! Y
+ w; J# r1 J! w$ v/ r! q
    1. <div id="code_MEi" style="word-wrap: break-word;"><ol style="word-wrap: break-word; margin: 0px 0px 0px 10px !important; padding: 0px !important; list-style: none;"><li style="word-wrap: break-word; margin: 0px 0px 0px 2em; padding: 0px 0px 0px 10px; list-style-type: decimal-leading-zero; font-family: Monaco, Consolas, " 12px;="" 1.8em;"="" serif;="" new",="" "courier="" console",="" lucida="">01.[table=560,#000000][tr][td][table=548,#ffffff][tr][td][table=536,#000000][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]</li></ol></div><em style="word-wrap: break-word; font-style: normal; color: rgb(51, 102, 153) !important; margin-left: 43px; font-size: 12px; cursor: pointer;">复制代码</em>
    复制代码
    % B" z+ q  r& S4 H' A) ?/ ]

2 f8 u' o" j$ _) N5 J+ d% f
内容

; P, f( O2 {+ t& n代码如下:9 Z6 K4 L6 e8 G7 a8 T' V
  1. 01.[table=560,dodgerblue][tr][td][table=548,deepskyblue][tr][td][table=536,aliceblue][tr][td]内容[/td][/tr][/table][/td][/tr][/table] [/td][/tr][/table]) W/ i8 @. N  O* s8 J
  2. 复制代码
复制代码
/ A, P7 c4 d0 m: l, k8 S/ m, A
4 z9 y$ C- u* }, X6 r

& \2 d" @  V6 K8 I0 S% I: ^! ~
  • 01.
    内容

    7 \9 T, f) ~: K+ V) n1 `$ L

+ \8 P: x$ k  S8 b, R3 X0 l8 B
边框效果:5 ]$ W9 |' t8 b- N5 H5 S! S) @
& k4 h3 Y) l/ s8 I, D

" p7 n4 V+ o4 B; j  B/ p
内容
7 L5 [; N0 i* H) v4 e0 X2 e$ D" t
代码如下:0 s" G$ J- P8 H5 z7 A  b1 F
  1. 01.[table=560,#ff9999][tr][td][table=548,#ff6666][tr][td][table=536,lavenderblush][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
    : D1 F2 M; h0 G7 s# C3 N
  2. 复制代码
复制代码
3 s4 G+ N( P6 U, Z4 l

$ G  J6 d% E8 L

  n7 W, t3 W3 J) |
  • 01.
    内容

    $ \  b0 h5 i# l: u! [

' E" H/ K1 T" s  T; ~- X
边框效果:' V/ U5 |' o8 n1 ^* E5 B

5 R- G5 S9 P6 f5 {

3 b, C& L/ e1 r- B$ {. s& Y( D2 {$ i
内容

/ I' S# `! C* k9 Z" b! \  h8 r代码如下:2 T- l4 {- _) E* x) ]% d4 h
  1. 01.[table=560,chocolate][tr][td][table=548,peru][tr][td][table=536,antiquewhite][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
    + `5 T- Q1 X# v
  2. 复制代码
复制代码
( }( z+ y2 |" F- z

  i8 o7 h) M! p) B1 J& n9 b
. b. M$ |4 N: d% q8 U$ H0 n/ U
  • 01.
    内容
    1 Y/ _! a( i. X; S# X9 a

5 d. ?* @* k8 \2 X7 S
边框效果:
; w% s$ {. n+ j, L" G: c

* L2 h8 V) ]+ Z% R# _. q! ^
内容
% v1 t! s% V, j9 L2 F9 u9 x
代码如下:
- A/ I9 R3 m' W  P$ |- \
  1. 01.[table=560,green][tr][td][table=548,yellow][tr][td][table=536,floralwhite][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
    . V/ u  G  d0 v" S
  2. 复制代码
复制代码
! W# d  H1 o3 G

( e0 v) W6 B" Q) Z1 o, w

/ `3 Y1 t. p5 T
  • 01.
    内容
    $ c' V9 x" I4 u7 N4 b; g& u0 M) @

5 e' w' @! g5 n7 M/ K- ^
边框效果:, W) F9 g& s- W/ W  M% x
/ K- t- M) d/ H% O
内容
5 O: c) N8 D4 d; g. |5 H" l; j
代码如下:
+ C, w' \( v. Y7 U
  1. 01.[table=560,crimson][tr][td][table=548,deepskyblue][tr][td][table=536,white][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
    1 ^2 u. |! N0 I- ?$ D: f( M, [
  2. 复制代码
复制代码

: X) @# g/ a1 [2 j0 W
, {: T/ X% g! {2 v8 o/ o1 Z
* h- |  G! E$ u
  • 01.
    内容

    ( X( h7 B, T- O; V* t  Q
边框效果:
; I1 _  ~* y' g4 w, ]6 t

% l: T% j$ O# g! X- `
内容

: B3 {3 \4 z- x' w  s* R代码如下:
* G7 W6 T8 I3 m- N- X
  1. 01.[table=560,blueviolet][tr][td][table=548,white][tr][td][table=536,blueviolet][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]2 E9 n# K1 q( u  H) |4 m
  2. 复制代码
复制代码

/ c) s, }2 g0 a& t; S% V  d- Y& Q5 I  |* q# _
* J" f0 c  J6 ?$ V; x7 A# V
  • 01.
    内容

    1 K5 K! X7 T- o7 _+ }! w* B7 A, E
- q6 u% L3 v' H+ l! N. L$ Y2 ]

! i8 P( I  M' i- c& a边框效果:
; Y  P& w# V3 P
* p# a" c0 j* }6 c
内容

- Z- n) q9 Z, o1 e& ^/ b代码如下:
/ ]# ~! E3 ^' a. }5 A* D
  1. 01.[table=560,yellow][tr][td][table=548,black][tr][td][table=536,#ff0033][tr][td][table=524,white][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
    % R  Q; c* }" H% \3 j
  2. 复制代码
复制代码

* Y  }' A5 D) o
+ j0 F4 p) C4 t* ]" X& D
' o0 G$ R- H/ |
  • 01.
    内容

    / E! l8 t& p: P
  d! b; ~4 V4 M, J! b
边框效果:) |9 ^) y. d( Q

8 l5 T+ w) _1 G
内容
+ ?* t; E& E' x6 z% A4 a; i
代码如下:
: l" _" ~, F3 A7 d& I1 L
  1. 01.[table=560,dimgray][tr][td][table=548,darkgray][tr][td][table=536,whitesmoke][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
    0 ~% J" M' M7 \2 K0 {
  2. 复制代码
复制代码
$ A0 f4 Q7 ]2 {$ M5 o* B
! t3 ~# E" z7 C+ y% N7 J
* m; V3 u( ^* u) m' c) d
  • 01.
    内容

    : W- z) C& y, x4 c$ D; O& Q
" v6 o, m5 \# U. k6 s$ V4 k
边框效果:
# g! M7 p+ G) x+ m/ V& y

/ j* s- m8 _; Q& W, O
内容

: B! T0 C: r2 d/ m6 v% S) o% M+ ?代码如下:
: i6 H$ R- `" E& ~* k/ @
  1. 01.[table=560,#007fff][tr][td][table=548,#ff1cae][tr][td][table=536,lavenderblush][tr][td]内容[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]4 A4 y. @: q& Y
  2. 复制代码
复制代码
) z4 m! E8 @6 N
  @" \7 n# j$ S0 q1 @8 y

( d$ E4 Z% x! @8 \& o0 i! }
  • 01.
    内容
    % c  N( t$ z6 j( C; [2 Z* O+ I
  h1 C) l* [5 h! q

( G/ Q6 X  A$ d- R3 u- O方法:
/ D! t) h' P) L3 j# l4 a
把代码复制下来., W2 K4 j* b9 z: A1 g
粘贴到你要写的帖子中...$ y( b! w9 f3 j. P$ P( Y
然后勾选文本编辑框右上角的纯文本...
$ b4 ]0 P% r; L9 A. T你就会看到代码.....1 q2 I, K8 K# y1 K5 t
其中[img=]这是是你的图片链接,等号后头是图片的大小[/img], a+ ^& ~2 a) b$ V
table=560,#ce0000     第一行       #号后是要你替换的颜色代码
" w. j& [# O7 I8 ?table=550,#ea0000     第二行) e1 y5 h; @: r9 o' `
table=540,#ff7575      第三行
; m0 Q& i! a9 r* b: Ltable=530,#ff9797      第四行
: \3 y+ ^, h& Z  C5 I' k' P9 o然后想换什么颜色就填写什么颜色的代码就可以啦!不用感谢我的!

1 Z' C9 h+ c* x3 k. z) H6 w( k/ Y6 D2 O$ o
3 t7 d) B( J, L2 h" ?
备注# l8 h' I. l2 u' Q# C: s
5 V$ d7 v9 {* V# ^; l
帖子里“=560 ”是帖子宽度  #999999是颜色代码。, }$ A6 F7 i! Q4 m" O1 H( ?4 E
如果想改变帖子的宽度跟颜色可以在这2个地方设置、多层帖子宽度之间数值为“12”
8 Z- L) @. |* S1 u/ k1 B2 r. P2 i( Z. p+ W
table表格大小不要超过560,超过发出来会自动变成98%+ J1 t$ m. l, j5 ^* n+ Q
. Z" s% f# o/ j* X8 y! s
颜色代码:
( B- Q  q/ ]  B% i发帖时使用的格式为:(color=#FF00FF)要打的字(/color),用的时候把()改为[]。
4 K7 I1 O( |1 U; Z9 U# h: Z6 i! F: a  g2 y; R5 h! d
效果:
$ c) u5 L: y4 {# w# @' V  ^9 W
2 q4 D: V: G. I9 ?' J2 e2 {9 A1  白色 #FFFFFF (这里有一个颜色哦)
& k# i1 Y7 w4 E: `
2  红色 #FF0000 0 Z7 n3 `5 u' C
3  绿色 #00FF00
8 j1 K. n$ K6 b0 H% P/ v3 V% R4  蓝色 #0000FF
' y& {9 }/ u( m5 g( f5  牡丹红 #FF00FF
: j6 ^) z" s5 r4 r6  青色 #00FFFF 9 E* r. r2 o* D- L. M
7  黄色 #FFFF00
4 [  ]5 D' Z0 f/ \7 D8 }3 j  T. ?8  黑色 #000000
( N4 w8 M( _. V  Q5 |( ^9  海蓝 #70DB93 + q4 J; i5 g' ~; L) T& B! u. l
10 巧克力色 #5C3317 8 B5 L! P  g) e& l- D
11 蓝紫色 #9F5F9F
& d- N+ U# g+ f, R0 X! i/ J12 黄铜色 #B5A642 9 Y, i* K# X6 z! [( K
13 亮金色 #D9D919 . p) P  _# u5 K% y  K4 E/ M
14 棕色 #A67D3D 0 _2 [( R7 N# A' ~& O% t
15 青铜色 #8C7853
  ]: c% d4 h! \2 L16 2号青铜色 #A67D3D
1 ~' L: ?* j- R# s9 n17 士官服蓝色 #5F9F9F
. Y+ k% E3 \! P- e, K% j18 冷铜色 #D98719
% i( b# @, O2 @8 i19 铜色 #B87333 8 h7 {& V& q/ O
20 珊瑚红 #FF7F00 9 C& E6 {+ N! f) {% V% x
21 紫蓝色 #42426F
4 r8 [5 k! p8 H+ W& R  X/ i3 O22 深棕 #5C4033 / @3 O& J, ]+ [
23 深绿 #2F4F2F 0 y8 m- A" w9 x* z  ~
24 深铜绿色 #4A766E # N3 @# l; ^/ H( _" M
25 深橄榄绿 #4F4F2F 4 x" n( D$ I: ~4 t
26 深兰花色 #9932CD " N1 J) S+ ?( t: O! |) D) F
27 深紫色 #871F78
- j3 `3 X, ]( r, S28 深石板蓝 #6B238E / u7 I' B; O# v, h
29 深铅灰色 #2F4F4F
# s# C. l# n  i30 深棕褐色 #97694F
# s8 J5 _% G+ n" O* K* i32 深绿松石色 #7093DB
0 ?* ^( j" V5 M1 k, b* A33 暗木色 #855E42 7 j0 f3 c2 @% Q7 }
34 淡灰色 #545454 # {: n1 h& A4 k0 w2 z8 ^1 B% G: ~6 a
35 土灰玫瑰红色 #856363 7 x# o7 \! t* p. }. }2 f
36 长石色 #D19275
5 X5 g/ }: B9 y$ V$ s# ~37 火砖色 #8E2323 9 H. a+ L' K# s. Z& c; a2 a9 S* @
38 森林绿 #238E23
' _/ k% b; ^% A1 _2 h5 `4 [; P+ @39 金色 #CD7F32
7 X0 p6 w/ C0 |1 W# N0 y5 l40 鲜黄色 #DBDB70 ; I% e8 O# P& _" l# B$ A3 A
41 灰色 #C0C0C0
: h) d; U' E8 X. ]6 K8 L; x5 W( {42 铜绿色 #527F76
9 y' z! P6 A, P& n0 p$ l43 青黄色 #93DB70 $ G3 V6 e! X, y6 t  h* e
44 猎人绿 #215E21 9 k0 Y* t# |( }" G5 ~# U5 N* A: m0 M
45 印度红 #4E2F2F 7 h* E  E0 b5 Q
46 土黄色 #9F9F5F , R8 I' N* W# D! @( a" N; \* n* v: V
47 浅蓝色 #C0D9D9
+ t0 X4 o; u6 O. z5 s3 H48 浅灰色 #A8A8A8 3 c: t/ }( {/ F8 B' |1 P* M3 a
49 浅钢蓝色 #8F8FBD
- j7 G2 D8 s8 w. @& T59 浅木色 #E9C2A6 * Y% H# F$ F7 Y- h0 A
60 石灰绿色 #32CD32
! G! ^, Y* {  e% X: }2 |61 桔黄色 #E47833 ( \3 \7 d: ]3 s* p7 Q9 l* q, B. \, }
62 褐红色 #8E236B
4 z; P4 [, g% p' ^8 V63 中海蓝色 #32CD99 ' y0 W. l% i$ t) y: J' O& s. Q
64 中蓝色 #3232CD 3 l; {8 ~: ~+ P' \" r. n
65 中森林绿 #6B8E23 ! R6 b  z+ x. {8 P3 n7 y6 s: L
66 中鲜黄色 #EAEAAE
8 W1 a4 ]6 p- I$ `67 中兰花色 #9370DB 6 w! ~9 E7 ~+ i( g& g$ {- V
68 中海绿色 #426F42
( c0 Y- \# ?  T5 E0 q" Z69 中石板蓝色 #7F00FF
4 O4 o3 p. k9 |( h* `70 中春绿色 #7FFF00
5 T! a: {9 h+ h+ E71 中绿松石色 #70DBDB
3 c3 c4 L9 j3 P* F" A72 中紫红色 #DB7093
5 {. r% O* @# f/ ]73 中木色 #A68064
' C% l8 f) l# p% m" s. D1 v7 M74 深藏青色 #2F2F4F
- [2 y5 A* l3 Z. d75 海军蓝 #23238E 8 S! x) G4 I+ k8 b+ |; z1 s- n
76 霓虹篮 #4D4DFF
$ |. O" `/ Q, `! o) R7 l; V77 霓虹粉红 #FF6EC7
; R( }" R4 c6 x: r+ }78 新深藏青色 #00009C
0 N. {; x' @3 ?! W9 g79 新棕褐色 #EBC79E 6 A0 y1 b; v( o+ `# [+ o/ J
80 暗金黄色 #CFB53B
% g: Z8 }5 `0 t* [2 M! g81 橙色 #FF7F00 - `' A4 m  O  A
82 橙红色 #FF2400 + R+ b! s/ R' }
83 淡紫色 #DB70DB   z& p% a$ F- M- N4 ^1 q( X
84 浅绿色 #8FBC8F $ Y6 I# o) I& c2 b: J/ c
85 粉红色 #BC8F8F 1 b$ F2 ~# x8 i  a8 f
86 李子色 #EAADEA 0 w' k6 D9 A4 {( c4 E
87 石英色 #D9D9F3
; I0 \$ ?( N7 `" t6 d/ |88 艳蓝色 #5959AB $ T, a5 [' S3 r6 T3 ]& U7 _0 H
89 鲑鱼色 #6F4242
; ]2 {9 e" S  C. K# ^7 b' n' H90 猩红色 #BC1717 % ?6 c6 y0 L0 i( L/ H
91 海绿色 #238E68
  T6 q; l: ]7 v+ }92 半甜巧克力色 #6B4226 % j' ?7 K/ J  e1 ?: D& k
93 赭色 #8E6B23 + o; [, \+ a0 O
94 银色 #E6E8FA
(这个是银色)2 p( L0 d) A( n
95 天蓝 #3299CC & W% g$ I7 p1 ~4 a1 b) q
96 石板蓝 #007FFF
: `, e8 R6 e# |. H& W. f97 艳粉红色 #FF1CAE
* j, ~  Z1 d; a. v( W98 春绿色 #00FF7F / h& B' K5 k" u. d- Z: r
99 钢蓝色 #236B8E 4 y  Z- {4 t2 G7 F3 d
100 亮天蓝色 #38B0DE ) n! Q2 H( i) {) e+ j7 K( l
101 棕褐色 #DB9370
# d3 p1 a3 a0 ]1 b5 E4 u) ?" s+ K102 紫红色 #D8BFD8 - v+ }9 k* s* b+ x5 e
103 石板蓝色 #ADEAEA " [( ]8 z2 ?$ ~9 ~5 J) @
104 浓深棕色 #5C4033 7 \( F& P4 g; h6 @. P+ Y
105 淡浅灰色 #CDCDCD 8 Q; ?; u- ~9 d* a; I
106 紫罗兰色 #4F2F4F
! C# O7 F" R( s$ T: j107 紫罗兰红色 #CC3299 3 w" Y8 \& R* J% [. [1 j  _+ X
108 麦黄色 #D8D8BF
1 l+ v$ o- n" i7 A6 u. I! f109 黄绿色 #99CC32

7 J8 p+ S6 e1 M8 _& X( p; J
/ r! E5 @( h0 D8 \( X" e; r" X" {


转载请保留当前帖子的链接:https://www.beimeilife.com/thread-17367-1-1.html 谢谢
发表于 2016-6-24 11:49 | 显示全部楼层
table=560,#ff9999], ^! n8 W8 Y9 e3 m9 x! }. y
[tr][td]
  U- Z! y4 e. V+ \
5 |6 }: a: w& |) b7 _6 g6 J) t+ P
内容
[/td][/tr]
# c" j1 I, N( ^4 s[/table<p></p>. p: I" M0 s. P6 q9 {9 {  L4 @
7 {8 h1 Q/ Z4 F9 ^

' R& R! E2 d" W# a  |3 G$ L; P?
发表于 2016-6-24 11:54 | 显示全部楼层
http://sq.k12.com.cn/discuz/blog-1040829-9709.html

使用高级回帖 (可批量传图、插入视频等)快速回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则   Ctrl + Enter 快速发布  

发帖时请遵守我国法律,网站会将有关你发帖内容、时间以及发帖IP地址等记录保留,只要接到合法请求,即会将信息提供给有关政府机构。
快速回复 返回顶部 返回列表