新的一篇以及改进的主题

Plux posted @ 2011年8月07日 12:11 in Design with tags html css , 2081 阅读

终于决定把博客迁到这里了。小玖似乎也不在百度空间了，而人人上压力巨大，大多数博客系统基本上不适合写代码……

昨天晚上把自定义 CSS 玩了一把。发现这里的自定义 CSS 挺好的，主题的 HTML 结构也很好（比百度空间的标准一点吧），附有多种主题作为基础选择。相对于以前的百度空间也算是一个进步。不过有些特效还是依赖 jQuery 等库才可以玩， CSS 3 的动画目前似乎只有gecko和webkit支持，opera也不支持（但我没有测试过，据W3schools.com的测试了解到的）。

主题主要修改部分：

把 header 部分改为导航栏在上，然后用 position: fixed; 固定。考虑到 IE 可能不支持，我尝试删掉 position 属性定义，效果还可以，起码不会太乱。
这样做的好处是看文章的时候总是可以见到导航栏，真正发挥导航的作用（呵呵，一家之言罢了）
header 上部分 float 的内容改用 position: absolute; 来替换。
header 部分圆角边框和其他一些地方的圆角微调。
改进了原来 #wrapper 控制的主内容区的排版方式。采用 margin-right 属性固定留空 #sidebar 区域，然后把 #sidebar 的 position 属性设置为 absolute ，当然，这样一来，为了排版，一些父元素的 position 也改成了 relative 。取消了原来的 float 和 width 固定页宽的排版方式。
这个改进的好处是页面会随着屏幕的宽度而改变。尽可能不浪费横向空间的同时，也保留了版式的完整。但在小屏幕上，我承认这样的设计会有问题。但小屏幕的时候，浏览器应该不会过多地考虑 position 等定义吧（尽可能利用纵向空间）
一些动画的改进。仅仅对Webkit和Gecko较新的内核上测试过。IE 肯定不支持的。看看 IE 10 吧。模拟了部分以往需要 jQuery 才能达到的动画效果。
底部 footer 配合样式把宽度设为 100% 了。

基本上也就是这样了。有些细节可能没写出来，毕竟也很难完全写出来。参看我的 CSS 代码吧。:-)

#coldblue .inner {
  position: relative;
  margin: auto 20ex;
  width: auto;
}

#coldblue #search {
  position: fixed;
  top: 0;
  z-index: 100;
}

#coldblue #header {
  width: auto;
  margin: 50px 20ex 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#coldblue #header .inner {
  margin: 0 1ex;
}

#coldblue #header #navigation {
  float: none;
  top: auto;
  width: auto;
  position: absolute;
  right: 1ex;
  bottom: 1em;
}

#coldblue img[alt='Avatar'] {
  box-shadow: 0px 0px 10px #333;
}

#coldblue #head ~ h2, #coldblue #head ~ #chito_search {
  display: none;
}

#coldblue #chito_search ~ h2 {
  display: block;
}

#coldblue #chito_search + h2 {
  display: none;
}

@-moz-keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

@-webkit-keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

@keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

#coldblue #search a {
  color: white;
}

#coldblue #search .current_page_item a {
  text-shadow: 0px 0px 10px white;
  color: green;
}

#coldblue #search a:hover {
  -moz-animation:colorFadeAnimation 5s infinite;
  -moz-animation-play-state: running;
  -webkit-animation: colorFadeAnimation 5s infinite;
  -webkit-animation-play-state: running;
  animation: colorFadeAnimation 5s infinite;
  animation-play-state: running;
  color： yellow;
  text-shadow: 0px 0px 10px white;
}

#coldblue #wrapper {
  background-image: none;
  width: auto;
  margin: auto 20ex;
  position: relative;
  border-width: 0px;
}

#coldblue #wrapper #content {
  width: auto;
  margin-right: 270px;
  float: none;
}

#coldblue .post-title h3 {
  text-align: right;
}

#coldblue .post-p {
  padding: 0.3em;
  background-color: #aaa;
  border-radius: 0.2em;
}

@-moz-keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

@-webkit-keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

@keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

#coldblue .post-p a {
  padding: 0.1em;
  border-radius: 0.3em;
}

#coldblue .post-p a:hover {
  -moz-animation: backgroundFade1 4s infinite;
  -moz-animation-play-state: running;
  -webkit-animation: backgroundFade1 4s infinite;
  -webkit-animation-play-state: running;
  animation: backgroundFade1 4s infinite;
  animation-play-state: running;
  background-color: #888;
}

#coldblue #wrapper #sidebar {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ccc;
  border-bottom-left-radius: 15px;
}

#coldblue #footer {
  text-align: center;
  width: auto;
  margin: 0;
}