九乡新闻网趣分期手机售后维修:CSS入门学习
来源：百度文库 编辑：九乡新闻网 时间：2024/04/28 18:46:05
多福老人欢迎您
;http://qwp43.360doc.com
国外油画 国内油画 精致工笔 风景人物 雕塑奇石 工艺精品 视频电影 学习笔记
图片;
CSS入门学习
引自宇浓
１.如何更换空间背景？ 打开高级设置，再自定义CSS，看到里面的第3行和第4行都是 header div.lc{background:url(header div.lc{background:url (
) no-repeat} 第三行的是标题栏左边的图片，第4行是标题栏的右边，建议大家换第4行就行了。 找一个图片，复制下图片的URL地址替换掉第四行的就行了。 2.如何隐藏播放器而不影响音乐播放。 在css 文件的空白处添加以下代码： #mod_bgmusic{display:none} 不显示播放器，但不影响音乐的播放。 3.让baidu空间背景音乐支持多首歌曲了 将音乐的网址写到一个记事本文件里，保存扩展名为mp3（1.mp3），然后将这个文件找个空间传上去。 回到空间中将背景音乐的地址设置为你刚刚做的文件就可以。格式如下（最好是wma文件，因为比较快） 4.在空间中使用html javascight代码 先把html javascight代码上传到免费的Html主页空间， 打开网页，把内容复制 然后，写新文章，把代码粘贴在文章内容里，就ｏｋ了！ 5.教你加显示IP地址代码 [1] 进入『设置』--->『高级设置』 [2] 点击右边“自定义CSS可以让您： • 直接编辑CSS文件，实现个性化效果”下面的『开始自定义』 [3] 在最下面加入下面全码 #comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(http://www.ip.cn/s.php) no-repeat bottom; padding-bottom: 40px; margin- bottom: 10px} 6.这样做到CSS阴影效果 字体阴影就是这个指令 Filter：DropShadow（Color=color，Offx=Offx，Offy=offy， Positive=positive） 也支持图片阴影 效果不好 7.在每篇文章的标题前面放个小的图片，就象我的空间里一样， 方法，自定义css，在适当位置加： #m_blog DIV.tit {FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(图片地址) no-repeat; TEXT-INDENT: 120px; LINE-HEIGHT: 90px} 8.更换鼠标小图标 高级设置--编辑CSS 把第一行换成 body{background:#000;CURSOR: url('http://webme.bokee.com/inc/mouse028.cur')} a:hover{CURSOR: url('http://webme.bokee.com/inc/mouse031.ani')} 当中的'http://webme.bokee.com/inc/mouse028.cur'可以改变，提供一点鼠标小图片的资源，大家看这里：http://whldjy.blogchina.com/3917832.html 9.百度空间文字发光的方法 （就是一点垃圾滤镜效果，不推荐使用） 第一步 : 修改CSS 按快捷键,ctrl+f 要搜索的关键字”#m_blog div.cnt” 第二步: 把后面的”{color:#000000;line-height:20px;font-size:14px} 换成”{filter:glow (color=#ff0000,strength=3);color:#cccccc;font-size:12px;font-size:12px} 百度空间CSS代码精选#header 标题栏的ID，就是挂着空间名字的栏目 #tab 导航兰的ID，就是写着主页 | 博客 | 相册....的栏目 #comm_info 其他模版的ID，就是有访问量显示和RSS的栏目 #m_blog 文章列表模版的ID #m_pro 个人档案模版的ID #m_album 照片自动播放模块的ID，一般这个不需要设置，因为设置了背景看不到，前面有照片显示 #m_links 友情链接模版的ID #m_artclg 文章分类模版的ID #m_comment 最新评论模版的ID #m_filed 文章存档的ID ———————————定式性的代码———————————— display:none 全能隐藏代码 背景{}中添加background: url(图片地址)repeat 注： repeat 背景图像在纵向和横向上平铺 no-repeat 背景图像不平铺 repeat-x 背景图像在横向上平铺 repeat-y 背景图像在纵向平铺 background-color:#颜色代码 超链接自定义设置超链接的属性就是在相关栏目名称后面+上a{}的属性 color:#颜色代码或颜色英文名称 定义超链接字体的颜色 font-family:字体名称 定义超链接字体 font-size:大小px 定义超链接字体大小 text-decoration : 参数 定义超链接的文本装饰，参数：none || underline || blink || overline || line-through none : 无装饰 blink : 闪烁 underline : 下划线 line-through : 贯穿线 overline : 上划线 其实超链接属性设置 a:hover{} 当鼠标移动到超链接上时显示的属性 a:link{} 超链接未被访问前显示的属性 a:visited{} 已经被访问过的超链接的属性 a:active{} 超链接被点击的时候显示的属性（在鼠标点击与释放之间发生的事件） .modbl{} .modbc{} .modbr{} 这三个就是分别设置模版左下角，底边中央，右下角的代码： .modbl{}中的border-left:是设置左下角左边框的属性的，border-bottom是设置左下角底边的边框属性的 .modbc{}中的border-bottom:是设置边框当中一段底边属性的 .modbr{}中的border-right:是设置右下角右边框的属性的，border-bottom是设置右下角底边的边框属性的 解决回车换两行的问题 Shift+回车 个性标题 #header div.tit{top:5px;left:20px;line-height:60px;font-size:60px;font-family:隶书} #header div.tit a.titlink{color:#813533;text-decoration:none} #header div.tit a.titlink:visited{color:#813533;text-decoration:none} #header div.tit a.titlink:hover{color:#FFFFFF;text-decoration:none} #header div.desc{top:27px;left:320px;color:#813533;font-size:16px} 说明： #header div.tit{} 这是标题的设置 #header div.tit a.titlink{} 这是标题超链接的设置 #header div.tit a.titlink:visited{} 这是标题超链接已经被访问过的设置 #header div.tit a.titlink:hover{} 这是当鼠标移动到标题超链接上时显示的属性 #header div.desc{} 这是空间标题后面的简介的内容设置 属性和详细参数 top:5px 距离模版顶部的间隔距离为5px left:20px 距离模版左边的间隔距离为20px line-height:60px 设置总高度为60px font-size:60px 设置字体大小为60px，这个不能设置的比的line-height大，不然标题字体的一部分会被遮掉的 font-family:隶书 设置字体的型号 color:#813533 设置字体的颜色代码为#813533，这里也可以写颜色的英文名，比如black，white，red，green等 text-decoration:none 字体的划线修饰属性，none为无下划线，关于text-decoration的具体参数可以查看我前面写的关于定义超链接的文章 更多文章 放到右面 #m_blog div.more{margin:14px 0 16px 0;text-align:right} 1.在友情链接添加“发送消息”的链接： 在友情链接里的链接地址内填上：http://msg.baidu.com/ms?ct=21&cm=1&tn=bmSendMessage&un=你的百度用户名 这样人家一点该链接就可以马上给你发送消息了，而这个链接另一个功能就是可以给自己发送消息，嘿嘿，由于自己浏览自己空间的时候，是没有发送消息的链接的，所以应该没有多少人试过给自己发送消息吧？但是我用这个链接来试过。。。而且收到了，很有意思。。。 2.在友情链接添加“加为好友”的链接：javascript:document.addfriend.submit() —————————CSS系列————————————— /*发表评论中的背景*/ #spBlogCmtor{background:url(图片地址)} /* 这是 姓名 中的*/ #spBlogCmtURL{background:url(图片地址) /* 这是 网址或邮箱 中的*/ background-attachment: fixed; background-position: center center; background-repeat: no-repeat; } #spBlogCmtText{background:url(图片地址) /* 这是 内容中 的*/ background-attachment: fixed; background-position: center center; background-repeat: no-repeat; } /*改变你的按钮和输入栏的颜色及字体*/ input,select,textarea{color:green;font-size:14px;font-family:Tahoma,黑体;border:1px solid green;background-color:black} textarea{overflow:hidden} 解释一下：color:green 表示字体颜色。 font-size:14px 表示字体大小。 font-family:Georgia,黑体 表示英文字体和中文字体 border:1px 表示边框的粗细。 solid green 表示边框的颜色。 background-color:black 表示背景色。 /*最顶部加字方法!*/ #tabline{margin-top:-490px;right:0px;line-height:8px; background:url(图片地址) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px} 图片上面打上你要的字~ /*文章虚线边框*/ #m_blog div.cnt{color:#333333;line-height:20px;font-size:14px;border:1px dashed #090688;background:#Ffffff
ADDING: 10px;} / #m_blog div.cnt{color:#808080;line-height:20px;font-size:16px;border-top:2px dashed #1DC01D;border-bottom:2px dashed #1DC01D;border-left:2px dashed #1DC01D;border-right:2px dashed #1DC01DADDING-RIGHT: 10px; PADDING-LEFT: 10pxADDING-TOP: 10px;PADDING-bottom: 10px;} dotted： 点线 dashed : 虚线 double : 双线边框 groove : 3D凹槽 ridge : 菱形边框 inset : 3D凹边 outset : 3D凸边 /*留言板图片*/ #spBlogCmtText {border: 1px solid #A6B5C4;background:url(http://***.jpg) no-repeat top center;background-attachment: fixed;} /*播放器*/ #phx{FILTER: Alpha(Opacity=100, FinishOpacity=60, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)Invert(); WIDTH: 224px;HEIGHT:200px} Invert(); 滤镜效果 可以换成别的 /*不显示播放器，但不影响音乐的播放*/ 添加#mod_bgmusic{display:none} /*日志背景*/ #m_blog.modbox{background:url(这里填上你选的背景图片连接地址)} 或#m_blog div.cnt{background:url(填入你选择的图片地址连接) repeat; /*背景图片*/color:#666666;line-height:20px;font-size:14px} /*滚动条*/ {overflow-y:auto;height:200px} {scrollbar-face-color: #E100E1; scrollbar-shadow-color: maroon; 'www.aspxuexi.com asp学习网scrollbar-highlight-color: white; scrollbar-3dlight-color: #E100E1; scrollbar-darkshadow-color:#E100E1; scrollbar-arrow-color:#E100E1; scrollbar-base-color: #E100E1; scrollbar-track-color: #E100E1; overflow-y:auto;height:458px; filter: chroma(color=#E100E1);} 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 设置或检索滚动条基准颜色 /*鼠标触碰 按钮下陷*/ a:hover{}中加入 position:relative; left:2px; top:1px; clip:rect( ); /*禁止选择 鼠标右键特效*/ #main{ background:url('javascript: document.oncontextmenu=new Function("event.returnValue=false;"); document.onselectstart=new Function("event.returnValue=false;"); ')} 即可 document.oncontextmenu=new Function("event.returnValue=false;");禁止鼠标右键 document.onselectstart=new Function("event.returnValue=false;"); 禁止选择 /*弹出窗口*/ #comm_info 和#comm_info a 替换#comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("你要说的话");')} #comm_info{}或#m_links div.item{} 添加 background:url(javascript:alert(你要说的内容)) /*鼠标样式*/ 平常状态 body{}中加入CURSOR: url('http://***.ani'); 链接状态 a:hover{}中加入CURSOR: url('http://***.ani'); /*文章在新窗口中打开*/ a:active { text: (target="_blank");} /*屏蔽Rss链接，baidu图片*/ #comm_info a {display:none;} /*大背景*/ body{}中加入background:url(http://***.gif) repeat-x #FFFFFF /*标题背景*/ #header div.lc{} -左 #header div.rc{} -右 插入 background:url(http://***) /*百度空间 进入后弹出对话框*/ 去掉#comm_info div.line 把#comm_info a换成 #comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("你要说的话");')} /*文章日期旁加小图案*/ #m_blog div.date {text-indent:1.5cm;background:url(这里要填上你自己选的小图片的连接地址) 30% 0% no-repeat; /*背景图片*/margin:5px 0 8px 0;color:#999999; line-height:50px; /*调整行高*/} /*分割线*/ {margin-top:17px;line-height:12px;background:url(http://***.gif) repeat-x} /*<其它>模块中只显示访问人数*/ #comm_info a {display:none} /*发光效果*/ {}中加入filter:glow (color= #299BE8,strength=2); /*阴影效果字体阴影*/ {}中加入filter
ropShadow(Color=#000000, OffX=3, OffY=3, Positive=true); 参数的作用： Color=这里是阴影的颜色代码，我这里用的是黑色 OffX=这里设置阴影与对象（文字或图片）的横向距离偏移 OffY=这里设置阴影与对象的竖向距离偏移 Positive=这里是设置建立阴影的对象，true就是为非透明像素建立阴影，false就是为透明的像素建立阴影，一般不建议使用false，至于原因，你们可以自己设置false，然后预览看看效果，就知道为什么了，当然，如果你喜欢这样的效果，那也是个性使然，个人审美观不同，呵呵 另外，如果大家要添加阴影的地方已经有了filter的参数，例如设置透明度的filter:alpha()，那么只要把DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true)添加到alpha()的后面就可以了，这里不需要间隔，当中留空格可以，但是千万不要自作聪明的去用";"来间隔，一旦间隔了就无效了 例如在原来的filter:alpha(opacity=50);后面加上阴影效果代码： filter:alpha(opacity=50)DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true); 建议阴影不要用的太多，而且小字体的阴影很难搭配颜色，所以要慎重使用，不然反而适得其反 /*投影的代码*/ filter:Shadow(Color=gray/*颜色*/,Direction=135/*方向*/) /*文章标题背景*/ #m_blog div.tit{text-indent:1.5cm/*缩近*/;line-height:75px;/*增大行高，使背景图片完全显示*/font-size:16px;font-weight:bold;background:url(http://***.gif) no-repeat;/*标题背景图片，不重复*/} line-height:多少px; 设置标题的高度，其实这里的设置为图片的高度就可以了 text-indent:多少px; 设置标题的文本前面空多少宽度，这里可以填图片的宽度，为了美观起见，可以再多+5、6px，因为图片和标题贴着不好看，这个主要还是看个人感觉和喜好设置了 /*空间透明*/ .modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} /*添加自己的LOGO图片*/ #comm_info div.line{margin-top:4px;line-height:8px;border-top:2px solid #ff3333; background:url(http://***.gif) no-repeat bottom; padding-bottom: 32px; margin-bottom: 32px} /*添加LOGO*/ #m_pro div.image{}加入background:url(http://***.jpg) no-repeat bottom;padding-bottom:100px bottom让 图片沉底 padding-bottom 增加头像模块底下的宽度，这样，我们的LOGO就可以再往下移了，直到不被我们的头像挡住就可以了， 关键就是 padding-bottom 后面的数值大小了，一般设置为LOGO的高度值正好，LOGO的上边正好贴紧了头像的下边，如果觉得贴紧了不好看，就稍微再加大一点padding-bottom的值，留点缝缝 /*给评论框加背景图片*/ #spBlogCmtText {border: 8px solid #1AE61A ; background:url(图片地址) no-repeat top center; background-attachment: fixed;} /*如何设定+固定百度空间的背景*/ 在body{}中加入 background-image:url(图片地址) ; 定义背景图片 background-repeat: no-repeat; 定义背景图片不重复 background-position: center; 定义背景居中 background-attachment: fixed; 定义背景固定，不滚动，这个就是关键参数fixed 好啦，背景定义好了，预览看一下，却发现基本看不到背景，为什么？因为百度空间的样式中还有别的背景，比如标题栏上的背景图片等 所以我们要把标题栏他们的背景给去掉 在header{}中加入 background:transparent 这个参数的作用是使完全背景透明（关于半透明的设置请看后面的教程） 并把其中原来的属性background:url(……)的设置删除掉 接着到#header div.rc{}以及.stage{}中做与header{}同样的设置，即可达到效果了，再看看，是不是能够看到设定的背景了 如果觉得其他模块的背景也很碍眼的话，只要照着上面的方法设置了即可了，不过有的是设置背景色的，那么只要把background-color:……;删掉然后再+上background:transparent就可以了 这里加一句，有很多朋友的菜单栏是带背景色的，也就是主页|博客|相册这一栏有背景色，有的人想变透明不知道在哪里，我这里提示一下，就是#tab{}中，只要把里面的background-color的相关属性删除掉就可以了 /*右下角弹出窗口*/ #main{ background:url('javascript: var sunPop = window.createPopup(); var popTop=50; function popmsg(msgstr){ var winstr="
|
你好，亲爱得朋友。
你要说的话。
你要说的话~"); ') } —————————————技巧系列——————————————— 改变空间主页各模块的排布位置可以在空间中依次点击：设置－高级设置－自定义模板－开始自定义 然后鼠标拖动各个栏目的标题处，移动到你想要的位置，松手即可。 但是如果你曾经把一个模块拖动到“文章列表”下面，而后来发表了许多文章，想把下面的那个模块拖回来是就会发现，无法移动到上面。 其实有个简单的方法： 先到下面鼠标左键按住想要拖动的模块的标题栏，接着按键盘上的“Pg Up”（上页）键，就会发现页面向上翻了，而模块还在鼠标指针上。 按几次达到想要的位置后，松开鼠标左键，该模块就会移到你想要的地方去了^_^ 二、文章快速插链接： 我们在文章中经常会遇到插入超链接的情况，直接贴网址虽然也可以自动转换为超链接，但是我觉得就影响了文章的美观。 所以我比较喜欢用文字链接，但是每次都用鼠标点上面的设置链接按钮也未免太慢了…… 用过微软FRONT PAGE的朋友应该知道，该软件插入超链接是有快捷键的，我在空间里测试里一下，的确可以用！ 所以写日志时想给文字加超链接，先将链接指向的网址复制一下，然后选中想要加的文字，最后按快捷键“CTRL+K”——在弹出的提示框中粘贴刚复制的地址，确定即可。 ———————————HTML系列———————————— HTML提交： javascript:if(navigator.userAgent.indexOf('MSIE')>0){void(document.form1.spBlogText.value=frames['rte1'].document.body.innerText);void(document.form1.rte1.value='');document.form1.submit()}; 提交地址 添加到收藏夹做按钮即可 /*JS窗口*/
/*公告牌*/
| ||||