花了一段時間看css把這個新blog個人化了一番——還好這裡和csdn用的是一個blog系統,省了不少事情。

來源:互聯網
上載者:User
 這裡寫的是我在yesky上的blog(已棄用)的個人化心得,能量有限,僅僅是找了一晚上資料的結果,還請不要見笑。

現改到這個樣子,看起來還挺合心意,以後準備事情況在作定奪,可能會加上背景換一個title的圖片,然後加上一個可用的計數器和google,也有可能加入google的廣告——這裡可以插入代碼真是很不錯的,給人積極性亞——要是能提供“相片冊”,支援串連外部圖片,然後上傳圖片中提供對swf檔案的支援就更好了。

在頁面中可以開啟源檔案,這樣就可以看到所調用的css檔案的地址了。從系統中調用的預設css檔案在這裡:blog.yesky.com/Blog/Skins/Cogitation/style.css;然後在管理/選項/設定/定製CSS選取器中輸入要更改的css屬性框,這樣系統會用自訂的屬性框覆蓋預設的,已完成個人化。個人化的css部分在這裡:blog.yesky.com/Blog/使用者名稱/customcss.aspx,用文字編輯器開啟就可以了,當然專用軟體更好。

我用的是Cogitation樣式,這裡對這個檔案進行以下註解——我也是現買現用,因為以後可能還用的著,不想自己剛才的3個小時白白浪費掉,所以這裡簡單註解一下。

........發現“插入代碼”功能不好用——或者我還不會用——也沒有help。。。。。空歡喜了。。。。。

//body值得可能是主體內容吧——不確定
body {
 font-size : 12px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin : 0px;
 word-break:break-all;
}
//——不確定

td
{
 font-size : 12px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
//指的是超串連文字相關的屬性。

a:visited,
a:active,
a:link { 
 color: Navy;
 text-decoration : none;
}

a:hover {
 text-decoration : underline;
}
//h1,h2,h3,h4,h5號字型大小的定義,和這些字型大小的超連結效果定義。

h1 {
 margin : 0px;
 margin-top : 10px;
 margin-bottom : 5px;
 font-size : 18px;
}

h1 a:visited,
h1 a:active,
h1 a:link {
 color : #000;
}

h1 a:hover {
 color : #47F;
 text-decoration : none;
}

h2 {
 margin-top : 10px;
 margin-bottom : 3px;
 font-size : 13px;
}

h3 {
 font-size : 12px;
}

h5 {
 margin: 0px;
 padding: 0px;
}
//——不確定是什麼文字的定義

p {
 margin: 10px 0px;
}
頁面底部著作權的定義

#authors ul {
 list-style : none;
 padding : 0px;
 margin : 0px 5px;
}
//左邊news項的定義

div.News
{
 font-size: 11px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 padding: 5px;
 padding-left: 10px;
}
——頂上的一個東西,還不知道具體指哪

.HeaderTitle
{
 font-size : 1.5em;
 margin: 0px;
}
//指的是“龍龍眯起來”的定義

.HeaderTitles
{
 padding-top: 10px;
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 width: 100%;
}

.HeaderTitles a:visited,
.HeaderTitles a:active,
.HeaderTitles a:link,
.HeaderTitles a:hover
{
 color: White;
 text-decoration : none;
 font-size: 18px;
 font-weight: normal;
}
//應該是頂部的那個彙總,管理什麼的部分

.HeaderBar
{
 font-weight: normal;
 font-size: 11px;
 border-collapse: collapse;
 background-image: url(images/BlueTabBack.gif);
   background-repeat:repeat-x;
}

.HeaderBar a:visited,
.HeaderBar a:active,
.HeaderBar a:link
{
 color: WhiteSmoke;
 text-decoration: none;
 font-weight: normal;
}
——不明

.HeaderBarTab
{
 background-image: url(images/BlueTabFace.gif);
   background-repeat:repeat-x;
   border-collapse: collapse;
   padding: 0px;
}
//就是頂上的那個統計,右邊那個

.BlogStatsBar
{
 text-align:right;
 font-weight: normal;
 font-size: 11px;
 color: Silver;
 border-collapse:collapse;
}
//日期,每個post下邊那個吧

p.date img {
 vertical-align : middle;
}

p.date {
 font-size : 11px;
 font-weight : bold;
 margin-bottom : 0px;
 padding-top: 2px;
 padding-right: 0px;
 padding-bottom: 4px;
 text-align: right;
}
——不明

blockquote {
 font-style : italic;
}
//顧名思義,每個post的題目連結

div.postTitle a:visited,
div.postTitle a:active,
div.postTitle a:link
{
 color: Navy;
 text-decoration : none;
}
//每個post框的樣式

div.post
{
 border-right: gainsboro 2px solid;
 border-top: gainsboro 2px solid;
 border-left: gainsboro 2px solid;
 border-bottom: gainsboro 2px solid;
}
//post題目的樣式

div.postTitle
{
 padding-left: 3px;
 font-weight: bolder;
 font-size: 13px;
 padding-bottom: 3px;
 padding-top: 3px;
 border-bottom: gainsboro 1px solid;
 background-color: whitesmoke;
}
//每個文章和回複的內容文字屬性

div.postText
{
 padding-right: 10px;
 padding-left: 3px;
 font-size: 13px;
 padding-bottom: 5px;
 padding-top: 10px;
}
//post底部那個小框的樣式

div.postFoot
{
 background-color: WhiteSmoke;
 border-top: gainsboro 1px solid;
 font-size: 11px;
 padding-right: 3px;
 padding-left: 3px;
 padding-bottom: 1px;
 padding-top: 1px;
 text-align: right;
}
//頂上的樣式,那個深藍色圖片的樣式

#top
{
 background-image: url(images/BlueTabBackground.gif);
   background-repeat: repeat;
 color : WhiteSmoke;
 border-top : 4px solid Black;
 border-bottom : 4px solid Black;
 padding: 0px;
 margin: 0px;
}
//應該是管理呀什麼的中間那些分界線——不確定

#tagline {
 font-size : 16px;
 margin : 0px;
 color: White;
}
//左邊的菜單和相應的h,連結的定義

#leftmenu {
 position : absolute;
 left : 0px;
 width : 180px;
 height:auto;
 background-color: WhiteSmoke;
 padding-top: 0px;
}

#leftmenu h3 {
 font-size : 11px;
 margin : 0px;
 margin-top : 10px;  
 padding-bottom: 2px;
 padding-left: 3px;
 border-top: solid 1px Gainsboro;
}

#leftmenu ul {
 list-style: none;
 margin : 0px;
 padding-left : 5px;
 margin-left : 5px;
 margin-bottom : 10px;
 font-size : 11px;
}

#leftmenu a
{
 padding: 1px;
 text-decoration: none;
}

#leftmenu a:active,
#leftmenu a:visited,
#leftmenu a:link
{}

#leftmenu a:hover
{
 font-style:italic;
}
//右邊主體的定義

#main {
 margin-left : 180px; 
 background-color : White;
 padding : 10px;
 border-left : 1px solid #555;
 border-bottom : 4px solid Black;
}

#footer {
 margin : 0px; 
 padding-top : 5px;
 text-align : center;
 font-size : 10px;
}
//回複框的定義

#CommentForm
{
 font-size : 11px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

input, textarea
{
 font-size: 11px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

.CommentForm
{
 font-size : 11px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.Button
{
 border: 1px solid SteelBlue;
 background-color: gainsboro;
}
//那個日曆的定義

.Cal
{
 border : 1px solid #186AA2;
 width:100%;
 font-family:Arial;
 font-size: 12px;
 margin-top:0px;
 margin-bottom:10px;
 height:180px;
 background-color:WhiteSmoke;
 padding : 0px;
   
}

.CalTitle
{
 background-color : #014E82;
 border-color:#ADF;
 font-family:Arial;
 font-size: 13px;
 font-weight:normal;
 color : #000; 
 margin-left : 0px;
 padding : 0px;
 height:100%;
  
}

.CalOtherMonthDay
{
 color:#808080;
 
}

.CalSelector
{
 
}

.CalNextPrev
{
 
}

.CalDayHeader
{
 background-color:#186AA2;
 color : #000; 
 
}

.CalSelectedDay
{
 
}

.CalWeekendDay
{
 
}

.CalTodayDay
{
 /*background-color:#93C49C;*/
 color:Red;
}

通過google可以找到許多關於css的教程,我看得是這裡的:http://www.hongen.com/pc/homepage/css/css0101.htm
這裡主要用到的就是css的屬性這方面的內容,因為只有知道了每個“:”後便都可以填什麼,才可以進行自訂——用專用編輯器的就不要說了,呵呵。自然,你還可以用一些進階內容,作更玄的效果——見識過一些這方面的高手是如何牛叉的。。。。。

關於天氣預報(我也還有些用不好),計數器,搜尋,在網上,google上,可以找到好多內容。因為csdn和這裡的用的是同一個Blog系統,而且啟動較早,又是編程高手群居的地方(呵呵,也只能這麼想了),所以,建議在google搜尋的時候使用site:csdn.com來搜,會方便一些,那裡有一些人已經總結了好多blog個人化定義的方法,呵呵。

Q :能告知天氣預報怎麼做的嘛?
A:<br>
<b>&nbsp今日天氣</b>
<br>
<center>
<iframe width=157 height=240 frameborder=0 scrolling=NO src='http://appnews.qq.com/cgi-bin/news_qq_search?city='></iframe>
</center>
<br>

代碼如上。本來還可以做到直接顯示你所在的城市的,但是需要做換一下城市代碼,這個我還不會,也不知道城市代碼,所以知識預設的深圳。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.