其实不是很喜欢换主题每次换主题都会需要折腾很多的后续问题。虽然这个主题和上个主题是从同一个模板修改过来的。但是鉴于Artisteer 4不能直接编辑css文件,每次修改完了都需要重新调校很多的东西,所以换主题就成了一件很蛋疼的事情,并且有很多功能都是通过修改主题生成的php文件直接得到的。
这次换主题主要是鉴于很多人说这个颜色太亮了,直接能刺瞎钛合金狗眼, (&) ,所以才换这个东西,自然换了之后又是一番折腾。
记录下用到的css中有用的一点小东西:
1.图片自适应宽度,防止超出文章边缘:
1 2 3 4 5 6 7 8 9 10 11 | a img { border: 0; } .mars-article img { margin:5px 0 0 0; max-width:650px; _width:expression(this.width>650?"650px":"auto"); } |
2.圆角头像
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .mars-comment-avatar { float:left; padding:1px; } .mars-comment-avatar>img { margin:0 !important; border:none !important; width:80px;height:80px; /*设置图像的长和宽*/ border-radius: 40px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/ -webkit-border-radius: 40px;/*圆角效果:兼容webkit浏览器*/ -moz-border-radius:40px; box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/ -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/ -moz-transition: -moz-transform 0.4s ease-out; } .mars-comment-avatar>img:hover{/*设置鼠标悬浮在头像时的CSS样式*/ box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); transform: rotateZ(360deg);/*图像旋转360度*/ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } |
2条评论
你真是很有个性啊,不过我好象更习惯那大红。
哈哈 好吧 其实我也更喜欢那个大红