posts - 0, comments - 77, trackbacks - 0, articles - 356
            BlogJava :: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          CSS代碼詳解

          Posted on 2007-10-16 10:25 semovy 閱讀(522) 評(píng)論(0)  編輯  收藏 所屬分類(lèi): CSS式樣

          /*如何設(shè)定+固定百度空間的背景*/
          在body{}中加入
          background-image:url(圖片地址) ;                  定義背景圖片
          background-repeat: no-repeat;                          定義背景圖片不重復(fù)
          background-position: center;                             定義背景居中
          background-attachment: fixed;                          定義背景固定,不滾動(dòng)參數(shù)fixed

          /*背景設(shè)置*/

          body{}中加入background:url(http://hi.baidu.com/0454ldk
          ) repeat-x #FFFFFF
          注:
          repeat                                  背景圖像在縱向和橫向上平鋪
          no-repeat                             背景圖像不平鋪
          repeat-x                               背景圖像在橫向上平鋪
          repeat-y                               背景圖像在縱向平鋪

          /*鼠標(biāo)樣式設(shè)置*/
          在body{} 中添加;CURSOR: url('http://webme.bokee.com/inc/mouse028.cur
          ')}
          a:hover{CURSOR: url('
          http://webme.bokee.com/inc/mouse031.ani
          ')
          第一行是鼠標(biāo)指針初始形態(tài),第二行是鼠標(biāo)指針碰到鏈接的形態(tài)
          CSS鼠標(biāo)樣式大全


          /*半透明設(shè)置*/
          .modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}


          /*解決回車(chē)換兩行的問(wèn)題*/
          Shift+回車(chē)

          /*全能隱藏代碼*/
          display:none

          /*不停變換空間背景圖片*/
          http://magic.qtutu.com/


          參數(shù)
          color:green                                表示字體顏色。
          font-size:14px                             表示字體大小。
          font-family:Georgia,黑體            表示英文字體和中文字體
          border:1px                                 表示邊框的粗細(xì)。
          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}
          圖片上面打上你要的字~歡迎光臨http://hi.baidu.com/0454ldk

          /*添加LOGO*/
          #main {background:url(頂部LOGO) no-repeat 10px 0px;} /*10px 0px;距左 距頂部*/
          #layout {width:980px;margin-left:0px;background:url(底部LOGO) no-repeat bottom 0px;padding-bottom:80px} /*margin-left:0px底部圖片距離最左邊長(zhǎng)度;bottom 0px邊框大小;padding-bottom:80px主體模塊最下端距離底部圖片最頂端距離*/

          /*添加小背景圖片*/
          .stage{background:url(小背景圖片http://hi.baidu.com/0454ldk) repeat-y 0px 0px} /*0px 0px距左             距頂(建議為0)*/

          /*空間整體寬度*/
          #main{width:740px!important;text-align:center}或#main{width:80%!important}

          /*版塊長(zhǎng)度及間距*/
          #layout td.c2t1{padding-left:55px;width:570px} /*最左版塊*/
          #layout td.c2t2{width:60px} /*左右兩版塊間距*/
          #layout td.c2t3{width:260px;padding-right:30px} /*第2豎列版塊信息*/

          /*定義閱讀文章時(shí) 文章塊寬度 距左長(zhǎng)度*/
          .stagepad {width:570px;margin-left:44px;}
          .stagepad a:link{text-decoration:none;font-weight:bold}
          .stagepad a:visited{text-decoration:none;font-weight:bold}

          /*文章虛線(xiàn)邊框*/
          #m_blog div.cnt{color:#333333;line-height:20px;font-size:14px;border:1px dashed #090688;background:#Ffffff;PADDING: 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 #1DC01D;PADDING-RIGHT: 10px; PADDING-LEFT: 10px;PADDING-TOP: 10px;PADDING-bottom: 10px;}

          dotted:  點(diǎn)線(xiàn)
          dashed :  虛線(xiàn)
          double :  雙線(xiàn)邊框
          groove :  3D凹槽
          ridge :             菱形邊框
          inset :              3D凹邊
          outset :  3D凸邊

          /*前景圖片透明設(shè)置*/
          filter:alpha(opacity=90,finishopacity=100,style=0,)

          /*播放器*/
          #phx{FILTER: Alpha(Opacity=100, FinishOpacity=60, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)Invert(); WIDTH: 224px;HEIGHT:200px}
          Invert();              濾鏡效果 可以更換

          /*不顯示播放器,不影響音樂(lè)的播放*/
          添加#mod_bgmusic{display:none}

          /*日志背景*/
          #m_blog.modbox{background:url(圖片)}
          或#m_blog div.cnt{background:url(圖片) repeat; /*圖片*/color:#666666;line-height:20px;font-size:14px}

          /*滾動(dòng)條*/
          #m_blog{scrollbar-face-color: #E100E1;
          scrollbar-shadow-color: maroon;
          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:1000px;
          filter: chroma(color=#E100E1)}
            

          /*去掉橫向滾動(dòng)條*/

          在body{}里加上overflow-x:hidden

          /*禁止選擇 鼠標(biāo)右鍵特效*/
          #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;");禁止鼠標(biāo)右鍵
          document.onselectstart=new Function("event.returnValue=false;")

          禁止選擇
          /*鼠標(biāo)觸碰 按鈕下陷*/
          a:hover{}中加入position:relative; left:2px; top:1px; clip:rect( )

          /*彈出窗口*/
          #comm_info 和#comm_info a 替換#comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("你要說(shuō)的話(huà)");')}

          #comm_info{}或#m_links div.item{}
          添加
          background:url(javascript:alert())
          歡迎光臨零點(diǎn)壹貮http://hi.baidu.com/0454ldk

          /*文章在新窗口中打開(kāi)*/
          a:active { text: (target="_blank")}

          /*屏蔽Rss鏈接,baidu圖片*/
          #comm_info a {display:none}

          /*標(biāo)題背景*/
          #header div.lc{}              -左
          #header div.rc{}              -右
          插入 background:url(http://***)

          /*百度空間 進(jìn)入后彈出對(duì)話(huà)框*/
          去掉#comm_info div.line 把#comm_info a換成
          #comm_info a{color:#D77B18 border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("歡迎光臨http://hi.baidu.com/0454ldk");')}

          /*文章日期旁加小圖案*/
          #m_blog div.date
          {text-indent:1.5cm;background:url(這里要填上你自己選的小圖片的連接地址) 30% 0% no-repeat; /*背景圖片*/margin:5px 0 8px 0;color:#999999;
          line-height:50px; /*調(diào)整行高*/}

          /*標(biāo)題欄主體加小圖案*/
          模塊ID span.modtit{background:url(http://hi.baidu.com/0454ldk) no-repeat top left;font-size:0px;width:100%;margin-left:-18px;padding-top:3px}

          /*常用插入時(shí)間圖片位置的代碼*/
          圖片顯示位置——個(gè)人檔案照片下面:
          #m_pro div.act{margin-top:5px; background:url(
          http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}

          圖片顯示位置——文章列表 標(biāo)題下面:
          #m_blog div.tit{font-size:14px;font-weight:bold; background:url(
          http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}

          圖片顯示位置——文章列表 標(biāo)題左面:
          #m_blog div.tit{font-size:14px;font-weight:bold; line-height:24px; text-indent:120px; background:url(
          http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat}

          圖片顯示位置——TAB導(dǎo)航欄:
          #tabline{top:89px; background:url(
          http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 32px; margin-bottom: 6px}

          圖片顯示位置——相冊(cè)下面:
          #m_album div.image{text-align:center; background:url(
          http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 45px; margin-bottom: 1px}

          圖片顯示位置——每個(gè)友情鏈接下面:
          #m_links div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(
          http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px}

          圖片顯示位置——每個(gè)最新評(píng)論下面:
          #m_comment div.item{color:#000000;font-size:12px; background:url(
          http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}

          圖片顯示位置——每個(gè)文章分類(lèi)下面:
          #m_artclg div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(
          http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px}

          圖片顯示位置——其他區(qū)域:
          #comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(
          http://escati.linkopp.net/cgi-bin/date.cgi?trgb=red&srgb=red&prgb=red&timezone=GMT-0500
          ) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px}

          其他樣式顯示http://www.csufresno.edu/cgi-bin/Count.cgi?display=date&dd=A

          /*調(diào)整圖片位置*/

          padding-bottom: 20px; margin-bottom: 5px; padding-bottom為距上高度,margin-bottom為距下高度。

          /*調(diào)整TAB距離*/
          在TAB{}內(nèi)加入text-indent:30px

          /*分割線(xiàn)*/
          模塊ID div.line{margin-top:17px;line-height:17px;background:url(http://hi.baidu.com/0454ldk) repeat-x}

          /*發(fā)光效果*/
          {}中加入filter:glow (color= #299BE8,strength=2)

          /*陰影效果字體陰影*/
          {}中加入filter
          :DropShadow(Color=#000000:,OffX=2, OffY=3,Positive=1);或filter:shadow(Color=#000000:,OffX=2, OffY=3,Positive=1)
          參數(shù)作用:
          Color=陰影的顏色代碼
          OffX=設(shè)置陰影與對(duì)象(文字或圖片)的橫向距離偏移
          OffY=設(shè)置陰影與對(duì)象的豎向距離偏移
          Positive=設(shè)置建立陰影的對(duì)象,true是為非透明像素建立陰影,false是為透明的像素建立陰影,一般不建議使用false
          另外,如果添加陰影的地方已經(jīng)有了filter的參數(shù),例如設(shè)置透明度的filter:alpha(),只需把DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true)添加到alpha()的后面即可,這里不需要間隔,當(dāng)中留空格可以,間隔將無(wú)效
          例如在原來(lái)的filter:alpha(opacity=50);后面加上陰影效果代碼:
          filter:alpha(opacity=50)DropShadow(Color=#000000, OffX=3, OffY=3, Positive=true);

          /*投影的代碼*/
          filter:Shadow(Color=gray/*顏色*/,Direction=135/*方向*/)

          /*文章標(biāo)題背景*/
          #m_blog div.tit{text-indent:1.5cm/*縮近*/;line-height:75px;/*增大行高,使背景圖片完全顯示*/font-size:16px;font-weight:bold;background:url(http://hi.baidu.com/0454ldk
          ) no-repeat;/*標(biāo)題背景圖片,不重復(fù)*/}
          line-height:多少px;                設(shè)置標(biāo)題的高度,其實(shí)這里的設(shè)置為圖片的高度就可以了
          text-indent:多少px;                設(shè)置標(biāo)題的文本前面空多少寬度,這里可以填圖片的寬度,為了美觀起見(jiàn),可以再多+5、6px,因?yàn)閳D片和標(biāo)題貼著不好看,這個(gè)主要還是看個(gè)人感覺(jué)和喜好設(shè)置了

          /*空間透明*/
          .modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

          /*其他模塊添加圖片*/
          #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}

          /*隱藏其他模塊標(biāo)題*/
          #comm_info .modhead span{display:none}

          /*個(gè)人檔案添加圖片*/
          #m_pro div.image{}加入background:url(http://hi.baidu.com/0454ldk
          ) no-repeat bottom;padding-bottom:100px
                           bottom讓圖片沉底
                           padding-bottom增加頭像模塊底下的寬度
                           padding-bottom數(shù)值一般設(shè)置為L(zhǎng)OGO的高度值,LOGO的上邊與頭像的下邊距離0,加大padding-bottom的數(shù)值,LOGO的上邊與頭像的下邊距離亦加大

          /*去除模塊背景即完全背景透明*/
          刪除模塊background-color:……的屬性;加background:transparent即可
          在header{}中加入
          background:transparent                      這個(gè)參數(shù)的作用是使完全背景透明,并刪除原來(lái)的屬性background:url(http://hi.baidu.com/0454ldk)
          #header div.rc{}以及.stage{}與header{}同樣設(shè)置

          /*其他模塊標(biāo)題添加圖片*/
          #comm_info span.modtit{color:#737373;text-indent:16px;background:url(
          http://hi.baidu.com/0454ldk
          )repeat-x;font-size:0px;width:100%;margin-left:-18px;padding-top:3px}

          /*右下角彈出窗口*/
          #main{
          background:url('javascript:
          var sunPop = window.createPopup();
          var popTop=50;
          function popmsg(msgstr){
          var winstr="<table style=\"border:solid #A96D13 1px\" width=\"200\" height=\"150\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#88CFFF\" >";
          winstr+="<tr><td height=\"30\"> </td></tr><tr><td align=\"center\"><table width=\"90%\" height=\"110\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
          winstr+="<tr><td valign=\"top\" style=\"font-size:12px; color:#209C20; face:黑體\">"+msgstr+"</td></tr></table></td></tr></table>";
          sunPop.document.body.innerHTML=winstr;
          popshow();
                           }
          function popshow(){
          window.status=popTop;
          if(popTop>1720){
          clearTimeout(mytime);
          sunPop.hide();
          return;
          }else if(popTop>1520&&popTop<1720){
          sunPop.show(screen.width-250,screen.height,200,1720-popTop);
          }else if(popTop>1500&&popTop<1520){
          sunPop.show(screen.width-250,screen.height+(popTop-1720),200,150);
          }else if(popTop<180){
          sunPop.show(screen.width-250,screen.height,200,popTop);
          }else if(popTop<220){
          sunPop.show(screen.width-250,screen.height-popTop,200,150);
          }
          popTop+=10;
          var mytime=setTimeout("popshow();",50);
          }

          popmsg("2006年12月1日<br>歡迎光臨
          零點(diǎn)壹貮http://hi.baidu.com/0454ldk。<br>你要說(shuō)的話(huà)http://hi.baidu.com/0454ldk。<br>你要說(shuō)的話(huà)http://hi.baidu.com/0454ldk
          ~");
          ')
          }


          /*“發(fā)表評(píng)論”區(qū)域
          */
          #spBlogCmtor{background:url(圖片地址)}              /* 姓名*/
          #spBlogCmtURL{background:url(圖片地址) }/* 網(wǎng)址或郵箱*/
          #spBlogCmtText{background:url(圖片地址) }             /* 評(píng)論內(nèi)容*/
          #in_send div.tit{margin:10px 0 10px 0;color:#FFFFFF;font-size:14px;font-weight:bold}  

          設(shè)置“發(fā)表評(píng)論”區(qū)域上方的“發(fā)表評(píng)論”四個(gè)大字,其中color:#FFFFFF設(shè)置字的顏色,font-size設(shè)置字的大小,font-weight:hold設(shè)置讓這字體加粗,不加粗刪掉。

          #in_send td{color:#FFFFFF}

          設(shè)置“姓名”、“網(wǎng)址或郵箱”和“內(nèi)容”字的顏色。

          #spBlogCmtText {border: 1px solid #FFCCFF;background:#FFFFFF           no-repeat top center; background-attachment: fixed}

          設(shè)置評(píng)論框底色。background:#FFFFFF設(shè)置顏色,添加圖片則改為background:url(圖片),
          圖片最佳尺寸是503*153,1px 表示評(píng)論邊框的寬度,#FFCCFF 表示評(píng)論邊框的顏色。


          /*隱藏“查看該用戶(hù)在百度的”分類(lèi)*/
          加入#m_pro .basic a.nlk{display:none}代碼即可

          /*隱藏“百度空間測(cè)試版”圖片*/
          #m_comm_info img{display:none}

          /*添加天氣預(yù)報(bào)*/
          #m_mylink1 div.line{background:url(
          http://firetear.com/weather/weather.aspx?city=%u5BBF%u8FC1&style=1
          ) no-repeat bottom;line-height:40px;margin-bottom: 10px;margin-top:5px;padding-bottom: 138px}
          先編輯自定義模塊,鏈接地址為
          http://www.tq121.com.cn,然后更換為以上代碼,(注意:要把地址換在你所在地的地址,可以到 http://firetear.com/weather 網(wǎng)站里去找,只需把生成代碼里面SRC后面的地址替換以上地址即可)

          /*更多文章居右*/
          #m_blog div.more{margin:14px 0 16px 0;text-align:right}

          /*在友情鏈接添加“發(fā)送消息”的鏈接*/
          在友情鏈接里的鏈接地址內(nèi)填上:
          http://msg.baidu.com/ms?ct=21&cm=1&tn=bmSendMessage&un
          =你的百度用戶(hù)名
          這樣點(diǎn)擊該鏈接就可以給你發(fā)送消息,而這個(gè)鏈接另一個(gè)功能就是可以給自己發(fā)送消息。


          /*改變你的按鈕和輸入欄的顏色及字體*/
          input,select,textarea{color:green;font-size:14px;font-family:Tahoma,黑體;border:1px solid green;background-color:black}
          textarea{overflow:hidden}
            

          /*留言板添加圖片*/
          #spBCmtText{border: 6px solid #000000 ;color:#ffffff;background:url(http://hi.baidu.com/0454ldk
          ) no-repeat;overflow-y :scroll;height:150px}
          圖片最佳尺寸是503*153,6px表示評(píng)論邊框的寬度,#000000 表示評(píng)論邊框的顏色。

          /*百度空間添加QQ在線(xiàn)*/
          鏈接地址
          http://wpa.qq.com/msgrd?V=1&Uin=號(hào)碼 QQ

          主站蜘蛛池模板: 井冈山市| 博野县| 东辽县| 行唐县| 博白县| 葫芦岛市| 云安县| 大埔区| 乐安县| 泸水县| 延安市| 玉溪市| 三穗县| 阳山县| 韶关市| 博爱县| 沅陵县| 克东县| 永寿县| 鄱阳县| 金塔县| 会东县| 嵊泗县| 土默特右旗| 乌审旗| 毕节市| 景谷| 襄樊市| 清涧县| 长沙市| 聂荣县| 成安县| 扬中市| 湖北省| 沅江市| 岑溪市| 香格里拉县| 佛学| 秦皇岛市| 长汀县| 盐城市|