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吧

MIAC HW2的更多相关文章

  1. JAVA HW2

    MODEL //yuec2 Yue Cheng package hw2; import java.io.File; import java.io.FileNotFoundException; impo ...

  2. Software Testing hw2

    Fault的定义:可能导致系统或功能失效的异常条件(Abnormal condition that can cause an element or an item tofail.),可译为“故障”. ...

  3. HW2.25

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  4. HW2.24

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  5. HW2.23

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  6. HW2.22

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  7. HW2.21

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  8. HW2.20

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  9. HW2.19

    public class Solution { public static void main(String[] args) { char outcome; long randomNumber; wh ...

随机推荐

  1. tableau学习

    一.维度 度量 1. 连接到新数据源时,Tableau 会将该数据源中的每个字段分配给“数据”窗格的“维度”区域或“度量”区域,具体情况视字段包含的数据类型而定. 例如: 2. tableau中的字段 ...

  2. iOS之富文本(一)

    NSAttributedString叫做富文本,是一种带有属性的字符串,通过它可以轻松的在一个字符串中表现出多种字体.字号.字体大小等各不相同的风格,还可以对段落进行格式化. 通过以下代码即可实现上面 ...

  3. Linux系统之路——python多版本共存问题(ps:自行切换python版本,pip安装遇到的一些问题)

    经常遇到这样的情况: 系统自带的Python是2.6,自己需要Python 2.7中的某些特性: 系统自带的Python是2.x,自己需要Python 3.x: 此时需要在系统中安装多个Python, ...

  4. 电商网站中价格的精确计算(使用BigDecimal进行精确运算(实现加减乘除运算))

    使用BigDecimal的String的构造器.商业计算中,使用bigdecimal的String构造器,一定要用. 重要的事情说三遍: 商业计算中,使用bigdecimal的String构造器! 商 ...

  5. git clone 指定分支的内容

    使用Git下载指定分支命令为:git clone -b 分支名仓库地址 使用Git下载v.2.8.1分支代码,使用命令:git clone -b v2.8.1 https://git.oschina. ...

  6. linux 查看登录日志

    原文:http://www.cnblogs.com/wangkangluo1/archive/2011/09/23/2185976.html linux查看日志: # cd /var/log # le ...

  7. 2-sat基础题 BZOJ 1823

    http://www.lydsy.com/JudgeOnline/problem.php?id=1823 1823: [JSOI2010]满汉全席 Time Limit: 10 Sec  Memory ...

  8. 不用注解添加controller抛出No adapter for handler异常

    不用注解添加controller时会抛出No adapter for handler异常. 解决方法:在DispatcherServlet的配置文件(***-servlet.xml)中加入如下两行: ...

  9. IIC总线学习

    IIC总线 IIC协议简要说明: 1.2条双向串行线,一条数据线称为SDA,一条时钟线SCL,双向半双工 2.传输的设备之间只是简单的主从关系,主机可以作为主机发送也可以作为主机接收,任何时候只能由一 ...

  10. 20155117 王震宇 2006-2007-2 《Java程序设计》第四周学习总结

    教材学习内容总结 继承(inheritance) 继承是面向对象软件技术当中的一个概念.继承可以使得子类别具有父类别的各种属性和方法,避免了重复的行为定义.在子类别继承父类别的同时,可以重新定义某些属 ...