代码、实例
[评论]发表人后紧跟发表言论
·代码（添加）
在评论（#m_comment）设置新增一行
#m_comment BR {DISPLAY: none;}
如图：
·延伸
把#m_comment 换为别的模块ID即可
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
不显示评论发表人
·代码（添加）
#m_comment DIV.item SPAN {DISPLAY: none;}
·建议：
与上面发表人后紧跟发表言论并用
否则留一行空白，如图：
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
设置左右模块间的线
·代码（修改）
#layout td.c2t1,#layout td.c3t1,#layout td.c3t3{border-right:1px dashed #A6A6A6}
/*安排;设计;布局*/
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
美化你的模版
·代码（更改）
.modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533}
/*模版当中一大块主体，border-left左边边框线，border-right右边边框线，1px边框粗细，不要边框线设置0，solid边框线样式*/
.modtl{background:url(背景图片) no-repeat top left;line-height:1px}
/*标题栏左*/
.modtc{background-color: #813533;
background-image: url(http://hiphotos.baidu.com/fableking/pic/item/fbdbd1a22e103eadcaefd034.jpg);
background-position: right;
background-repeat: no-repeat;
filter:Chroma(Color=white)}
/*标题栏中*/
.modtr{background:url(http://hiphotos.baidu.com/fableking/pic/item/9ea67acbf127fa1fbe09e6aa.jpg) no-repeat top right;line-height:1px}
/*标题栏右*/
.modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}
/*模版左下角，border-left:是设置左下角左边框的属性的，border-bottom是设置左下角底边的边框属性的*/
.modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px}
/*模块底边中央，border-bottom:是设置边框当中一段底边属性*/
.modbr{background:transparent;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px}
/*模版右下角，border-right:是设置右下角右边框的属性的，border-bottom是设置右下角底边的边框属性*/
·实例
（标题栏）.modtl{} .modtc{} .modtr{}既为
·提示
.modtc{}中的background-color这里的颜色代码改成你做的图片的色调的颜色代码，不然会不协调
自己看到的效果跟别人看到的效果是完全两样，预览的效果是很糟糕的，标题栏上很乱很乱，其实这个就是这样的。
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
标题等前添加图片 自：百度空间论坛 » 百度空间模板代码 » 在博客文章标题等处添加图片
◎代码（修改）：
#m_blog div.tit{font-size:14px;font-weight:bold;line-height:90px;text-indent:120px;background:url(图片地址) no-repeat;}
其中：
line-height:数值px 标题的高度，这里即为图片的高度；
text-indent:数值px 标题的文本前面的空余宽度，这里即填图片的宽度，建议多5、6px，因为图片和标题紧贴着可能不好看。
◎提示：
其他模块也可以添加图片，其代码设置方法相同，如想加在留言处即在#m_comment div.item{}下设置上面参数即可。
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
友情连接下添加图片
·代码（添加）
#mod_links.mod{background:url(http://hiphotos.baidu.com/fanmingli/pic/item/70e9342a491b51385243c165.jpg) no-repeat;background-position: bottom;padding-bottom: 120px;}
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
调整行距
◎代码
#m_blog div.cnt div {line-height: 175%}
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
字体/背景特效
◎代码（添加到需要的模块ID内）
·阴影
filter:DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true);
/*OffX 阴影与对象（文字或图片）的横向距离偏移;OffY 阴影与对象的竖向距离偏移;Positive 建立阴影的对象，true就是为非透明像素建立阴影，false就是为透明的像素建立阴影，一般不建议使用false*/
·发光
FILTER: glow(color=#0066FF,direction=2)
·投影
filter:Shadow(Color=gray,Direction=135)
/*Direction 投影方向，按顺时针方向，0度代表垂直向上，每45度为一个单位。共8个方向。当链接被选中时,边上虚线的框框也会被设置为投影*/
·四周往中间过渡透明
filter:alpha(opacity=40,finishopacity=100,style=2)
◎实例
·阴影（已有filter参数，例如设置透明度的filter:alpha()）
将filter:alpha(opacity=50);变为filter:alpha(opacity=50)DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true);
/*不需要间隔，当中留空格可以，但是千万不要自作聪明的去用";"来间隔，一旦间隔了就无效了*/
·[模块]四周往中间过渡透明
.modbox{filter:alpha(opacity=40,finishopacity=100,style=2)}
/*不过模块中的字也同时被设置*/
如图：
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
美化鼠标
◎代码（添加）：
body{background:#000000;CURSOR:url('http://webme.bokee.com/inc/mouse079.cur')}
a:hover{CURSOR:url('http://webme.bokee.com/inc/mouse024.ani')}
◎说明：
第一行是鼠标指针初始形态，第二行是鼠标指针碰到链接的形态。
◎参考鼠标样式：http://myok.blogchina.com/3429184.html
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
鼠标至～链接～显示背景色
·代码（添加）：
a{text-decoration:none; color:#DBF7B3}
A:hover{font-size:13; background:#DBF7B3; color:#990099}
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
给超链接添加按钮效果（鼠标至超链接上往右下角下陷）
·代码（更改）
a:hover {position:relative; left:1px; top:1px; clip:rect()}
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
去掉文章题目下划线
代码（修改）：
#m_blog div.tit{text-decoration:none;font-size:15px;color:#4A7FF8;font-weight:bold;line-height:40px;background:url() no-repeat right;decoration:none}
#m_blog div.tit a{text-decoration:none;color:#4A7FF8;font-size:15px;font-weight:bold}
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
添加分割线
◎代码（替换）：
～文章栏目～
#m_blog div.line{margin-top:17px;line-height:17px;background:url(图片地址) repeat-x}
～评论栏目～
#m_comment div.line{background:url(图片地址);line-height:12px}
～文章分类～
#m_artclg div.line{background:url(图片地址);line-height:12px}
～友情连接~
#m_links div.line{background:url(图片地址);line-height:12px}
◎实例：
添加～文章栏目～分割线
将 #m_blog div.line 开头的行 替换成 #m_blog div.line{margin-top:17px;line-height:17px;background:url(图片地址) repeat-x}
◎注意：增加了分割线以后......滚动效果无效了
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
让栏目滚动起来
◎代码（添加）
#header div.rc{background:url("javascript:document.body.onload = function(){if(document.getElementById("模板ID")){var aminganjie=document.getElementById("模板ID");aminganjie.innerHTML="";}}");}
◎实例
～评论～滚动效果最为美观。代码如下：
#header div.rc{background:url("javascript:document.body.onload = function(){
if(document.getElementById("m_comment")){var aminganjie=document.getElementById("m_comment");aminganjie.innerHTML="";}}");}
◎注意：与 添加分割线 冲突
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
添加滚动条
◎代码（修改）
#m_links{overflow-y:auto;height:250px}
m_blog 文章栏目
m_links 友情连接栏目
m_artclg 文章分类栏目
m_comment 最新评论
参数说明：
1、overflow-y : 设置当对象的内容超过其指定高度时如何管理内容；overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容。
参数: visible 扩大面积以显示所有内容；auto 仅当内容超出限定值时添加滚动条；hidden 总是隐藏滚动条；scroll 总是显示滚动条
2、height : 设置滚动条的高度（修改其后数值即可）。
3、滚动条颜色参数设置：
scrollbar-3d-light-color 设置或检索滚动条亮边框颜色
scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色
scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色
scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色
scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色
scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色
scrollbar-base-color 设置或检索滚动条基准颜色
·实例：所用更改浏览器滚动条（含其它东西）
body{
background-image:url(大背景图片) ;
background-repeat:no-repeat; /*不重复*/
background-position:top center; /*置顶 居中*/
background-attachment: fixed;CURSOR:url(鼠标样式);
SCROLLBAR-FACE-COLOR: white; /*以下为滚动条设置*/
SCROLLBAR-HIGHLIGHT-COLOR: white;
SCROLLBAR-SHADOW-COLOR: #FF69B4;
SCROLLBAR-3DLIGHT-COLOR: #FF69B4;
SCROLLBAR-ARROW-COLOR: #FF69B4;
SCROLLBAR-TRACK-COLOR: white;
SCROLLBAR-DARKSHADOW-COLOR: white;}
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
透明滚动条
·代码（修改）：
#m_blog
{scrollbar-face-color: FFFFFF;
scrollbar-shadow-color:FFFFFF;
scrollbar-highlight-color:FFFFFF;
scrollbar-3dlight-color: #69A7F9;
scrollbar-darkshadow-color:#69A7F9;
scrollbar-arrow-color:#69A7F9;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
overflow-y:auto;height:300px;
filter: chroma(color=#B1D7FC);filter : alpha(opacity=60) }
#m_comment
{scrollbar-face-color: FFFFFF;
scrollbar-shadow-color:FFFFFF;
scrollbar-highlight-color:FFFFFF;
scrollbar-3dlight-color: #69A7F9;
scrollbar-darkshadow-color:#69A7F9;
scrollbar-arrow-color:#69A7F9;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
overflow-y:auto;height:300px;
filter: chroma(color=#B1D7FC);filter :alpha(opacity=60)}
#m_links
{scrollbar-face-color: FFFFFF;
scrollbar-shadow-color:FFFFFF;
scrollbar-highlight-color:FFFFFF;
scrollbar-3dlight-color: #69A7F9;
scrollbar-darkshadow-color:#69A7F9;
scrollbar-arrow-color:#69A7F9;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
overflow-y:auto;height:300px;
filter: chroma(color=#B1D7FC);filter :alpha(opacity=60)}
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
隐藏某模块
·代码(更改):
div#区域名{display:none;}
·实例:
·隐藏标题栏的空间名称：div#header div.tit{display:none;}
·隐藏TAB菜单：div#tab{display:none;}
||||||||||||||||||||||||| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
让空间自动弹出对话框
◎代码（修改）
#m_pro a{color:#CC00FF;border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("你要说的话");')}
类别：百度css技术 | 编辑 | 删除
| 浏览(1)
Subscribe to:
Post Comments (Atom)
1 comment:
html css代码示例
H2标签标题元素背景图像重复位置
Post a Comment