第三次改动主题
如果你以前来过这里你会发现主题又有了变化,对,这是第三次对主题进行大的改动,这次改动只是改了css样式,框架并没有改动:
-
老主题:
觉得老主题全是border,到处都是框框看上去很拘谨,为了让网站看上去自由奔放一点,早就想改动了,无奈没多少时间,昨天终于瞅准机会…
-
新主题:
新主题的特色不仅仅是老主题的缺点,
- 不仅彻底去掉border对视觉的约束,让视野更奔放;
- 加入了背景图片,首次使用渐变的背景,效果还是蛮好的;
- 用上了css雪碧,将能放在一起的图片全放在一张图上了;
- 头部header部分用上了光荣而和谐的圆角。
没有使用纯css和js,为了方便纯粹是图片:我的思路是画一个圆,然后用左、中、右三个class:l、m、r,将圆的上半部分的左右分别作为class l和r的背景,class m放在中间。
三步制作圆角:
-
制作背景图片:
画一个直径10px的圆圈,保存为png格式(gif格式的效果会大打折扣:圆角很硬,锯齿感很明显)的图片;
-
css样式部分:
上面说过用三个class:
.l {
float:left;
height:5px;
width:5px;
background:url(images/img.png) scroll 0 0 no-repeat transparent;
}
.r {
float:right;
height:5px;
width:5px;
background:url(images/img.png) scroll -5px 0 no-repeat transparent;
}
.m {
height:5px;
width:950px;
background:#fff;
}注意宽度,我的宽度是960pxl+r+m=5px+5px+950px
-
应用css样式:
最后将三个div堆在一起放在需要的地方即可。
注意:可能要清除浮动
声明:原创博客,转载请注明 吓我一跳
你懂的 不多说
这次的主题看着很干净 很舒服的感觉 蛮不错的哦 !赞个
很喜欢博主的主题,不知道能不能分享一下呢