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

m ]%YHNU0由于系统升级  今天上来发现我BLOG原来的哪个用的共享的模板没了 

:E-C2c~#Dv4X6`0现有的还没发现喜欢的  就想自己查查怎么用caa做  转一篇文章给大家图腾CG博客:Z\.T#b `^

其实有时间真能做出个自己的来图腾CG博客i^1v:ntp8? FOR"Iz

aw?%fl"N6@mu0/*************************************************************/
Py(npi&aR0JWm0/**                                                         **/
t-e`G1|hx0/**   X-Space V1.0 官方模板 Sina Style.Yellow               **/图腾CG博客%BH8uLs9J
/**                                                         **/图腾CG博客%D1b'CI$o.z
/**   (C) 2001-2006 Comsenz Technology Ltd.                 **/图腾CG博客&A(xy4B,g
/**   http://x-space.discuz.net                             **/图腾CG博客8RC"hyWj)@.|&_}
/**                                                         **/
VCyn7kkCq0/*************************************************************/图腾CG博客 K(?NK9?J
图腾CG博客*K g(q/Aa"r%uLNF
图腾CG博客[N1fL(]
Y R(t$L
/*************************************************************/图腾CG博客Pg+Y8VO]7J
/********************************************* 基本布局风格 **/图腾CG博客:M y _#q${
/*************************************************************/
Q.W@*OC4H:A4@f&Pl0body {图腾CG博客Nkg T Sr
        background: #D7D7D7;这里是最底层背景，在没有设置背景图片的时候的背景色设置，不用去动，也可以去掉。图腾CG博客Y4?}7W@q$@,mx
background:url(.img);这里红色部分是背景图，你可以随便选择你喜欢的。注意一定要放在（）里
2N9Y&c!OV+]0bacdgroud:repeat:repeat-y;由于图片大小的关系，这里设置了图片重复的方向，Y是向纵向
U3UZs M8G y0bacdgroud:repeat:repeat-x;这里也是，Ｘ表示向横向
1BS+Q1P @K3@a0background-position : 45% 90%;这里是设置的背景图片的重复起始点，可以修改来达到背景对于主页面的协调background-attachment : fixed;这个是让背景图定位，可以去掉，去掉后背景图会跟随主页面下拉而下拉．图腾CG博客[5d1fY\.kb h
}
Bi i+o!um$}1D0
c-@$z3gr-a2@`rM
e0
^D1H)w)hJ0/*最外层容器*/图腾CG博客S|+KL:Dk
.wrap {图腾CG博客:B
{\ F tPy
        background:#FFF url(images/sinastyle/topbg.gif) repeat-x 0 2px;
oUN F1y1vKK0        border: 1px solid #969694;图腾CG博客`fY(BG5IITK
        padding: 20px 2px;
K*mf6Qb'r0        margin-top: 1em;
G/Z9~~V8PW0        width: 766px;图腾CG博客 b'PAm?
m:e;L.Q
        w\idth: 760px;　　
:u'_w+l.cj0}
OS_MRYI7YyY0
"APB'W$OrFT0上面这些是外层容器的大小，也就是说整个外部页面的系统定制，这个就不要动了．虽然可以改动来加强ＢＬＯＧ的效果．图腾CG博客#ycbE F-JS

#t@v+C!U~8I8|(S$|0/*************************************************************/图腾CG博客"oM7Z&O8Ham7QV2nL
/************************************************* 顶部风格 **/图腾CG博客m'S,j
J1GZ
/*************************************************************/图腾CG博客*Ww'O'_5WVO*l:h t
这里开始是主页面的设置，顶部风格意思就是最上面的ＬＯＧＯ文字部分．
*Y#w~6CN'O"JH`0图腾CG博客#_z6jqT1@h
#header {
c4?4yB5t6]6mF?'S0        background: #FFF url(.img);这里是放置选用的顶部ＬＯＧＯ的链接地址的地方，红色部分．图腾CG博客xWX6aadR^)}4i
V
height: 250px;这里是设置的图片的高度，根据图片的实际情况定，以求不变形
&XsX/F/vvz/ok0margin-top:0.4em;这里是指图片离最上面的距离，可以改，不过实际情况可以不去更动
,d$?g5Fol0margin-bottom: 0.4em;这和上面是一样的，不过是下面．
,jJL(n,G0}图腾CG博客*ahv3TF#s(l

k m&tYo0
v:A!F.c1B.\k.yR0/*标题*/　　　　　　　　　　　　　　这里是顶部ＬＯＧＯ中的ＢＬＯＧ名称设置图腾CG博客*QLZ3Zf$S
#spacename {
8k5S:z}*ah9u/HF0        border: 1px solid #B4D8F2;
maRFEkk0        background: #829521;　　这里设置文字后的背景色，根据喜欢自己选        图腾CG博客I2r&k,j;g l v*E"E
        opacity: 0.7;图腾CG博客:@!l;HX(_H}z
        filter: alpha(opacity=70);
(V)x&YCdw ?t(@
T0        margin-left: 20px;
0V7[a*]4h
S~y!m P0margin-top: 10px;
l@bk(_W0        padding: 5px;图腾CG博客e;P)J$J4I
        position: absolute;
2f7[tg8@%J0        top: 4em !important;
B[h:uF8X7V0        top: 3em;
0q9j_ P8IS,g.G+K#`R0        width: auto;图腾CG博客*E-\S#sJkL"GL
        height: 35px;　　这里是根据你ＬＯＧＯ图片的高矮可以设置整块文字区域的上下位置．
#O,wXLt0}图腾CG博客U6@U m}*X
#spacename * {
W(w~x;s`Q SD0        color: #000;　　这里是文字的颜色图腾CG博客!q2y2p"Am5{6|
font-size : 12pt;　　　　　　文字的大小
i[dJw)w%n9t"`&xa0}
(D5{~B9NW5eu'B0
_
zDe9T \/p.b"VA0
KVG+l~%d-o0
4m|2u!gW0#poweredby a {
lE&Ks!Vj.vv*|0        color: #333;图腾CG博客E`KIB3w
}
;Hi.r6W%b+o0#poweredby a:hover {
S$DG9tx4U'kW0        color: #333;图腾CG博客_}i8N8ob
}图腾CG博客#o9K*y)O WAM

PC-D)t,_2C0另外，我们还可以在左边主页面的设置里把这个文字区域进行拉伸，大家可以交替进行设置，以达最佳效果．图腾CG博客,MVm-f~y*g;mL
` i

^6]6v$TZ0/*导航*/　这里是设置显示和好友，日志，图片和文件的小区域#menu {图腾CG博客 o.TK\sj)?V
        background: url(.img);这里仍然是这个区域的背景图放置地址，如果不想用图可以改成background:#ffffff红色部分是ＣＳＳ里１６进位的颜色代码，可以任意按自己喜欢改．
DHK'B%`r0width: 580px;　背景的宽度，可改        
@)Ow8ZEvX.[0height: 28px;　背景高度，可改图腾CG博客etA7Q"j5o^9_%^@2F
        float: lfet;　这里是让背景图上文字始终在右边显示，如果想在左边，可以把ＬＦＥＴ改成ＮＯＮＥ        图腾CG博客"Jc@"?/~-`7m5}p
margin-top:200px;
G4Q$a[,YC0line-height: 28px;
&I%tlF5{,nF.B0border: 2px dotted #000000;　　这里是设置导航条边框的颜色和粗细,也可以把这部分去掉不要.图腾CG博客/Y*DH/EXO
图腾CG博客Ic)X"@hU*t:O(x
}图腾CG博客4n?7b]PA\z
#menu ul {
V*x+p b:H;ey
|}0        margin: 0;
{1i0K"\\/[0}图腾CG博客!L;K$?
oyP`$g)?
图腾CG博客V/{%D,]0]~
#menu li a {
/A1vt'ceJIQ{0        padding: 0;图腾CG博客xG[ pF;HUG%ab6}
        height: 28px;
(|T:C$t?)CmP7Y0        background: none !important;
dD:N{8s'b&Uj0}图腾CG博客G9U}w7`&V
g
#menu a:hover {图腾CG博客;t
Y.rY7}
        color: #FFFFFF;这里是导航边文字颜色设置.
7OB#zr$f(a0        background: #333 !important;
srSl/z6Kflb5b
]0}图腾CG博客pZVppE*yq4l%Dy

!n"tOTwtdB0/*主体容器*/     这里是指主显示主内容的部分的设置.
,u8By{'UM"Ee$F0`i0#content {图腾CG博客 p)P [.SVQ
        background: url(.img)这仍然是背景图的放置位置.图腾CG博客2f"D:P$p$a'@7S
}图腾CG博客VN2@-]2kPP,MT

R+iQ$~8y ?Z0图腾CG博客b3^e
C'_
/*************************************************************/图腾CG博客*ff#\`/SE]/^1V
/*********************************************** 侧边栏风格 **/
fEMXs qD'A0/*************************************************************/
7m9e!y%j%zF5m0
u n(T+e;Fk L|0图腾CG博客)P])j!?NXI

*u,m8AD,qV,?0/*侧边标题*/   主显示区域有两部位,这里是窄的一部分的设置图腾CG博客f2C](t AZW\
#sidearea h3 {
6KE#nK.A'i+n0        background: #FFEDB8 url() repeat-x;这是小区域系统列表后的背景图放置地址,如用户菜单,搜索,日历时间等等.图腾CG博客7v&GJ(sv:d a)F:@
        color: #600;这里是列表文字的颜色设置        
+@#qw} T}aT0height: 22px;
u)Iu1p0G%k0        line-height: 25px;图腾CG博客aSn9GE-N$ze2B
        border-bottom: 1px solid #600;列表显得的内容部分的颜色设置        
#w+D0P8e?*R)O0padding-left: 0.8em;图腾CG博客3f-AVu L6o\!S0AK
}
-J!gZjd`O0图腾CG博客b K6Kq&g8wiM
.sideblock {
9j.v*j1o7L0        border: 1px solid #600;
t[-Y9^Yj8kN0        background: #FFF url() repeat-y left;这里是整个小区域的背景图片放置的位置和上面的是不一样的,在选择图片时注意色调的合协.        
c5X ~1\Zq|_-X0margin-bottom: 2px;图腾CG博客.Vl:jgV1y
}
@7]p hR[*U(X mnU0
Xx*rI4qh.KkD0#sidearea li {
,P)}S5R uH)m+| H0        border-bottom: 1px dotted #9A9A9A;
UPf?U#q-} m0        line-height: 1.8em;图腾CG博客$V0}VtB:w8W7j
}
OKAW
j3A0
x[DbE Kg }+^9Y!z0/*用户头像*/图腾CG博客tH u@\E-\'f
#useravatar {
v y{*Qn-]0        padding-top: 0.5em;
7L3uh9@b*j ny3P0}图腾CG博客&['SK0f,X9@aC&S2e
#useravatar img.faceimg {图腾CG博客&vL)fH'e#Z)xN
        border: 1px solid #6A6A6A;
(ld0A)j4D$I+s]"L0}
@&c RG;E3_0#username {图腾CG博客e*Digr^
        color: #600;

FZV"?WI*K w0}图腾CG博客AT1x x8A!T ]@8G

q([#UI4J-Oa0/*用户菜单*/图腾CG博客*ntd-],]
#useraction li {
6S2I+JMTr0        border: none;图腾CG博客8x3pN}E yD
}图腾CG博客nM:@^,~'c
~
#useraction li a {图腾CG博客*eW t^ E'B
        margin-left: 0.3em;
"x0f[v1Ehq0}图腾CG博客(eHi2\i}Lx

Dm*aw+?c:U8c0/*搜索*/图腾CG博客6Z {;}Iz-ab
#searchkey {
|/v+AWXB sz0        border: 1px solid #6A6A6A;图腾CG博客 M:Fk.fG'Y;AZj
}
0r!Ln;Fa[W DW1u*b^0#dosearch {
:t+}!V6?%qh0        border-top: 1px solid #F7FBFF;
J"`wR8TI|SMm0        border-right: 1px solid #6A6A6A;图腾CG博客tv/wS$k%J/F
        border-bottom: 1px solid #6A6A6A;图腾CG博客2E9{,Ku lb~6z\zN
        border-left: 1px solid #F7FBFF;图腾CG博客;^q#{
D8`z
        background: #E5FFE8;图腾CG博客pix&ru
        color: #600;
m
J1j AepBM b5h0}图腾CG博客E*KFm5_Q8D*f|1B

3f8D+]{L\0/*RSS及其他按钮*/
6g OK){(NaXv
\N0#sideicons li {
Uf\5p [4L/p8L0        border: none;
E%Yqxm'k)~T!i6J0}图腾CG博客 xC2l\&}["Ft0o

.J5K.w.a5T(B;r-r&d0图腾CG博客Z&`d;{|;}%iZ
/*************************************************************/
:d3A_ J8L0/********************************************* 主显示区风格 **/图腾CG博客 Ou zo*B8h?
/*************************************************************/图腾CG博客~+D@9]6d
W-r
图腾CG博客 O3tP'IC0r,}+b

/OF)^*dw4C'sA0/*主显示区大标题*/                     这里主内容页面大区域的设置
|g
z};o!P@;v&K0图腾CG博客3c&z-jv4q~
#mainarea h3 {background: #E0E0B7 url(images/sinayellow/maintitleg.gif);红色部分背景图的放置位置,我现在选用的系统定制的,想换的可以自己换.        图腾CG博客^:K b,Cm/D
height: 26px;  图腾CG博客%O] Ic*V tT H/h;A
        line-height: 28px;
^'_'k O)Za0?0        color: #333;   文字的颜色图腾CG博客@OW%A-}+K!N:@
        border: 1px solid #6EA630;边框的颜色和粗细
DF]7w*l0        padding-left: 0.5em;
%Vl0H {%a$g3sn0}图腾CG博客1~+q+voG3B9X t v

6ot5MXB|U%r0/*主显示区小标题（用于文章内容区）*/
p,jIO)W#z ]p5v0#mainarea h5 {

L,Da8j8m ^[-v c3H&w0        color: #600;文章所显示的颜色图腾CG博客_0OWN1c*w:C
        border-bottom: 1px solid #6A6A6A;
[)l?&gGh-C6vV0}
BEk/b;aA9s0图腾CG博客+URtl!Qb-?H$|6i9\
/*自定义字段*/
7Rj }Q~0.addoninfo {图腾CG博客2M Jj%JU2Cu
        border: 1px solid #C9E4AC;图腾CG博客6iceS3l;IR
        background: #FFFFF2;图腾CG博客6wC5T8sM)j
}图腾CG博客2L
a,Q0?-w0hp

{0J {MCs8x?1c0图腾CG博客E eLd N X^fAOPR
图腾CG博客EKk3tkzS3}
/*公告*/图腾CG博客g/Fe;A%d.R
#announcement {
Jc"byzF(H4mj*J G0        border: 1px solid #C9E4AC;
e-Gd8wz0        background: #FFFFF2 url() no-repeat 0.5em;这里是用户公告部分的背景图放置位置
D6]H.M`;g x4X0        color: #600;公告文字颜色图腾CG博客2S.AN`/J_6C#{
}图腾CG博客?z}JW
Oq4_ y

$HU,{_.Wc3Bry0图腾CG博客ym,e7k3r^,I
其实到这我们已经把我们的BLOG已经彻底的焕然一新了,我们并没有对CSS内核时行大的改动,只是对使用的文字,背景稍加改动而已,我们要的只是一个外观这就足够了.对于CSS内核如果要改那是牵一发而动全身,这对我们这些对CSS不精通甚至根本不懂的人是难上加难的.等以后我们从根本上了解了CSS语法的时候我们再试着来改吧.
c6r!r#D$AGS0
JO~\Yx&px O(JP;v8DeO0只要大家认真看一下我的注解,我想建立自己的个性BLOG并不是什么难事.好了,去试试吧.图腾CG博客#}2_rAG3Psb%w[.}
图腾CG博客L^vG"o.W*z6y
建议大家不要用正在使用的BLOG做试验,可以用另一个不用的.至于大家还有什么不明白的地方可以跟贴问我.我会尽可能的回答,如果我回答不上那只能让你B4了.图腾CG博客@aJXwUF$h

4o(p"Y3Mfro i0有的我没有注解的地方并不是不能改,而是保持系统原样就可以了,等大家熟练之后可以再进行更细微的设置.图腾CG博客H+W(r%tcB E.z y
另提供一个16进位CSS颜色代码的抓色小工具,大家可以去http://jysq.net/59/viewspace_10166下载.
z@7G q8US
C0图腾CG博客 D}$JMm~
希望大家的做的过程中能多了解一些CSS语言,英文好的人不妨有机会也教教我.