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

最新推荐文章于 2024-08-12 16:19:20 发布
最新推荐文章于 2024-08-12 16:19:20 发布
阅读量662 收藏
点赞数
分类专栏： Computer 文章标签： blog css html filter border table

这哥们花一天不到时间把CSS搞熟了，把页面弄的这样花哨，小弟真是佩服佩服~~

 

佩服之余想自己也不笨，也下了本<<CSS2中文参考大全>>看看~~~

今天边看参考，边看前面那哥们的CSS，边操作~~把页面整了下，自己稍微满意了~~（各人欣赏角度不同，如果有兄弟不喜欢，不要拍砖）

因为受到前面那哥们CSS的启发才想到看看CSS，索性把我改的CSS也贴出来，供大家参考参考:

 

整这个博客页面最大的收获的应该是，理解如何调用DOM树中的任何一个对象（主要通过ID和Class)!

/* 中间的主版面 */
body{
    background: url("https://p-blog.csdn.net/images/p_blog_csdn_net/snailjava/278448/o_070211wall6.png");
/*
    cursor: url('http://webme.bokee.com/inc/mouse020.ani');
    font-size: 0.8em;
    font-family: Geneva, Arial, Helvetica, sans-serif;
*/
}


/* 评论相关，设置这个值是为了透明背景 */
.commentsTable{
    background-color: #000;
}

/* 文章连接和日期的字体 */
div.postTitle{
font: 10pt/12pt "Arial" normal;
color: organge;
}
div.postFoot{
font: 10pt/12pt "Arial" normal;
color: black
}
div.entrylist{
font: 10pt/12pt "Arial" normal;
color: black
}


/* 首页的透明度 */
table.Framework{
filter:alpha(opacity=90);
}
td.MainCell{
background-color: transparent;
}
#main{
//filter:alpha(opacity=70);
filter:blur(strength=50) flipv() ;
background-color: transparent;
}
#main div{
background-color: transparent;
}

 

/* banner上的背景图 */
#top table{
height: 100%
background-image: url(https://p-blog.csdn.net/images/p_blog_csdn_net/snailjava/277337/o_070206CplusplusPrimer.jpg)
}

/* 隐藏“标语”，我用了自己的图作背景
.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;
    widht:300px;
    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=90);
    border-collapse : collapse;
}
*/


/* CSDN首页、CSDN社区、CSDN技术中心等等东西  */
#mytopmenu{
    display:none;
}
#mylinks{
    display:none;
}

/* 页面最下方的Powered by */
.footer{
    display:none;
}

/* 隐藏“特别推荐” */
#csdn_zhaig_ad_yahoo{
    display:none;
}

 

/* 评论栏相关
#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;
}
*/

/* 框架表格边框设定 */
table.Framework{
position: absolute;
border-color: black;
border-width: 10px 10px 10px 10px;
border-style: groove;
}

/* banner上的图 */
#top table tr td{
background: url("https://p-blog.csdn.net/images/p_blog_csdn_net/snailjava/278448/o_070211banner2.jpg");
background-color : black
}
#top table tr{
background-color : black
}
#top table{
background-color : black
}
#top{
background: url("https://p-blog.csdn.net/images/p_blog_csdn_net/snailjava/278448/o_070211banner2.jpg");
height:50;
background-color : black
}

/*
div.BlogStats{
display:none;
}
*/

 

zengbo0710
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSDN 博客排版技巧
Life runs on code
04-27 8717
CSDN的博客排版采用的编辑器是xhEditor，官方介绍是：能实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化精简，不丢失任何细节效果。但是，实际使用中不丢失任何细节是不能的，word -> html 感觉样式或多或少都会有改变。下面说说我个人的实用经验和建议。
Blog历次的版面风格（图）
编程手札
05-28 1060
自从CSDN升级博客到3.1a后，blog的CSS效果已经出不来了，不过没时间改，只好临时用着系统自带的版式，下面是历次博客版面效果图：05年8月前的：06年9月前的： 最近的效果图： 对应的CSS定义：body {...}{  margin:0px;  padding:0px;  font-size:12px;  font-family: verdana, 宋体;  
在ASP.Net中几种利用CSS实现个性化界面的方法
04-25 835
 看了老猫的文章，通过使页面动态加载不同CSS实现个性化界面(如个性化blog界面) 有以下几种方法方法一:       HtmlGenericControl 定义不由特定的 .NET Framework 类表示的所有 HTML 服务器控件元素的方法、属性和事件。其中href属性可以从用户配置中动态获得，然后进行页面设置。   public void page_load(Obj
超炫酷的页面
ln1138932964的博客
11-17 228
超炫酷的页面
炫酷流光个人主页源码分享及在线部署教程
sunshine的博客
10-10 5564
文章目录一、写在前面二、效果展示三、部分源码窥探HTMLCSSJS四、完整源码获取五、DIY建议六、在线部署教程1、注册GitHub2、新建一个仓库3、将代码上传到仓库3.1 GitHub在线上传3.2 使用git上传4、GitHub Pages设置5、大功告成！七、写在后面 一、写在前面   编程之所以迷人，正因其永远不乏乐趣，今天给大家分享一套精美的个人主页源码，并附带在线部署教程，一起来感受程序的魅力吧！ 本文同步发表在我的个人网站上，欢迎访问：https://sunguoqi.com/2021/1
分享119个HTML个性简实模板，总有一款适合您
zy0412326的专栏
02-25 2490
分享119个HTML个性简实模板，总有一款适合您
【博主推荐】html好看的个人主页(附源码)
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
06-04 4万+
html好看的个人主页，个人主页四种风格，可以自己灵活配置，改变背景图，星空主页风格，简洁个人主页风格，背景图个人主页风格，卡片个人主页风格。附带源码下载。
【HTML】极简个人主页设计
wei2019_的博客
12-25 2万+
基于HTML的极简个人主页设计效果图源代码 效果图 源代码 主入口 <html> <frameset cols="250,*"> <frame src="导航.html"> <frame src="哈利的简介.html" name="showframe"> </frameset> </html> 导航 <html> <bod
超级实用且不花哨的js代码大全.html
07-27
//正则匹配 匹配中文字符的正则表达式： [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内)：[^\x00-\xff] 匹配空行的正则表达式：\n[\s| ]*\r 匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/ 匹配首尾空格的正则表达式：(^\s*)|(\s*$)（像vbscript那样的trim函数） 匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)? 以下是例子： 利用正则表达式限制网页表单里的文本框输入内容： 用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,‘‘)" onbeforepaste="clipboardData.setData(‘text‘,clipboardData.getData(‘text‘).replace(/[^\u4E00-\u9FA5]/g,‘‘))"
超炫个性化首页
08-07
非常漂亮的一款个性化主页，随机显示3种个性首页，是博客首页必备 超炫个性化首页——你值的下载
美化网页div -让边框拥有阴影，边角变得圆滑
大鑫的博客
08-15 1万+
DIV边框过于单调？ 来为你的DIV边框加上阴影吧，充实边框，美化页面必备 <style type="text/css"> .main{ background-color: rgba(102, 146, 191, 0.44); /*边框*/ border: solid 1px rgba(102, 146, 1...
CSDN实训 - 个人博客界面制作
weixin_51196032的博客
10-30 2778
文章目录前言一、个人博客界面展示二、HTML代码展示总结 前言 最近，我看到一句话，是解释什么是博客的，他是这样说的：博客是什么，简单的说就是记录生活和工作的记事本，一种公开与网络世界的日记本。这句话也充分说明了众多博主的心声，所以今天，我们来写博客，自己当站长！ 提示：以下是本篇文章正文内容，下面案例可供参考 一、个人博客界面展示 二、HTML代码展示 <!DOCTYPE html> <html lang="zh-CN"> <head><meta nam
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 58万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
我的个人博客网站是怎么制作的？
雷小天博客
07-03 2万+
首先得恭喜自己，因为今天我的个人博客网站终于上线了！要问到我做个人博客的初衷是什么？这得追溯到大学的时候，大学刚接触到Dreamweaver，喜欢上Photoshop是就萌芽出做一个属于自己的网站。那时就在想有个自己的网站得多神气啊！说实话那时就是单纯的喜欢，不过今天算是如愿以偿了！说到做网站，我相信每一个做web前端、网站后台、SEO技术及自媒体相关的工作人员，心里面都有个做个人网站的想法。那么...
如何写一个花里胡哨的点击按钮（HTML+CSS+JS）
陈新科的博客
03-02 6173
雷迪森安的乡亲们，欢迎来到老实人的前端课堂，今天我们来写个骚气磅礴的轮播图吧，内容太干，建议收藏起来慢慢看，最后我还会教大家如何免费部署上线哦~ 1646211569(1).jpg 正片 小轮播图滑动滚播，好不好看你说了算。 结构就两行 <div id="main"> <h1>something</h1> <div class="content"> <p>You can press <kbd>▲<
一周极客热文：程序员给女朋友用HTML5制作的3D相册（附源码）
博客
04-21 2万+
一个高大上的HTML5作品，是利用HTML5 canvas制作的3D图片展示。据说是程序员给自己女朋友做的。 谁说程序员不懂浪漫！ 源码下载：CSDN下载频道或来自杨林枫的整理。 一、 提升开发效率的十个工具 Git——试一试。 Stack Overflow——满足了它的活跃用户的虚荣心，而那些没有帐户的用户会不断的涌进来，找到他们满意的答案，并且点击推荐的广告。 Office 36...
css实现水滴效果图
最新发布
yinge0508的博客
08-12 213
【代码】css实现水滴效果图。
模仿CSDN博客的框架用html+css写一个博客
05-19
好的，以下是一个简单的CSDN博客框架的HTML代码： ```html <!DOCTYPE html> ...现在，我们就完成了一个简单的CSDN博客的HTML+CSS框架。您可以根据自己的需求进行修改和扩展，添加更多的功能和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值