博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
打造CSDN里最有个性的Blog版面(HTML+CSS)http://blog.csdn.net/DL88250/archive/2007/02/06/1503789.aspx
阅读量:2399 次
发布时间:2019-05-10

本文共 4096 字,大约阅读时间需要 13 分钟。

呵呵,从昨天到今天一直在弄CSDN的Blog美化。本来我最讨厌的就是网页编程了,不过没办法,

自己的Blog不好看。。。。所以HTML和CSS从0开始自学了满满24小时,做了现在这个版面。。。。
 说说我这24小时的一点点经验吧。开始的时候我是打开其它人的Blog,右键看源代码,自己努力分析,
上网查学习资料。这里,介绍一本学CSS很好的书:《CSS中文手册》,吐血推荐。。。。
 在对CSS有了个大概的了解以后可以进行实战了。还是先说说别人源码的分析,
 我找了几份比较好的:     进CSDN自己Blog的后台,在配置项里添加CSS代码。
由于自己没有一点经验,我一开始是把那几份一份地复制进去看效果,再结合《CSS中文手册》,重点是知道
什么是id,class,只要知道这两个的概念的话,在一开始的Blog板面设计里就勉励够用了。
    看到这里,你应该感觉自己没有CSS基础也可以修改Blog的板面了吧,呵呵。。。。下面是我的CSS代码,
 先对Blog里CSS的总体布局来个简介:

 

/*
 评论相关,设置这个值是为了透明背景 
*/
.commentsTable
{
    background-color
:
 #000
;
}
/*
 隐藏“标语”,我用了自己的图作背景 
*/
.headerText
{
    display
:
none
;
}
/*
 最上面的整个Banner
*/
.header
{
    border
:
none
;
    height
:
200px
;
    background
:
 url("https://p-blog.csdn.net/images/p_blog_csdn_net/dl88250/260239/o_Banner_.jpg") no-repeat
;
}
/*
 设置域为a中的文本 
*/
a
{
    font-family 
:
 华文彩云
;
    font-size
:
17px
;
    color
:
 darkgreen
;
    text-decoration
:
 none
;
}
a:link
{
    color
:
 mediumvioletred
;
 
    text-decoration
:
 none
;
}
a:visited
{
    color
:
 #990066
;
 
    text-decoration
:
 none
;
 
}
a:active
{
    color
:
 #660066
;
 
}
a:hover
{
    color
:
 #660066
;
    text-decoration
:
 underline
;
}
/*
左边导航栏内容
*/
#leftcontent
{
    border
:
none
;
    padding-top
:
 99
;
    background-color
:
 transparent
;
  
}
/*
 “文章”、“相册”等 
*/
.listtitle
{
    font-family
:
 华文行楷
;
    color
:
 #6666CC
;
    background
:
 none
;
}
/*
 不显示WMP播放器,关于播放器的设置是在HTML里做的 
*/
#MediaPlayer
{
    display
:
none
;
}
/*
 整个文章的内容栏 
*/
#centercontent
{
    padding-top
:
0
;
    font-size
:
100px
;
}
/*
 日历表,现在我用的是模板带的 
*/
 .CalTitle
{
    background-color
:
 transparent
;
}
.CalDayHeader
{
    color
:
 #993366
;
    font-family
:
华文彩云
;
    background-color
:
 transparent
;
}
.entrylist
{
    background-color
:
 transparent
;
    font-family
:
华文行楷
;
    font-size
:
130%
;
    color
:
green
;
    border
:
none
;
}
/*
 整个版面表的设置 
*/
table
{
    filter
:
alpha(opacity=60)
;
    border-collapse 
:
 collapse
;
}
/*
 CSDN首页、CSDN社区、CSDN技术中心等等东西 
*/
#mytopmenu
{
    display
:
none
;
}
#mylinks
{
    display
:
none
;
}
/*
 页面最下方的Powered by 
*/
.footer
{
    display
:
none
;
}
/*
 隐藏“特别推荐” 
*/
#csdn_zhaig_ad_yahoo
{
    display
:
none
;
}
/*
 中间的主版面 
*/
body
{
    background
:
 url("https://p-blog.csdn.net/images/p_blog_csdn_net/dl88250/260239/o_%e8%83%8c%e6%99%af.jpg") 
;
    cursor
:
 url('http://webme.bokee.com/inc/mouse020.ani')
;
    font-size
:
 0.8em
;
    font-family
:
 Geneva, Arial, Helvetica, sans-serif
;
}
 
/*
 评论栏相关 
*/
#comments
{
    padding-left
:
 40px
;
    font-size
:
 10pt
;
    background-color
:
 #000
;
  
}
#CommentForm
{
    background-color
:
 #000
;
    width
:
500
;
    background
:
 url("https://p-blog.csdn.net/images/p_blog_csdn_net/dl88250/260239/o_%e8%af%84%e8%ae%ba%e8%83%8c%e6%99%af.gif
") no-repeat
;
}
/*
 公告栏 
*/
.newsItem
{
    font-family
:
 华文行楷
;
    color
:
red
;
}
/*
 所有img图 
*/
img
{
    filter
:
 invert()
;
 
}
/*
 文章正文 
*/
.post
{
    border
:
 dotted #663333
;
    background-color
:
 #000
;
    padding-bottom
:
 5px
;
    padding-top
:
 5px
;
    line-height
:
120%
;
    color
:
 chocolate
;
}
.postFoot
{
    color
:
#33CCFF
;
}
/*
 文章摘要 
*/
.postText
{
    color
:
chocolate
;
}

上面的代码就是我现在用的这个CSS了,可以先都贴在自己的CSS修改栏里看看效果吧^^

现在对Blog的CSS应该怎么改有个大概了解了。我觉得其实美化Blog最重要的是要自己去看
Blog的代码。可以这样,先打开自己的主页,右键看源码。看的时候要特别主意class和id
这两个关键字,关于这两个概念的详细介绍请参考《CSS中文手册》。先不管什么,找到
class或者id就放到后台改一下看看效果,呵呵。。。。

    好了,关于CSS的修改可以告一个段落了,下面说说HTML的挂件添加。我的Blog里主要

用的是那个透明的金鱼Flash、一个WMP播放器和一个钟表。代码如下:

 

<
EMBED 
align
=right 
height
=700width=200
src
=http://imgfree.21cn.com/free/flash/17.swf 
style
="LEFT:10px; POSITION:absolute; TOP:-70px"
 width
=700; 
quality
="high"
 wmode
="transparent"
>
<
font 
size
=4
>
<
object 
classid
="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
 class
="OBJECT"
 id
="MediaPlayer"
 width
="200"
 height
="65"
 
>
<
param 
name
="ShowStatusBar"
 value
="-1"
>
<
param 
name
="Volume"
 value
="1"
>
<
param 
name
="Filename"
 value
="http://www.sy53.com/mp3/brave.mp3"
>
<
embed 
type
="application/x-oleobject"
 codebase
="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
 flename
="wmv"
 src
="http://www.wangyanpiano.com/file/Tears0372.wma"
width
="185"
 height
="80"
></
embed
></
object
>
<
EMBED 
SRC
=http://bbs.smgbb.cn/Skins/Default/clock.swf 
WIDTH
=170 
HEIGHT
=190 
wmode
=transparent 
quality
=high 
loop
=true 
menu
=false
>

代码可以直接Copy过去,调整一下显示时的大小就能用了。这里要提醒的是不要放太多的Flash,相当耗CPU滴。。。。

 好了,我简短的CSDN之Blog美化教程到这里就结束了,祝大家都有个个性化的Blog!

 
你可能感兴趣的文章
详细定义嵌入式系统(转)
查看>>
linux入门教程(3)(转)
查看>>
动手制作自己的启动盘(转)
查看>>
在Linux中做系统引导盘(转)
查看>>
2.6内核的安装(转)
查看>>
多用户,多语言设置(转)
查看>>
断电后的系统修复(转)
查看>>
Squid优化完全手册(1)(转)
查看>>
全都是外国人写的防火墙脚本,我也来写一个,希望大家跟我一块做好(转)
查看>>
使用iptables实现数据包过滤(转)
查看>>
创建iptables NAT规则(转)
查看>>
初始化简单的IP放火墙(Script)(转)
查看>>
恢复IpTables的默认设置(Script)(转)
查看>>
用iptales实现包过虑型防火墙(一)(转)
查看>>
用iptables实现NAT(转)
查看>>
MYSQL(解决方法):Client does not support authentication(转)
查看>>
Oracle 游标使用大全(转)
查看>>
天龙八步-》打造debian-desktop-》配置桌面[三](转)
查看>>
天龙八步-》打造debian-desktop-》安装声卡[五](转)
查看>>
在Debian系统中编译Linux内核需要安装的软件包(转)
查看>>