【原创】CSS最基础最基础的教程(默,我懂得的也很少)
越前龙马吧
全部回复
仅看楼主
level 2
六儿💦 楼主
那些音乐,友情连接设置我想都应该明白,我就不多说那些东西。百度自己有个那些设置的教程:http://www.baidu.com/search/hi.html#n0 ******请勿转载,此为百度越前龙马吧私有品****** ******讲解的例子全部用我自己空间,如有雷同纯属巧合****** ******可以把我写出来的代码复制到我指定的位置****** ******“;”“'”也需要复制进去******* ******我说第几行是指“#”开头****** ******改东西的时候不要忘了做副本,就是把原来的复制下来存到别的地方去,免得万一改乱了会改不回去的******* ******我仅仅讲解容易懂的东西,其他就算我明白也不知道如何讲,况且我有一半以上没明白***** ******从别人学来的我会很老实的说明,没有盗窃行为****** ******请注意看下面的回复,因为我有可能更改东西****** 
2006年08月09日 02点08分 1
level 2
六儿💦 楼主
第一项:背景 代码:body{background-image: url(http://图片地址); 指定位置:一般放在最前面就行了,然后按Enter和下面别的代码的拉开距离 固定背景特效: 代码:background-repeat: no-repeat;background-attachment: fixed; 指定位置:在背景代码后面,结合起来就是: body{background-image: url(http://图片地址); background-repeat: no-repeat;background-attachment: fixed; 例子:body{background-image: url(http://xs203.xs.to/xs203/06291/cf9391135980c2806438dbe5.jpg);background-repeat: no-repeat;background-attachment: fixed;
2006年08月09日 02点08分 2
level 2
六儿💦 楼主
第二项:鼠标 代码:CURSOR: url(‘地址’); 指定位置:一般来说在背景下面就可以了,比较随便。 这里是尘缘一梦PS提供的鼠标样式:http://penguit.bokee.com/4637175.html。主意要全部复制。 例子:CURSOR: url('http://webme.bokee.com/inc/mouse014.ani'); ******鼠标改变特效: 代码: a:hover{text-decoration:underline;color:#C0C0C0;cursor:url(‘鼠标效果')} 指定位置:见图(一般来说比较随便,贴在header上面就可以了)
2006年08月09日 02点08分 3
level 2
六儿💦 楼主
第三项:滚动条(这个我直接用我的例子,要不然会很乱) 代码:scrollbar-arrow-color:green;scrollbar-track-color:white;scrollbar-face-color:white;scrollbar-highlight-color:green;scrollbar-3dlight-color:white;scrollbar-darkshadow-color:white;scrollbar-shadow-color:green} 指定位置:放在鼠标下面就可(记住按一下ENTER,只因为这样看起来稍微整齐点,如果出错容易找) 讲解一下:应该还没有人不知道英文的基本颜色吧。我用了绿边白色的滚动条。 scrollbar-arrow-color:green;就是边缘的代码,大家可以把green改成别的颜色,例如blue,pink之类的。 scrollbar-track-color:white;就是填充颜色,你们可以把white改掉。(注意不要把双引号删除掉) 剩下的讲解也只会造成混乱。例如你想用蓝边粉色的滚动条,把所有green变成blue,把所有white变成pink就行了。
2006年08月09日 02点08分 4
level 2
六儿💦 楼主
冰蓝80提供的配色表
2006年08月09日 02点08分 5
level 2
六儿💦 楼主
第四项:置顶条 1.置顶条背景图片 条件:需要较长而且高度不大的图片 代码:#header{height:172px;background: url(http://图片地址) no-repeat} 指定位置:header的第一行(把百度带的换掉即可) 例子:#header{height:172px;background: url(http://xs204.xs.to/xs204/06315/head.jpg) no-repeat} 可以用PS自制,如下:而且把header字体变成1px,颜色改得相近就看不出来
2006年08月09日 02点08分 6
level 2
六儿💦 楼主
2.空间名称移动+大小(必须一起说T0T) **空间名称就是你给自己空间起的名字,代码是header 例子:#header div.tit{top:15px;left:20px;line-height:22px;font-size:22px;font-family:华文彩云} 指定位置:header那一板块的第4行。 讲解: top和left都是移动空间名称的东西。top说的是“上”,但是随着数字的变化可以升高和降低,left也是同样的道理。这个只能自己慢慢调整才能有自己想要的效果。 line-height指的是间距。 Font-size就是字体大小;font-family是字体样式。字体样式最好用宋体黑体等电脑自带的。 字体颜色地址:http://www.sinxiu.com/gj/ys.htm
2006年08月09日 02点08分 8
level 2
六儿💦 楼主
3.空间介绍 如果不想要可以干脆去设置----基本选项删除掉,我就给删除了= =||||。因为我的置顶条是白色底,弄掉了更干净。 指定位置:header倒数3行(虽然跟tab连接着) #header div.tit a.titlink{color:#FFFFFF;text-decoration:none} #header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none} #header div.desc{top:40px;left:200px;color:#499400;font-size:15px; font-family: 幼圆} 我想上面都解释得比较清楚了。就是改改字体颜色和大小
2006年08月09日 02点08分 9
level 2
六儿💦 楼主
第五项:分割条(我也不知道叫啥,就是置顶条下面的那一条主页博客之类的) ******代码是tab 1.分割线 代码:#tabline{top:89px;background-color:#6AB30F} 指定位置:tab开始后第一行 就是随着置顶条调整高度和颜色,删除掉也可以。
2006年08月09日 02点08分 10
level 2
六儿💦 楼主
2.分割条位置 代码+例子:#tab{top:152px;} 指定位置:tab开始以后第2行 讲解: #tab{top:152px;}说的就是这个分割条上下的位置。我的因为置顶条比较高,所以设置的也高。具体窍门我也不懂,辛苦点慢慢调整就是了|||||||||||||||||||||||||||| 删除掉也可以,就成这样子。
2006年08月09日 02点08分 11
level 2
六儿💦 楼主
3.把主页,博客分割小竖条的颜色 代码+例子:
#tab span{color:#
0000ff;font-size:12px} 指定位置:第4行 讲解: 改color:#a0000CC这里就可以,大小应该没有什么可改的地方。
2006年08月09日 02点08分 13
level 2
六儿💦 楼主
4.访问和未访问 代码:
#tab a:link{color:#
FFFFFF;text-decoration:none;font-size:12px}
#tab a:visited{color:#
FFFFFF;text-decoration:none;font-size:12px} 讲解: 大家知道百度未访问帖子是蓝色,访问后是紫红色。这里的那个分割条也同样的道理。可改可不改,不是很有必要。 a.link是未访问 a.visted是已经访问
2006年08月09日 02点08分 14
level 2
六儿💦 楼主
5.点击设置以后的第二条分割条 代码:
#tab2{background:#
DAE9F5} 指定位置:默,自己找吧…… 讲解: 改掉颜色或者删除都可以。再次说明删除的话就是整个空间的背景作底。 PS. 请无视图上面的那个捕捉什么的……
2006年08月09日 02点08分 15
level 2
六儿💦 楼主
#tab2 span{color:#
000000;font-size:12px;font-weight:bold}
#tab2 a{font-size:12px} #
tab2 a:link{color:
#0000CC}------- #
tab2 a:visited{color:#0000CC} 这些和上面的大同小异。
2006年08月09日 02点08分 16
level 2
六儿💦 楼主
第六项:公告栏(就是文章的题目框) 代码: #m_blog div.tit{font-size:12px;font-weight:bold;top:6px; line-height:70px; text-indent:32px; background:url(http://图片地址) no-repeat} 指定位置:往下面拉,找到m_blog这一块,然后从第一行开始贴进去。**注意**只有第一行,第二行不需要改变。 讲解: 其实我要说的只有background:url(http://图片地址) no-repeat} 其他的代码只是为了让大家知道在哪里。把想要的公告栏图片放进去就行了。这里有很多由冰蓝80提供的:http://post.baidu.com/f?kz=119067004
2006年08月09日 02点08分 17
level 2
六儿💦 楼主
楼上的图- -|
2006年08月09日 02点08分 18
level 2
六儿💦 楼主
第七项:文章的分割线 代码: #m_blog div.line{margin-top:12px;margin-bottom:15px;line-height:70px;background:url(http://图片地址) repeat-x} select{visibility:hidden}} 指定位置:m_blog这一块的倒数第二行。 讲解: 和上面一样,把分割线图片弄进去就行了。 这里http://post.baidu.com/f?kz=120376669有我和冰蓝80提供的分割线。
2006年08月09日 02点08分 19
level 2
六儿💦 楼主
第八项:半透明效果 代码: .modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533} .modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px} .modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} 指定位置:直接贴在.mod最后一行的下面就可 来自:http://www.hibaidu.com.cn/Html/Article/yuan/10220060721220005.html
2006年08月09日 02点08分 20
level 2
六儿💦 楼主
好了,基本常识就讲解到这里。大家当然也可以自己摸索。我就差不多这么摸索会的,当然还有很多教材和亲爱的朋友们^_^。 给大家推荐几个强人的,里面有他们的教程: http://hi.baidu.com/crystal_fish http://hi.baidu.com/fableking
2006年08月09日 02点08分 21
level 2
六儿💦 楼主
这里是一些制作的素材集合贴 http://post.baidu.com/f?kz=120384926
2006年08月09日 02点08分 22
1 2 3 4 5 尾页