這裡寫的是我在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> 今日天氣</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>
代碼如上。本來還可以做到直接顯示你所在的城市的,但是需要做換一下城市代碼,這個我還不會,也不知道城市代碼,所以知識預設的深圳。