博客园模板 样式优化

简介:

更新,2013-07-12 15:14

加入3种屏幕宽度的判断和样式定义

View Code

更新,2013-07-12 14:35

加入了媒体查询并做调整的定义,可是@media在IE9以下支持不是很好。

这样虽然解决了一部分问题,可是左边没有办法居中。因为这个模板的html的架构是:

 

<div id="top">
<div id="leftmenu"><div id="main">
<div class="footer">

因此自适应居中不好法做啊。 

@media all and (min-width:1280px) {
    #cnblogs_post_body p img { max-width
:  600px;  }
    #leftmenu 
{  position:  absolute;  left:  10px;  width:  200px;  height:  auto;  }
    #main 
{  margin-left:  210px;  margin-right:  0;  max-width:  814px;  overflow:  hidden;  }
    .input_my_zzk 
{  width:  110px;  }
}

内容提点

Firebug简单介绍

样式定义简介

修改实战

序言

博客园提供了非常丰富的模块,也有很多非常赞的模板,可总是会有一些很喜欢的模板,却又觉得有些美中不足,如果可以自己美化一番,那就更妙了。

那么就从这里开始一次“博皮”的美容之旅。 

博客园提供了两种自定义样式的途径:

1、自己创建一个模板,提交给博客园管理团队

2、使用一个现有模板,然后在此基础上编写自定义样式

这里介绍的是第二种

Firebug简单介绍

前端优化调试必须要有一个利器,而火狐上的Firebug插件就是其中之一。

下面就简单的介绍下使用,熟悉的朋友跳过。

定位页面元素

使用这个功能可以轻松的定位到页面的任何html标签。

首先点击,然后鼠标移动到页面的目标位置,然后鼠标按下。

比如这里鼠标移动到【常用链接】,鼠标按下后,就可以看到HTML代码定位到目标位置了。

查看标签的样式定义

了解定位html标签之后,再看看怎么定位查看css样式定义。

通过上面定位html标签,也会马上显示出目标标签的样式定义。

或者是在左边[HTML窗口]点击html标签,右边窗口也会马上显示标签的样式定义。

这里需要说一下的是,注意看右边显示的某定义位于样式文件的第几行,这样有助于快速的找到需要修改的位置。

比如这里的

把自定义的样式复制一个文件中,然后使用一个可以高亮带行数显示的编辑器打开。

调整样式即时显示

Firebug还有一个非常赞的功能

调整样式,立即显示效果

  

在样式窗口,样式定义位置双击,可以修改定义。

在空白位置双击,可以新建样式定义。 

样式定义简介 

样式定义需要记住三点要素选择器、属性定义、属性定义顺序(是否冲突和覆盖)

如果自己想不到好的样式,就参考别人的设计,像支付宝、微博等网站的样式设计的还是不粗的,或者自己喜欢的网站。

然后通过Firebug就可以轻易的获取到定义的样式。

手册

手头有最新的css参考手册,这里推荐http://css.doyoe.com/css.chm 具有最新的css3参考,保持更新。

 

选择符

具体请参考手册,这里提一个有趣的应用场景

想设置某个模块,而那个模块既没有id也没有class属性,从而无法定位?

没关系,使用关系选择符轻易的搞定。 

比如我想设置的【随笔分类】模块恰好符合上面两点的情况。

 

看到模块上面的

<div id="itemListLin_con" style="display:none;">

挨的那么近,就拿你来定位了。

先来看看关系选择符是怎么样描述的。

选择符

名称

版本

简介

E F

包含选择符

CSS1

选择所有被E元素包含的F元素。

E>F

子选择符

CSS2

选择所有作为E元素的子元素F

E+F

相邻选择符

CSS2

选择紧贴在E元素之后F元素。

E~F

兄弟选择符   

CSS3   

选择E元素所有兄弟元素F

我们这里要用的就是相邻选择符

#itemListLin_con + h3 + ul { height350pxoverflowhidden; }

如此,就可以轻易解决定位的问题。

 

抓住了目标,当然就是好好蹂躏对方啦。

打开css参考手册,想想搞那些花样吧。

什么?想不到怎么玩?问谷哥度娘吧~~~~” css经典样式”…… 

修改实战

在博客管理——设置

可以看到

选择一个模板

把自己写的样式复制过来,点击下面的保存

 

属性定义

我介绍下自己觉得比较常用的几个属性定义。

margin、padding、float、with、height、min-with、min-height、max-with、max-height、(position top left bottom right)

把这几个属性用好,页面元素基本就不会不受控制的乱窜了。 

我使用模板的主要修改

整体调整 

原来紧贴边沿修改为左右两边各留出50像素的空,左边栏由200调整宽度为400

如果是在小浏览器或者非最大化的情况,原来的样式定义是挺不错的,但是在大显示器、宽屏、最大化的情况下,就会有些别扭了。

 


div.post {  border:  1px solid gainsboro;  min-width:  350px;  }

限定文章模块最小宽度为350,防止无意义的缩小。

 

随笔标签 

调整前

调整后

 


 

 


 

这什么玩意啊,都看不清楚!

 

由于我的标签设置的比较细,所以太多太多了,所以我想把它修改成紧凑式的排列。

 

之前一个标签一行,可想而知这个模块有多长,现在修改完之后,就非常节省空间了。

 


看看样式是怎么定义的。

定义高度和超出 隐藏,防止页面元素 错乱

#itemListLin_con + h3 + ul {  height:  350px;  overflow:  hidden;  }

这里最重要的一点是设置浮动,由于我的标签一般不会很长,所以就没有限定长度,如果你的标签有的很长,则可以设置一个max-width,轻松搞定。

#itemListLin_con + h3 + ul > li {  float:  left;  margin-bottom:  5px;  margin-right:  10px;  overflow:  hidden;  }

搜索栏调整


这里需要说一下的就是圆角、:focus、:hover及生成背景图片的应用


复制代码
input.btn_my_zzk, #btn_comment_submit 
{
    background
:  linear-gradient(#FFFFFF, #F0F0F0) repeat scroll 0 0 #F0F0F0;
    border
:  1px solid #CCCCCC;
    border-radius
:  3px 3px 3px 3px;
    cursor
:  pointer;
    font-weight
:  bold;
    text-shadow
:  0 1px #FFFFFF;
    white-space
:  nowrap;
}
复制代码

linear-gradient 在ie10以下不支持~~~~

最新评论区域修改

修改前

修改后

 

这个修改很简单,由于前面已经设定了左边区域的宽度,所以,在这里,我只加了一个


#RecentCommentsBlock ul > li {  margin-bottom:  10px;  }

把标签li的底部外延边距设置成10像素。

发表评论区域调整

 

调整前

调整后


 


 

 

输入框的调整和上面搜索输入框的调整是一样的原理。

 

主要是把[使用Ctrl+Enter键快速提交]浮动到左边,通过设置顶边的外延边距来确定位置。 这里也用到了一个相邻选择符

#commentbox_opt + p {  float:  left;  margin-top:  -30px;  }

提交评论 我是直接通过左边外延边距来使其定位在右边。 

margin-left: 475px;

推荐反对区域的调整

(更新,最后还是把推荐区域放回到右边了...) 

原来是固定在文章下面的,为了更加方便园友的操作,嘿嘿,我把它固定在页面的左下角。

为什么要放在左下角,而不是右下角呢?

因为滚动条一般……是在右边的,用户在拉滚动条时,焦点相对也是在右边的。

不是非常重要的信息,一直出现在用户的视野,并不是好的设计,因此我移到了右边,并且把推荐漂到了右边。

这样不会影响用户的浏览,也是相当于用户真的费劲把鼠标移动到最左边去点推荐或反对时,是经过思考的。

好吧,其实我是怕用户拉滚动条的时候,不小心点到了反对……

亲,码字辛苦,给点个推荐吧。

其它

其它地方也陆续进行了一些调整,比如文章区域的字体调整的更大一些;评论回复区的间距;回复的支持反对字体更小一点,避免干扰阅读,链接颜色,线条大小等。

总算看起来更加舒服一点点了。

 

我使用的模板是Cogitation,修改后的样式代码下载: http://www.cnblogs.com/yelaiju/customcss.aspx?id=57777

原版样式:

 

 

http://www.cnblogs.com/klcf0220/ 

 

最后一句:样式定义需要记住三点要素:选择器、属性定义、属性定义顺序(是否冲突和覆盖),手册在手。

 

欢迎回复交流,知必言言必尽。

 


本文转自火地晋博客园博客,原文链接:http://www.cnblogs.com/yelaiju/p/3185339.html,如需转载请自行联系原作者

目录
相关文章
|
10天前
|
存储 Shell 开发工具
博客添加评论功能及定制化样式
博客添加评论功能及定制化样式
|
10天前
常见的链接样式
常见的链接样式。
8 3
|
前端开发 JavaScript 容器
CSS 自动显示“全文”链接
CSS 自动显示“全文”链接
CSS 自动显示“全文”链接
|
存储 设计模式
使用Markdown写博客的一些模板
傍晚时分,你坐在屋檐下,看着天慢慢地黑下去,心里寂寞而凄凉,感到自己的生命被剥夺了。当时我是个年轻人,但我害怕这样生活下去,衰老下去。在我看来,这是比死亡更可怕的事。--------王小波
475 0
自定义博客样式
自定义博客样式 用了一天时间简单的更改了下博客的样式,前端技术不甚了解,暂且粗制至此。 有一些问题没解决,还有些功能没实现。 模板使用博客园的官方模板:En_summerGarden。基于此模板进行自定义。
1059 0
|
移动开发 JavaScript 前端开发
博客园博客排版(js样式实例)
昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,当然要分享给各位; 大神的链接:https://www.cnblogs.com/hafiz/p/9276689.html,里面讲的很细很细,每一个功能的讲解都有。
1621 0
为博客园添加目录的方法总结+自定义博客园样式
参考链接: http://www.cnblogs.com/real-me/p/8336741.html https://www.cnblogs.com/xuehaoyue/p/6650533.html http://www.
2015 0
|
前端开发
博客园主题修改中用到的css属性
样式覆盖 id选择器大于class选择器。 对于原主题中想要覆盖的id选择器,使用!import覆盖。 对于原主题中想要取消的css属性,使用inherit. 响应式 当屏幕宽度不同时,隐藏部分元素。 @media (max-width:1360px) { #div_digg { ...
1044 0
|
Web App开发 JavaScript 前端开发