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. NOIP 2012 洛谷P1081 开车旅行

    Description: 就是两个人开车,只能向东开.向东有n个城市,城市之间的距离为他们的高度差.A,B轮流开车,A喜欢到次近的城市,B喜欢到最近的城市.如果车子开到底了或者车子开的路程已经超过了限 ...

  2. 【bzoj4940】这是我自己的发明

    Portal --> bzoj4940 Solution (原题这题面到底是..怎么回事啊深深的套路qwq) 感觉自己对根号的算法还是很..没有感觉啊== 实际上这题和bzoj5016没有任何区 ...

  3. oracle、mysql、db2三大数据库分页方法的整理

    最近项目中经常会涉及到代码中支持三种数据库的分页的功能,自己整理了关于三种数据库的分页的写法,分享给大家,以供大家使用.希望能帮到更多的码友! 先来看一个代码片段: String page = ala ...

  4. C#中调用Dll动态链接库

    C#中调用Dll动态链接库 起始 受限于语言的不同,我们有的时候可能会用别人提供的函数及方法 或者其他的什么原因.反正就是要调!!! 恰巧别人所使用的的语言跟自己又不是一样的 这个时候想要调用别人的函 ...

  5. proc文件系统介绍

    (1)linux内核是一个非常庞大.非常复杂的一个单独的程序,对于这样的一个程序来说调试是非常复杂的.(2)项kernel这样庞大的项目,给里面添加/更改一个功能是非常麻烦的,因为你这添加的一个功能可 ...

  6. ELK Betas 6.0安装及使用

    Betas 6.0安装及使用 注意: Elastic官网更新非常的快,每个版本的文档有会有不同,具体需要去官网查看最新文档进行配置调整. Beats 平台集合了多种单一用途数据采集器.这些采集器安装后 ...

  7. java面试梳理

    自己整理的有关java面试过的问题,有错的请矫正. 1, Spring的核心思想 控制反转和面向切面的编程 2,Spring的核心模块 反向控制与依赖注入.Bean配置以及加载 3,Scope是什么 ...

  8. K-means的缺点(优化不仅仅是最小化误差)

    K-means的缺点(优化不仅仅是最小化误差) #转载时,请注明英文原作David Robinson,译者Ding Chao.# 我最近遇到一个交叉验证的问题,我认为这个给我提供了一个很好的机会去用“ ...

  9. CSS 文本属性

    一.文本位置 text-align: 参数 /** * left center right:左中右**/text-align: left; 二.文本行间距 line-height: 参数 特别要注意: ...

  10. cropper.js 跨域问题

    this.$clone = $clone = $('<img>'); $clone.one('load', $.proxy(function () { var naturalWidth = ...