食用菌孢子种类:如何通过css修改百度空间模块大小

来源:百度文库 编辑:杭州交通信息网 时间:2024/04/30 02:16:13

百度空间CSS——教你美化你的模版 这里公布下我的关于模版边框设计的代码:.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}.modtl{background:url(



) no-repeat top left;line-height:1px}.modtc{background-color: #813533;background-image: url(



); background-position: right; background-repeat: no-repeat; filter:Chroma(Color=white)}.modtr{background:url(



) no-repeat top right;line-height:1px}.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{},这个其实就是模版当中一大块主体的代码:其中的:border-left:1px solid #813533;border-right:1px solid #813533其实就是模版左右两边边框线的设置代码,border-left是设置左边的边框线,border-right是设置右边的边框线其中的1px就是设置边框线粗细的,大家如果不想要边框线,设置0就可以了其中的solid是设置边框线的样式的,它的作用就是指定边框为实线边框,这还有更多的样式介绍:dotted: 点线dashed : 虚线 double : 双线边框 groove : 3D凹槽 ridge : 菱形边框 inset : 3D凹边 outset : 3D凸边 如果大家不想要solid的样式,只要把它换成上面你想要的样式的代码就可以了,不过这里要说一下,上面第3个到最后一个的样式,也就是从双线边框到3D凸边的样式都取决于边框线的粗细来显示效果的,如果边框线的粗细小于3px,一般是看不出来效果的#813533就是边框的颜色设置,大家可以换成自己喜欢的颜色代码上去的这里已经对边框的三个参数1px,solid以及#813533做出了解释,之后提及的边框属性将不再对这些参数作解释接着来看下:.modbl{}.modbc{}.modbr{}这三个就是分别设置模版左下角,底边中央,右下角的代码:.modbl{}中的border-left:是设置左下角左边框的属性的,border-bottom是设置左下角底边的边框属性的.modbc{}中的border-bottom:是设置边框当中一段底边属性的.modbr{}中的border-right:是设置右下角右边框的属性的,border-bottom是设置右下角底边的边框属性的这就是美化边框的简单教程,相信经常来我空间学习的朋友们应该都能看得懂它了,我实在懒得做更多的解释了,如果每一篇文章都解释的那么详细,真的很没必要,而且很累。。所以这里只能跟那些初次来我空间学习的朋友们说声不好意思了,如果看不懂的话,建议先去翻看下我之前的文章,从头学一点,或许会有些帮助。。。之后的教程我也会扼要的解释,不过我觉得经常来的朋友应该都能看得懂些了,看不懂可以自己琢磨琢磨,这样有助于理解代码,也有助于以后可以设计出有自己个性的百度空间,毕竟以后我不可能每次都写教程的。。接着我们来说一下如何美化模版的标题栏:(若不懂作图以及对代码不熟悉的朋友请勿尝试,不然后果自负)之前已经有很多朋友问过我的标题栏上的天涯&枫叶&书塾的是怎么做的,那个时候因为感觉有点难度,而且涉及到作图,所以没写,现在决定写出来,希望大家如果没有自信做好它的,请不要胡乱尝试,因为这个标题栏的设计,自己看到的效果跟别人看到的效果是完全两样的下面我先解释下代码:标题栏的设置关键就是这三个:.modtl{}.modtc{}.modtr{}这三个中分别都有设置背景图的代码,我把这三个背景图贴出来,大家就应该差不多明白标题栏的秘密了他们分别是以下三张图: 当中那张就是我自己用photoshop设计的图片,左右两边的图被我变过颜色了,原本是淡蓝色的,当中的图设计尺寸很讲究,高度是24px,宽度最好不要超过我的图的宽度,而且这图当中的图案,也就是从“天”字到“塾”字的左右两边空出的距离一定要跟我的一样,多一点或少一点,可能都会毁了你的标题栏,可能你们觉得我说的很夸张,不过等你们试过之后就知道为什么我会这么说了会photoshop的朋友可以拿我上面的图去自己对照着尺寸来做自己风格的图片做好图片后,记得要把.modtc{}中的background-color这里的颜色代码改成你做的图片的色调的颜色代码,不然会不协调的然后这里就要开始说重点了:当你图做好,代码也写好后,预览的效果是很糟糕的,标题栏上很乱很乱,其实这个就是这样的。我在上面就说过了,自己看到的效果跟别人看到的效果是完全两样的所以,如果你要想知道别人看到的效果的话,就必须要先保存修改,然后退出登录,再以游客的身份查看你自己的空间,才能看到别人看到的效果是什么样子的,所以这个一定要多尝试,而且必须要勇于尝试以及要对相关技术都有一定的熟悉才能做到的好了,这个教程就到这里结束吧