MIAC的第二次作业,翻了一些fashion网站找了点灵感,重新设计了一下UI。
因为给的html里有nav之类的HTML5新特性,所以索性就不管IE的兼容了。chrome下的效果:
FF下也差不多。这次作业试用了一下google font,果然好用(虽然载入速度不快&没中文),本来想用Raleway的extra light做h2字体的,发现chrome居然渲染不出它的extra light(FF正常),最后选了Josephin Sans。
其他的收获:
1. fashion网站都爱黑白配,真的,满眼黑白配,最多再加一种颜色(比如经典的红色,logo里的颜色),然后用些带感的字体,loads of 带感图片,配上清爽的layout,et voila,一个fashion站子出来了……这个规律适用于杂志,品牌,门户,lookbook这样的SNS等等各种网站……另外,标题他们会比较偏爱用serif,当然肯定不会是Times,通常是typography里归类到Modern的那些,分得更细一点那就是Didone(Didot/Bodoni,奢侈品牌的最爱=。=)
2.如果直接用<button>的话,似乎不能做背景透明……浏览器自带的button样式一般毫无style可言,所以button的CSS一般写得比较复杂(因为默认太丑都要推倒重来……),这次作业用的是:
button.comment-submit { font-size: 14px; font-weight: bold; background-color: #151515; color: #FFFFFF; text-shadow: none; margin-top: 10px; cursor: pointer; float: right; text-align: center; padding: 5px 20px 5px 20px; border: 2px solid #BBBBBB; border-radius: 30px; margin-right: 30px; } button.comment-submit:link { border-style: none; } button.comment-submit:active { border-style: inset; }
P.S. 如果想弄个好看的按钮还要兼容天杀的低版本IE……果断还是用图片吧……
完整代码在:
https://github.com/joyeec9h3/WebHWs/tree/master/MIAC/my-gallery
依然还没开始进入JS的世界 T__T 努力看JQuery吧