解析:
hi.baidu/tchzx/blog/item/c8a3d613131cae025baf53b0
跟我一起玩百度空间CSS教程+090+ (从"零"开始学玩百度空间)
hi.baidu/tchzx/blog/item/c8a3d613131cae025baf53b0
谭诚工作室: hi.baidu/tchzx
1.让你看懂css各个参数hi.baidu/tchzx/blog/item/1e0453e7c351052eb838200d
2.百度空间CSS使用说明hi.baidu/tchzx/blog/item/b360d33fddd2b0c27c1e714a
3.怎样编写CSS的! hi.baidu/tchzx/blog/item/d75fd7a2f36821adcaefd0e1
4.CSS代码解密hi.baidu/tchzx/blog/item/f106f71f339b06f5e1fe0bfe
5.一个CSS的漏洞hi.baidu/tchzx/blog/item/c1e74cfb9c6c8164024f560d
6.增加自定义模块功能hi.baidu/tchzx/blog/item/c207c91b9f69d7faae513303
7.更换主体及文章的背景hi.baidu/tchzx/blog/item/f7b0d609ad57ba82d0581b15
8.透明flash代码hi.baidu/tchzx/blog/item/5012e1cd15168a510eb345e3
9.百度空间十大宝藏hi.baidu/tchzx/blog/item/7e3daa6eb9da40da80cb4a62
10.制作个性化的标题栏hi.baidu/tchzx/blog/item/ae077109a6518aaf2fddd434
11.看到更多的百度空间hi.baidu/tchzx/blog/item/dbe16c634f5e47600d33fa07
12.百度空间的8个优缺点hi.baidu/tchzx/blog/item/75d054432e8b9e119213c606
13.专栏分割线的代码修改hi.baidu/tchzx/blog/item/32c416df0880ac***********
14.添加自己的LOGO图片hi.baidu/tchzx/blog/item/0bee1a9599002e087af48000
15.宣传百度空间的方法hi.baidu/tchzx/blog/item/a8f9758b7e459512c9fc7a59
16.添加多首背景音乐hi.baidu/tchzx/blog/item/5339282e42b2bd504ec22617
17.设置透明背景图hi.baidu/tchzx/blog/item/f4cb90dd7fad***********ddb6
18.更改空间的鼠标样式hi.baidu/tchzx/blog/item/50c2c15cc3d17f43faf2c0b6
19.在空间里加入滚动条hi.baidu/tchzx/blog/item/702631d319d09a003bf3cfb6
20.透明的背景音乐的播放器hi.baidu/tchzx/blog/item/97f7b909d38ada246a60fbb6
21.透明个性化滚动条hi.baidu/tchzx/blog/item/3013b5fbeaff41224e4aeab6
22.给链接添加背景色效果代码hi.baidu/tchzx/blog/item/effb6427fc39db03908f9db6
23.显示"点击给你发消息"怎么在空间做! hi.baidu/tchzx/blog/item/62e02f3893d9c524b9998fb6
24.去掉文章题目下划线hi.baidu/tchzx/blog/item/ce8c044f1019db36aec3abb6
25.常用插入图片位置的代码hi.baidu/tchzx/blog/item/83257c89c9b823b30e2444b5
26.如何隐藏播放器而不影响音乐播放hi.baidu/tchzx/blog/item/e4233edbfb147e66d1164eb5
27.如何有字体阴影hi.baidu/tchzx/blog/item/b1d78094e72b511ed31b70b5
28.自制闪字空间名称hi.baidu/tchzx/blog/item/df49ca114a626b10b8127bb5
29.解决回车换两行的问题hi.baidu/tchzx/blog/item/b420a086e4fe533e66096eb5
30.调整一下行距hi.baidu/tchzx/blog/item/b8bc514e84b1fd09b2de05b5
31.让空间拥有精美flash背景hi.baidu/tchzx/blog/item/5fc12af5ea17b525bd3109b5
32.让空间自动弹出对话框！hi.baidu/tchzx/blog/item/5339282e4cd0b7504ec226b5
33.修改blog显示的文字颜色大小hi.baidu/tchzx/blog/item/691c36ad2e075a094a36d6b5
34.如何让你的浏览器滚动条变色hi.baidu/tchzx/blog/item/af686238d73fbd2396ddd8b5
35.为评论和链接加上图片hi.baidu/tchzx/blog/item/b2c26759e6c5f82a2934f0b5
36.如何在"其它"下面加上图片hi.baidu/tchzx/blog/item/6c1f975228ca5e0e0df3e3b5
37.百度空间的名称如何用艺术字？hi.baidu/tchzx/blog/item/0738f***********cec09fa93b5
38.百度空间文字发光的方法hi.baidu/tchzx/blog/item/d5b9ff19f8f01a7adbb4bdb5
39.文字快速插链接hi.baidu/tchzx/blog/item/ca2b7e3166bd9f19eac4afb5
40.空间模块巧移动hi.baidu/tchzx/blog/item/b4abaa4b8efb5ff083025cb4
41.个性化你的IP显示，自定义颜色hi.baidu/tchzx/blog/item/378ed71659cc8718962b43b4
42.全透明hi.baidu/tchzx/blog/item/c12a7a1e97f322f41ad576b4
43.空间背景半透明hi.baidu/tchzx/blog/item/b4e8bda1faf95e8b461064b4
44.如何在百度空间的文章标题周围加花边图案？hi.baidu/tchzx/blog/item/55a6221fbf22fdc8a68669b4
45.关于百度空间照片大小限制的问题!!! hi.baidu/tchzx/blog/item/f7b0d609ab36b082d0581bb4
46.如何在百度空间发表文章时插入FLESH动画？hi.baidu/tchzx/blog/item/f106f71f32c101f5e1fe0bb4
47.怎样换百度空间的背景hi.baidu/tchzx/blog/item/c94729dd492b50d98c1029b4
48.做分割线的方法hi.baidu/tchzx/blog/item/f6fbb77e***********dd7dab4
49.在百度空间里面添加自己的特效hi.baidu/tchzx/blog/item/69db8044561f364c500ffeb4
50.在文章中快速插入图片hi.baidu/tchzx/blog/item/437f5eee9b8a79fbb3fb95b4
51.添加计数器的两种方法hi.baidu/tchzx/blog/item/0731f5d3cecb3ddfa8ec9ab4
52.如何在空间顶部加入图片hi.baidu/tchzx/blog/item/4b9b8cd437fbab01a08bb7b4
53.发表评论框的图片hi.baidu/tchzx/blog/item/b4abaa4b8ef45ff083025cab
54.改变空间主页名称和简介的字体大小hi.baidu/tchzx/blog/item/7e3daa6e94237dda80cb4aab
55.给超链接添加按钮效果hi.baidu/tchzx/blog/item/95f73d292412ccfe98250aab
56.如何给评论框添加背景hi.baidu/tchzx/blog/item/c26ece17518b4b09c83d6df9
57.Iframe 用法的详细讲解hi.baidu/tchzx/blog/item/e23e207f172e2b0828388a8e
58.背景图片素材01 hi.baidu/tchzx/blog/item/bc11d02aa2db092dd52af10f
59.图片素材*********** hi.baidu/tchzx/blog/item/6d12563d821675ee3c6d970e
60.我的自定义设计 hi.baidu/tchzx/blog/item/3c6ab5b731ac21f431add193
61.CSS鼠标样式大全 hi128/?250/action_viewspace_itemid_37
62.跟我一起玩百度空间的音乐和视频+ hi.baidu/tchzx/blog/item/398833a85082a0b1ca130c21
63.为<好友列表>增加一个滚动条 hi.baidu/tchzx/blog/item/b54a0bf4d32be5ef7709d70b
64.空间模块巧移动 + 文字快速插链接 hi.baidu/tchzx/blog/item/d6369b82c9d0e2bf6d811914
65.怎么去掉百度空间里模块的框框！hi.baidu/tchzx/blog/item/5012e1cd2f64b0510eb345b1
66.基本颜色代码+ hi.baidu/tchzx/blog/item/e3f0317aa7d065ed2f73b329
67.在你的空间中加入幽默元素.. hi.baidu/tchzx/blog/item/5612858b86b287d3fc1f10f0
68.百度空间吧[精品]贴+ hi.baidu/tchzx/blog/item/06cf65d06bb7be8fa1ec9cf9
69.如何在博客上---中--下加入图片（时钟）hi.baidu/tchzx/blog/item/8e2cb0452fc7b226cefca333
72.教你10个你未必知道的CSS技巧! hi.baidu/tchzx/blog/item/ee3cb41c0680918b86d6b60e
73.用CSS进行百度空间样式设计! hi.baidu/tchzx/blog/item/f7b0d609a75eac82d0581b0c
74.百度空间自动友情链接 hi.baidu/tchzx/blog/item/f235a***********b2b7dc98
75.一起玩百度空间帮助 hi.baidu/tchzx/blog/item/e4233edbfee96366d0164e98
76.一起玩百度空间榜单 hi.baidu/tchzx/blog/item/5173043b98a1f8ea15cecb99
77.点对点宣传百度空间 hi.baidu/tchzx/blog/item/e859cc13444c3823dc540164
78.百度空间常见27+问题 hi.baidu/tchzx/blog/item/9636b38f8c02a5eef11f365a
79.怎样让百度、Google搜到你的博客 hi.baidu/tchzx/blog/item/3c6ab5b70df03df430add15f
80.如何加上一个个性时间网页上？hi.baidu/tchzx/blog/item/f467a7ec9522603d279791a5
81.教你怎样让背景自动更新,包括头背景 hi.baidu/tchzx/blog/item/92eb968f3bd93afa503d927a
82.在 CSS 中关于字体处理效果的思考 hi.baidu/tchzx/blog/item/4ac6be3876097ac2d4622526
83.如何置顶文章及美化自定意模块! hi.baidu/tchzx/blog/item/6c1f97523edf440e0df3e382
84.如何美化页眉部分 hi.baidu/tchzx/blog/item/d6f1ecc4d2bb75a98326ac83
85.更换背景及滚动轴颜色和空间半透代码 hi.baidu/tchzx/blog/item/4dd018306adb8e99a8018e8c
86.如何设置标题.简介及文章字体为光晕字 hi.baidu/tchzx/blog/item/55a6221f8acae6c8a786698c
87.用CSS来控制网页背景 hi.baidu/tchzx/blog/item/cce94b08ec6526950b7b8228
88.CSS产生的特殊效果 hi.baidu/tchzx/blog/item/e763a11ebdb7c61f***********
89.用Css控制IE5.5浏览器中滚动条 hi.baidu/tchzx/blog/item/4dd0183097408399a8018e29
90.css语法(百度空间) hi.baidu/tchzx/blog/item/e5e21ed8ac5b8a3532fa1c29
制作圆形：要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID
<div id="circle"></div>
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：
#circle {
width: 120px
height: 120px
background: #7fee1d
-moz-border-radius: 60px
-webkit-border-radius: 60px
border-radius: 60px
}
2
制作椭圆形：
椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作
<div id="oval"></div>
设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：
#oval {
width: 200px
height: 100px
background: #e9337c
-webkit-border-radius: 100px / 50px
-moz-border-radius: 100px / 50px
border-radius: 100px / 50px
}
3
制作三角形：
要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。
<div id="triangle"></div>
#triangle {
width: 0
height: 0
border-bottom: 140px solid #fcf921
border-left: 70px solid transparent
border-right: 70px solid transparent
}
4
制作倒三角形：
与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：
#triangle {
width: 0
height: 0
border-top: 140px solid #20a3bf
border-left: 70px solid transparent
border-right: 70px solid transparent
}
5
制作左三角形：
左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。
#triangle_left {
width: 0
height: 0
border-top: 70px solid transparent
border-right: 140px solid #6bbf20
border-bottom: 70px solid transparent
}
制作菱形
制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。
#diamond {
width: 120px
height: 120px
background: #1eff00
/* Rotate */
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
/* Rotate Origin */
-webkit-transform-origin: 0 100%
-moz-transform-origin: 0 100%
-ms-transform-origin: 0 100%
-o-transform-origin: 0 100%
transform-origin: 0 100%
margin: 60px 0 10px 310px
}
制作梯形：
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。
#trapezium {
height: 0
width: 120px
border-bottom: 120px solid #ec3504
border-left: 60px solid transparent
border-right: 60px solid transparent
}
制作平行四边形：
平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。
#parallelogram {
width: 160px
height: 100px
background: #8734f7
-webkit-transform: skew(30deg)
-moz-transform: skew(30deg)
-o-transform: skew(30deg)
transform: skew(30deg)
}
星形：
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。
#star {
width: 0
height: 0
margin: 50px 0
color: #fc2e5a
position: relative
display: block
border-right: 100px solid transparent
border-bottom: 70px solid #fc2e5a
border-left: 100px solid transparent
-moz-transform: rotate(35deg)
-webkit-transform: rotate(35deg)
-ms-transform: rotate(35deg)
-o-transform: rotate(35deg)
}
#star:before {
height: 0
width: 0
position: absolute
display: block
top: -45px
left: -65px
border-bottom: 80px solid #fc2e5a
border-left: 30px solid transparent
border-right: 30px solid transparent
content: ''
-webkit-transform: rotate(-35deg)
-moz-transform: rotate(-35deg)
-ms-transform: rotate(-35deg)
-o-transform: rotate(-35deg)
}
#star:after {
content: ''
width: 0
height: 0
position: absolute
display: block
top: 3px
left: -105px
color: #fc2e5a
border-right: 100px solid transparent
border-bottom: 70px solid #fc2e5a
border-left: 100px solid transparent
-webkit-transform: rotate(-70deg)
-moz-transform: rotate(-70deg)
-ms-transform: rotate(-70deg)
-o-transform: rotate(-70deg)
}
六角星形：
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。
#star_six_points {
width: 0
height: 0
display: block
position: absolute
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid #de34f7
margin: 10px auto
}
#star_six_points:after {
content: ""
width: 0
height: 0
position: absolute
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid #de34f7
margin: 30px 0 0 -50px
}
六边形：
六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。
#hexagon {
width: 100px
height: 55px
background: #fc5e5e
position: relative
margin: 10px auto
}
#hexagon:before {
content: ""
width: 0
height: 0
position: absolute
top: -25px
left: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 25px solid #fc5e5e
}
#hexagon:after {
content: ""
width: 0
height: 0
position: absolute
bottom: -25px
left: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 25px solid #fc5e5e
}
心形：
心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。
#heart {
position: relative
}
#heart:before,#heart:after {
content: ""
width: 70px
height: 115px
position: absolute
background: red
left: 70px
top: 0
-webkit-border-radius: 50px 50px 0 0
-moz-border-radius: 50px 50px 0 0
border-radius: 50px 50px 0 0
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
-webkit-transform-origin: 0 100%
-moz-transform-origin: 0 100%
-ms-transform-origin: 0 100%
-o-transform-origin: 0 100%
transform-origin: 0 100%
}
#heart:after {
left: 0
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
-webkit-transform-origin: 100% 100%
-moz-transform-origin: 100% 100%
-ms-transform-origin: 100% 100%
-o-transform-origin: 100% 100%
transform-origin: 100% 100%
}
蛋形：
蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。
#egg {
width: 136px
height: 190px
background: #ffc000
display: block
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%
}
无穷符号：
无穷符号可以通过border属性和设置伪元素的角度来实现。
#infinity {
width: 220px
height: 100px
position: relative
}
#infinity:before,#infinity:after {
content: ""
width: 60px
height: 60px
position: absolute
top: 0
left: 0
border: 20px solid #06c999
-moz-border-radius: 50px 50px 0
border-radius: 50px 50px 0 50px
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
}
#infinity:after {
left: auto
right: 0
-moz-border-radius: 50px 50px 50px 0
border-radius: 50px 50px 50px 0
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
}
消息提示框：
消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。
#comment_bubble {
width: 140px
height: 100px
background: #088cb7
position: relative
-moz-border-radius: 12px
-webkit-border-radius: 12px
border-radius: 12px
}
#comment_bubble:before {
content: ""
width: 0
height: 0
right: 100%
top: 38px
position: absolute
border-top: 13px solid transparent
border-right: 26px solid #088cb7
border-bottom: 13px solid transparent
}
步骤阅读
