打造CSDN里最有个性的Blog版面(HTML+CSS)

news/2024/7/4 9:49:22

 呵呵,从昨天到今天一直在弄CSDN的Blog美化。本来我最讨厌的就是网页编程了,不过没办法,
自己的Blog不好看。。。。所以HTML和CSS从0开始自学了满满24小时,做了现在这个版面。。。。
 说说我这24小时的一点点经验吧。开始的时候我是打开其它人的Blog,右键看源代码,自己努力分析,
上网查学习资料。这里,介绍一本学CSS很好的书:《CSS中文手册》,吐血推荐。。。。
 在对CSS有了个大概的了解以后可以进行实战了。还是先说说别人源码的分析,
 我找了几份比较好的:  
http://blog.csdn.net/DL88250/archive/2007/02/05/1502837.aspx  进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!


http://www.niftyadmin.cn/n/1998734.html

相关文章

php代码编写注册登录页面,PHP开发登录注册完整代码之注册HTML页面

创建 reg.html 文件我们此页面有一个表单&#xff0c;里面有四个input输入框&#xff0c;我们用JS对输入框里面的内容作了登录判断&#xff0c;并使用了css对表单进行了布局。代码如下html>登陆界面function checkinput(){if(myform.name.value""){alert("请…

通过Live Writer Blog客户端来写blog

通过Live Writer Blog客户端来写blog 前阵子微软件发布了一款管理个人blog的客户端工具&#xff1a;Windows Live Writer&#xff08;Beta版&#xff09;。它不光能够支持Windows Live Spaces的用户使用&#xff0c;同时它也支持现在网络上其它流行的一系列Blog内容管理系统。前…

php招聘需要笔试吗,PHP招聘笔试部分

嗯&#xff0c;基本上这些题都答得好那就…直接上题.1. 基本知识点1. HTTP协议中几个状态码的含义:503 500 401 200 301 302。。。2. Include require include_once require_once 的区别.3. PHP/Mysql中几个版本的进化史&#xff0c;比如mysql4.0到4.1&#xff0c;PHP 4.x到5.1…

★ 看看你的博客值多少钱 ★

★ 看看你的博客值多少钱 ★ 刚一个朋友发过一个网站&#xff0c;是说有个叫的提供了一个博客价值评估工具。该工具能通过输入你的博客地址之后&#xff0c;由它根据Alexa排名、各大搜索引擎搜索记录数、RSS订阅数进行综合评估&#xff0c;完后给出相应参考价值。进入博易网htt…

test for my first artical by client software

Hey, come on! I get something to tell you! Something to put my heart! If you love me. Please stay! Dont go away! andylin

php使用phpmailer,php 发邮件(使用phpmailer类)

利用php中的phpmailer发送邮件的示例&#xff0c;示例代码以及该示例的页面效果如下&#xff0c;另外文章的末尾提供了phpmailer文件的下载地址&#xff0c;该文件里面有许多发送邮件的例子&#xff0c;不过都是英文的。具体代码&#xff1a;利用phpmailer发送电子邮件if(isset…

关于vue的懒加载实践

最近在研究vue的按需加载&#xff0c;好奇怪&#xff0c;之前好像并没有看到vue的官文里面有这一部分&#xff0c;是我看差了吗hahaha~尬笑~ 其实只需要看vue-router官文就可以了&#xff0c;里面有懒加载的讲解&#xff0c;并且附带了详细内容的连接。一个一个看过去&#xff…

oracle12c灾备,Oracle 12c PDB的数据备份恢复

今天测试了一下12c中的PDB还原恢复&#xff0c;里面还是有不少的差别。我就简单模拟了一个破坏场景&#xff0c;是在一个未打开的PDB tcymob0从中删除了数据文件usres01.dbf,然后尝试备份恢复。当然在这个操作前&#xff0c;我们使用RMAN来备份&#xff0c;使用命令backup data…