用acc自己做一喜欢的模板 可惜最进好忙

由于系统升级  今天上来发现我BLOG原来的哪个用的共享的模板没了 图腾CG博客&d/yJ%o,\{C

?%V@+HUY%STbf0现有的还没发现喜欢的  就想自己查查怎么用caa做  转一篇文章给大家

其实有时间真能做出个自己的来图腾CG博客O,zV"Kw#l5~ x
图腾CG博客*}3_T.AOu"z5go
/*************************************************************/
(l_4YOu?0/**                                                         **/
1J"iZ9c~~ Fq0/**   X-Space V1.0 官方模板 Sina Style.Yellow               **/
;gg };D Sxi
PR.e'?0/**                                                         **/图腾CG博客Lq#[4K7s:N7T9A l"afb
/**   (C) 2001-2006 Comsenz Technology Ltd.                 **/图腾CG博客&IUHMe1e
/**   http://x-space.discuz.net                             **/
G"V(KkNSXk%F0/**                                                         **/图腾CG博客Z6l"dH#RL1\E
/*************************************************************/图腾CG博客A6jZ FU
?k;eY
图腾CG博客m6T"f(F(?5}
图腾CG博客lt
x \v,|
/*************************************************************/图腾CG博客CC\B:?2|"m
/********************************************* 基本布局风格 **/图腾CG博客-P'@s:|/D9Y4o8g
/*************************************************************/
_eI!}?S]0body {
4iu1b$`@!g"E%Mwa0        background: #D7D7D7;这里是最底层背景，在没有设置背景图片的时候的背景色设置，不用去动，也可以去掉。图腾CG博客o8K4GV)l
background:url(.img);这里红色部分是背景图，你可以随便选择你喜欢的。注意一定要放在（）里
q5p~~o*v7y0bacdgroud:repeat:repeat-y;由于图片大小的关系，这里设置了图片重复的方向，Y是向纵向
!b/b\({W o}Fnd0bacdgroud:repeat:repeat-x;这里也是，Ｘ表示向横向
s%ds9n%kWy
H5NLs0background-position : 45% 90%;这里是设置的背景图片的重复起始点，可以修改来达到背景对于主页面的协调background-attachment : fixed;这个是让背景图定位，可以去掉，去掉后背景图会跟随主页面下拉而下拉．图腾CG博客ia.TA;Rn
}
2lRSD$PA:F0图腾CG博客k$FV7Cx3[
图腾CG博客5d7g`4{1GzRqN
/*最外层容器*/

iNZ.F ]'n7P!i+e0.wrap {图腾CG博客N](I0OL+bx3fn'Z
        background:#FFF url(images/sinastyle/topbg.gif) repeat-x 0 2px;图腾CG博客BM^zV EoZU$T
n"f
        border: 1px solid #969694;
W(r&W0j$G!r bqL0        padding: 20px 2px;图腾CG博客V.T%|YN;]
        margin-top: 1em;图腾CG博客b+xc.~l |:s:xe
        width: 766px;图腾CG博客8fa(^"l*Q6r
        w\idth: 760px;　　图腾CG博客3U/@*p4XL A"Ly
}
K Y?q\)t2D0图腾CG博客4s#B[nUL;[*b
上面这些是外层容器的大小，也就是说整个外部页面的系统定制，这个就不要动了．虽然可以改动来加强ＢＬＯＧ的效果．
Z Vc']p%n0图腾CG博客1N:UNy1Aq/t
/*************************************************************/
H/QLlAl:R0/************************************************* 顶部风格 **/图腾CG博客0p/|L$T$s+Hp\Y]
/*************************************************************/
)n Y$dxcX0这里开始是主页面的设置，顶部风格意思就是最上面的ＬＯＧＯ文字部分．
$~
dF;ae~0
7UC3] ?c$qI0#header {图腾CG博客J9D7eN%R)K
        background: #FFF url(.img);这里是放置选用的顶部ＬＯＧＯ的链接地址的地方，红色部分．图腾CG博客+K:NU+x*YA~
height: 250px;这里是设置的图片的高度，根据图片的实际情况定，以求不变形
(v!{o1K#T!]!YO0margin-top:0.4em;这里是指图片离最上面的距离，可以改，不过实际情况可以不去更动
SO8oHQ0margin-bottom: 0.4em;这和上面是一样的，不过是下面．图腾CG博客1C0` OaSD9x9Y
}
(~ji9bt;K(C y0图腾CG博客r,K.p_J-YU w
图腾CG博客7B3Wv;|9rw$c"q
/*标题*/　　　　　　　　　　　　　　这里是顶部ＬＯＧＯ中的ＢＬＯＧ名称设置图腾CG博客I(p9`~ uW^rw~hH"t
#spacename {
'zH+BSxo0        border: 1px solid #B4D8F2;
6u9i,P2E9w K7A0        background: #829521;　　这里设置文字后的背景色，根据喜欢自己选        
H|1t\c,E2v0        opacity: 0.7;
y;HJ;p4nJ'[X9F\0        filter: alpha(opacity=70);图腾CG博客]6s!o4`.D T%c_n.p
        margin-left: 20px;
(`7CFLXn1T2E0margin-top: 10px;图腾CG博客@!wJ4^F4Lq%?t
        padding: 5px;
&|j;bZ;?4l0        position: absolute;图腾CG博客,C\-HA4hwc7Yl!K
        top: 4em !important;图腾CG博客#d,Q6g*De/q"V
        top: 3em;
Z$CL:W pe5P'D A%|&m:\)Hw0        width: auto;图腾CG博客:v%QTqI[(|}Q
        height: 35px;　　这里是根据你ＬＯＧＯ图片的高矮可以设置整块文字区域的上下位置．
Fb-?XEPD0}图腾CG博客URG?rU9om6cmk
#spacename * {图腾CG博客 w/?^p!ad-X+{
Ku
        color: #000;　　这里是文字的颜色图腾CG博客-dIAp1Y.j j
font-size : 12pt;　　　　　　文字的大小
M,Tcs)y4|W4p%L0}
W/UzD4J
D},j
?0图腾CG博客e%P emK

l,hYZ\'`j)m u6h0
T6BwMR
d
gB0#poweredby a {图腾CG博客G8Z$_DW$ag]V+wQ
        color: #333;图腾CG博客-O-Q&\0H"c
}
n/[K&em`;_fH0#poweredby a:hover {图腾CG博客,@r8D.}9E
E5V
        color: #333;图腾CG博客Q Wp#FQ
}图腾CG博客HgE'^*j4\4\&X6}Y
图腾CG博客d0hDly&E"Qq
另外，我们还可以在左边主页面的设置里把这个文字区域进行拉伸，大家可以交替进行设置，以达最佳效果．
*M;i1ZUb'~0图腾CG博客:A Nbm+\X!?
/*导航*/　这里是设置显示和好友，日志，图片和文件的小区域#menu {
a$S+q6jau[:W0        background: url(.img);这里仍然是这个区域的背景图放置地址，如果不想用图可以改成background:#ffffff红色部分是ＣＳＳ里１６进位的颜色代码，可以任意按自己喜欢改．图腾CG博客B,AAyI`.Q7x)@
width: 580px;　背景的宽度，可改        
4KC%iw*}V0height: 28px;　背景高度，可改图腾CG博客{S%g5LP7W^S2[}&]
        float: lfet;　这里是让背景图上文字始终在右边显示，如果想在左边，可以把ＬＦＥＴ改成ＮＯＮＥ        图腾CG博客\"V T$b(e+{j%Z
margin-top:200px;
a!D
KCp|0line-height: 28px;
/y d5} b.R6} ~+^0border: 2px dotted #000000;　　这里是设置导航条边框的颜色和粗细,也可以把这部分去掉不要.
p7gt'@b8E3C6V.`0图腾CG博客.TIzBb
}
tG2R7sJ*B0#menu ul {
M^ \5H&B0        margin: 0;
hZ;Y~&OG
E pN,Xta0}图腾CG博客1`/XObJ~![1~

6Y$];x2do*c0#menu li a {图腾CG博客 vm,\W8}}+[k
        padding: 0;
`"Kn@;_YW0        height: 28px;图腾CG博客3o*tz.j:hV1j n
        background: none !important;图腾CG博客{qC-K.?
}
ghS6];EkW0#menu a:hover {
_ k1` v^ HzN7n0        color: #FFFFFF;这里是导航边文字颜色设置.图腾CG博客3o L[)X!Or+x'E
        background: #333 !important;
5`i2w.V2v.n/?C0}图腾CG博客v*e8cF u:x

~t#g;{kWvE0/*主体容器*/     这里是指主显示主内容的部分的设置.
&z7ni5|| mB0#content {图腾CG博客 A:hm.GZa-|-Z8G
        background: url(.img)这仍然是背景图的放置位置.
yFg|Kx%w.v%L0}图腾CG博客:Z T DZ `
v:J+vG4of
图腾CG博客A;ms;y(^NV
图腾CG博客?q2IJ^QoH4}*j
/*************************************************************/图腾CG博客`5mv:ET!G'kn8c
/*********************************************** 侧边栏风格 **/
8Ye0aj#Ac0/*************************************************************/图腾CG博客5ZE\hSn`
Sn
图腾CG博客$o9bS_Cz
图腾CG博客Wz
^ I*k?
图腾CG博客PS;dN tiyG
/*侧边标题*/   主显示区域有两部位,这里是窄的一部分的设置
&S7XuLV.uM0#sidearea h3 {
e\Z*Ci
\6^R0        background: #FFEDB8 url() repeat-x;这是小区域系统列表后的背景图放置地址,如用户菜单,搜索,日历时间等等.
%le.o5Cy},T0        color: #600;这里是列表文字的颜色设置        图腾CG博客hb2n/e3Yjtr7IPbk
height: 22px;图腾CG博客t _8BD z
_L Pm
        line-height: 25px;
Pn
t i0V1E?0        border-bottom: 1px solid #600;列表显得的内容部分的颜色设置        
6e,],t5P-D"b.N0padding-left: 0.8em;图腾CG博客!C5p]#T;U/S-tC'_
}图腾CG博客;?1^EIc:C3W3]

|q\1M8Oa&@1P0.sideblock {图腾CG博客/l n5[5j$e*frJ s
        border: 1px solid #600;
'b,u0t6w$O\/FFI0        background: #FFF url() repeat-y left;这里是整个小区域的背景图片放置的位置和上面的是不一样的,在选择图片时注意色调的合协.        图腾CG博客v0w+eq M(|
margin-bottom: 2px;图腾CG博客e/V.x5^.ep1{ q@
}
aq,gf Y*s{n0
v`v(U(G9F;n1W"r0#sidearea li {图腾CG博客's6g;Br-t{
        border-bottom: 1px dotted #9A9A9A;图腾CG博客r,|B7m8q R1p
        line-height: 1.8em;
~:`+x]L? lB0}
h a[3T
R.VjErY3p c0图腾CG博客Z9xpSzu;E&~%}xs
/*用户头像*/
)v8Ph,MD4EwP0#useravatar {
"h6lK|8|A9X?l0        padding-top: 0.5em;图腾CG博客y
[ godn
}
|C
} q0`0h9VT0#useravatar img.faceimg {图腾CG博客 R,N-m_7G5i9`0F
        border: 1px solid #6A6A6A;图腾CG博客
Xl.}1O,\7J_
}
uz-H4Y:VP5k$Y@0#username {
$v ao L}-I7A*F/G-G0        color: #600;图腾CG博客d6`.r5GNP4Z
}
6H@A&W i
f0
D3?y#_:g0/*用户菜单*/图腾CG博客f6E\#X:Hf+zD%s
#useraction li {
/wiY4y$oUQ9A&g0        border: none;
#_l_3q6l9\
iQ.XG0}图腾CG博客 c I E K\MV
#useraction li a {图腾CG博客E/]"x wqi.@ eE+ln,Z
        margin-left: 0.3em;图腾CG博客7KJ_b"Vp
}图腾CG博客/Gba0T)kM1@Z

'QbH6a!W`L0/*搜索*/图腾CG博客9?NE!A#E]
#searchkey {图腾CG博客;s[J-b}lhH@
        border: 1px solid #6A6A6A;
y7p#_9?4y:kXz;s0}图腾CG博客|Vm|sj)?&D.G
#dosearch {图腾CG博客+n0V p C"}
        border-top: 1px solid #F7FBFF;
]4f6O#X@i0        border-right: 1px solid #6A6A6A;
6tR,_y(A:uMN0        border-bottom: 1px solid #6A6A6A;图腾CG博客||e&?
y5_mZ,Lmc
        border-left: 1px solid #F7FBFF;图腾CG博客5e1W,g9K3dhJ
        background: #E5FFE8;
`%W#v1RM9n#Jq-w!d0        color: #600;图腾CG博客5fz"Z0wg#P
}
w0a%k^2IT0图腾CG博客"WJLdK3r G)x6e&QF
/*RSS及其他按钮*/
D9oPZk{)cfv0#sideicons li {
0jSgr[:\0        border: none;图腾CG博客9zt9AH&j`y3B'p
}图腾CG博客0@+V(~KK:G

%K;e on&On+\$Y!y+D0图腾CG博客vt#aC'D)ANUw
/*************************************************************/图腾CG博客7Xr:u3AC
o
/********************************************* 主显示区风格 **/
:W!zSJ+S$l#n+l0/*************************************************************/图腾CG博客m2hUaGRid7`
图腾CG博客7Os7]c:GSp{?"N!Q
图腾CG博客5oM3g7cz1Mwp+\8a jx
/*主显示区大标题*/                     这里主内容页面大区域的设置
9e"n dm rR'x(Ur0
nnWGW7W`:x6R2\9D0#mainarea h3 {background: #E0E0B7 url(images/sinayellow/maintitleg.gif);红色部分背景图的放置位置,我现在选用的系统定制的,想换的可以自己换.        
2l
`(v_-rE1h:K3c4I0height: 26px;  图腾CG博客H6UlXD`0^-E-j
        line-height: 28px;图腾CG博客 `5~I G.j
        color: #333;   文字的颜色图腾CG博客+Cq%v2I4H D)T7O{ U
        border: 1px solid #6EA630;边框的颜色和粗细
\*q|e9d(y3A,N0        padding-left: 0.5em;
(E [K$zY&g3x cE0}图腾CG博客bZ:~vS
图腾CG博客7Gx`S&kk[ P7T S9k)S
/*主显示区小标题（用于文章内容区）*/图腾CG博客cWwf1kPw
#mainarea h5 {
o%fwnj$w R%UU0        color: #600;文章所显示的颜色图腾CG博客^}9b:^.vP]n
        border-bottom: 1px solid #6A6A6A;
J2Unx|rv?)i0}图腾CG博客4r$A"A*oaP bH?

N:gzh
Mxs%j2sm*i
n0/*自定义字段*/图腾CG博客9A5y7Xc%u
.addoninfo {
$NRo&v!a0        border: 1px solid #C9E4AC;
X)L'j3a0C
Ls)U;t9N0        background: #FFFFF2;图腾CG博客2x"_y^5E5DS-S?t
}
&M DzA?0图腾CG博客 CgjNu
图腾CG博客tP5J0u9Dq8k1l q(\(L
图腾CG博客!m8pyR[NI/m M
/*公告*/图腾CG博客:]cy/H6I}w8syE
#announcement {
VV#hdol;vQ0        border: 1px solid #C9E4AC;图腾CG博客mv0V\Q'y&NY0p-M.q
        background: #FFFFF2 url() no-repeat 0.5em;这里是用户公告部分的背景图放置位置
I#sG?J8AC.]A0        color: #600;公告文字颜色
%h3yB2c%N,Y+a0}图腾CG博客r6i(O2j f'Tg
图腾CG博客:Wm7e;l8ngN

{9s
Z4}!ZZ0其实到这我们已经把我们的BLOG已经彻底的焕然一新了,我们并没有对CSS内核时行大的改动,只是对使用的文字,背景稍加改动而已,我们要的只是一个外观这就足够了.对于CSS内核如果要改那是牵一发而动全身,这对我们这些对CSS不精通甚至根本不懂的人是难上加难的.等以后我们从根本上了解了CSS语法的时候我们再试着来改吧.图腾CG博客zX6K4r0o-k a\+s

C3a r*^K6G0只要大家认真看一下我的注解,我想建立自己的个性BLOG并不是什么难事.好了,去试试吧.图腾CG博客*_|G:UmkSGd V
图腾CG博客+Y,Nm'M?/r
建议大家不要用正在使用的BLOG做试验,可以用另一个不用的.至于大家还有什么不明白的地方可以跟贴问我.我会尽可能的回答,如果我回答不上那只能让你B4了.
:BG#eW2l q8O0图腾CG博客"z I8g"PX2D
有的我没有注解的地方并不是不能改,而是保持系统原样就可以了,等大家熟练之后可以再进行更细微的设置.图腾CG博客%TWs0t~K2m1p'S"y
另提供一个16进位CSS颜色代码的抓色小工具,大家可以去http://jysq.net/59/viewspace_10166下载.
pUCXQE W1]0图腾CG博客ZM*BG+V
K]
希望大家的做的过程中能多了解一些CSS语言,英文好的人不妨有机会也教教我.