【原创】CSS最基础最基础的教程(默,我懂得的也很少)
戈薇吧
全部回复
仅看楼主
level 2
六儿💦 楼主
那些音乐,友情连接设置我想都应该明白,我就不多说那些东西。百度自己有个那些设置的教程:http://www.baidu.com/search/hi.html#n0******请勿转载,此为百度戈薇吧私有品************讲解的例子全部用我自己空间,如有雷同纯属巧合************可以把我写出来的代码复制到我指定的位置************“;”也需要复制进去*************我说第几行是指“#”开头************改东西的时候不要忘了做副本,就是把原来的复制下来存到别的地方去,免得万一改乱了会改不回去的*************我仅仅讲解容易懂的东西,其他就算我明白也不知道如何讲,况且我有一半以上没明白***********从别人学来的我会很老实的说明,没有盗窃行为******
2006年08月05日 05点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月05日 05点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月05日 05点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月05日 05点08分 4
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}(我把我的空间名称设置成了白色,这个在下面会有讲)http://i72.photobucket.com/albums/i170/qingtsu/34556.jpg2.空间名称移动+大小(必须一起说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.htm3.空间介绍如果不想要可以干脆去设置----基本选项删除掉,我就给删除了= =||||。因为我的置顶条是白色底,弄掉了更干净。指定位置: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: 幼圆}我想上面都解释得比较清楚了。就是改改字体颜色和大小第五项:分割条(我也不知道叫啥,就是置顶条下面的那一条主页博客之类的)******代码是tab1.分割线代码:#tabline{top:89px;background-color:#6AB30F}指定位置:tab开始后第一行就是随着置顶条调整高度和颜色,删除掉也可以。
2006年08月05日 05点08分 5
level 2
六儿💦 楼主
2.分割条位置代码+例子:#tab{top:152px;}指定位置:tab开始以后第2行讲解:#tab{top:152px;}说的就是这个分割条上下的位置。我的因为置顶条比较高,所以设置的也高。具体窍门我也不懂,辛苦点慢慢调整就是了||||||||||||||||||||||||||||删除掉也可以,就成这样子。
2006年08月05日 05点08分 6
level 2
六儿💦 楼主
3.把主页,博客分割小竖条的颜色代码+例子:
#tab span{color:#
0000ff;font-size:12px}指定位置:第4行讲解:改color:#a0000CC这里就可以,大小应该没有什么可改的地方。
2006年08月05日 05点08分 7
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月05日 05点08分 8
level 2
六儿💦 楼主
5.点击设置以后的第二条分割条代码:
#tab2{background:#
DAE9F5}指定位置:默,自己找吧……讲解:改掉颜色或者删除都可以。再次说明删除的话就是整个空间的背景作底。PS. 请无视图上面的那个捕捉什么的……
2006年08月05日 05点08分 9
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月05日 05点08分 10
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月05日 05点08分 11
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月05日 05点08分 12
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月05日 05点08分 13
level 2
六儿💦 楼主
好了,基本常识就讲解到这里。大家当然也可以自己摸索。我就差不多这么摸索会的,当然还有很多教材和亲爱的朋友们^_^。给大家推荐几个强人的,里面有他们的教程:http://hi.baidu.com/crystal_fishhttp://hi.baidu.com/fableking
2006年08月05日 05点08分 14
level 2
六儿💦 楼主
完全自己写的,没有盗窃任何东西累死我了。。。。。。。。。。。。。
2006年08月05日 05点08分 15
level 2
六儿💦 楼主
这里是一些制作的素材集合贴http://post.baidu.com/f?kz=120384926
2006年08月05日 05点08分 16
level 11
亲亲芸写的不错
2006年08月05日 05点08分 17
level 2
六儿💦 楼主
寒,3楼的出了问题!!!应该是:(我少写了‘)a:hover{text-decoration:underline;color:#C0C0C0;cursor:url(‘鼠标效果')} 另:鼠标改变就是,把鼠标放到另外一个连接上,就变成另外一个鼠标,可以看我的空间http://hi.baidu.com/mitari,就是那样的。
2006年08月05日 05点08分 18
level 2
http://www.animewallpapers.com/ 这个网站可以去搜索背景,但是需要知道你想要得动漫的英文名称,因为是英文网站。到时候选择1024*768才够大,800*600的图片太小了,不适合当空间背景
2006年08月05日 06点08分 19
level 0
- -+ha...hao duo..yong shou ji yi ye yi ye kan hen ma fan de jiang..wo de kong jian wan quan shi dao qie...wo shi ying yu BC ha..suo yi zhi neng dao qie la... Na yun ha...wo hua li de chou le... cai cai wo shi shui...
2006年08月05日 07点08分 20
1 2 3 尾页