博客园模板 样式优化
2013-07-12 09:19
459 查看
更新,2013-07-12 15:14
加入3种屏幕宽度的判断和样式定义
@media all and (width:1280px) {
#leftmenu { position: absolute; left: 35px; width: 350px; height: auto; }
#main { margin-left: 400px; margin-right: 35px; max-width: 870px; overflow: hidden; }
#cnblogs_post_body p img { max-width: 600px; }
.input_my_zzk { width: 310px; }
#top { padding: 0 35px; }
}
@media all and (width:1152px) {
#cnblogs_post_body p img { max-width: 450px; }
#leftmenu { position: absolute; left: 10px; width: 328px; height: auto; }
#main { margin-left: 348px; margin-right: 0; max-width: 769px; overflow: hidden; }
.input_my_zzk { width: 235px; }
#top { padding: 0 10px; }
}
@media all and (width:1024px) {
#cnblogs_post_body p img { max-width: 600px; }
#leftmenu { position: absolute; left: 10px; width: 318px; height: auto; }
#main { margin-left: 338px; margin-right: 10px; max-width: 804px; overflow: hidden; }
.input_my_zzk { width: 225px; }
#top { padding: 0 10px; }
}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、使用一个现有模板,然后在此基础上编写自定义样式
这里介绍的是第二种
下面就简单的介绍下使用,熟悉的朋友跳过。
使用这个功能可以轻松的定位到页面的任何html标签。
首先点击
,然后鼠标移动到页面的目标位置,然后鼠标按下。
比如这里鼠标移动到【常用链接】,鼠标按下后,就可以看到HTML代码定位到目标位置了。
通过上面定位html标签,也会马上显示出目标标签的样式定义。
或者是在左边[HTML窗口]点击html标签,右边窗口也会马上显示标签的样式定义。
这里需要说一下的是,注意看右边显示的某定义位于样式文件的第几行,这样有助于快速的找到需要修改的位置。
比如这里的
把自定义的样式复制一个文件中,然后使用一个可以高亮带行数显示的编辑器打开。
调整样式,立即显示效果
在样式窗口,样式定义位置双击,可以修改定义。
在空白位置双击,可以新建样式定义。
样式定义简介
样式定义需要记住三点要素:选择器、属性定义、属性定义顺序(是否冲突和覆盖)
如果自己想不到好的样式,就参考别人的设计,像支付宝、微博等网站的样式设计的还是不粗的,或者自己喜欢的网站。
然后通过Firebug就可以轻易的获取到定义的样式。
想设置某个模块,而那个模块既没有id也没有class属性,从而无法定位?
没关系,使用关系选择符轻易的搞定。
比如我想设置的【随笔分类】模块恰好符合上面两点的情况。
看到模块上面的
<div id="itemListLin_con" style="display:none;">挨的那么近,就拿你来定位了。
先来看看关系选择符是怎么样描述的。
我们这里要用的就是相邻选择符
#itemListLin_con + h3 + ul { height: 350px; overflow: hidden; }
如此,就可以轻易解决定位的问题。
抓住了目标,当然就是好好蹂躏对方啦。
打开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/SkinUser.aspx?SkinName=Cogitation
http://www.cnblogs.com/klcf0220/
最后一句:样式定义需要记住三点要素:选择器、属性定义、属性定义顺序(是否冲突和覆盖),手册在手。
欢迎回复交流,知必言言必尽。
加入3种屏幕宽度的判断和样式定义
@media all and (width:1280px) {
#leftmenu { position: absolute; left: 35px; width: 350px; height: auto; }
#main { margin-left: 400px; margin-right: 35px; max-width: 870px; overflow: hidden; }
#cnblogs_post_body p img { max-width: 600px; }
.input_my_zzk { width: 310px; }
#top { padding: 0 35px; }
}
@media all and (width:1152px) {
#cnblogs_post_body p img { max-width: 450px; }
#leftmenu { position: absolute; left: 10px; width: 328px; height: auto; }
#main { margin-left: 348px; margin-right: 0; max-width: 769px; overflow: hidden; }
.input_my_zzk { width: 235px; }
#top { padding: 0 10px; }
}
@media all and (width:1024px) {
#cnblogs_post_body p img { max-width: 600px; }
#leftmenu { position: absolute; left: 10px; width: 318px; height: auto; }
#main { margin-left: 338px; margin-right: 10px; max-width: 804px; overflow: hidden; }
.input_my_zzk { width: 225px; }
#top { padding: 0 10px; }
}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 { height: 350px; overflow: hidden; }
如此,就可以轻易解决定位的问题。
抓住了目标,当然就是好好蹂躏对方啦。
打开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/SkinUser.aspx?SkinName=Cogitation
http://www.cnblogs.com/klcf0220/
最后一句:样式定义需要记住三点要素:选择器、属性定义、属性定义顺序(是否冲突和覆盖),手册在手。
欢迎回复交流,知必言言必尽。
相关文章推荐
- 自定义博客园的模板样式
- 博客园的Markdown文章 样式优化 实战经历
- 优化博客园Markdown样式(代码行号、版权信息、章节目录等)
- 博客园最新的一个模板样式有问题
- 博客园 CodingLife 模板 翻页样式美化方法
- 模板样式优化
- dinic+当前弧优化 模板
- 更改dede网站地图模板样式
- 13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉
- 我是这样优化博客园广告的
- cocos2dx-vs模板孤狼优化版V1.4
- MVC Html.ValidationSummary()样式优化
- 单源最短路模板_SPFA_Dijkstra(堆优化)_C++
- 爬虫代码实现二:抽取网站规则模板,优化解析代码(2)
- 博客园使用sublime text风格的代码高亮样式
- joomla第一单元第十节K2内容模板和K2模块样式
- 素数筛选再优化模板
- HK算法模板+小优化(跑的快一点点)
- dijkstra算法模板(优先队列优化)
- 洛谷 P3371 【模板】单源最短路径(Dijkstra + 堆优化)