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. python基础----模块、包

    一 模块                                                                                                 ...

  2. 【组合数学】【P4996】 咕咕咕

    Description 小 F 注意到,自己总是在某些情况下会产生歉意.每当他要检查自己的任务表来决定下一项任务的时候,如果当前他干了某些事情,但是没干另一些事情,那么他就会产生一定量的歉意--比如, ...

  3. oracle-DECODE()函数

    DECODE()函数 DECODE(value, if1, then1, if2,then2, if3,then3, . . . else ) 含义解释: DECODE(条件,值1,翻译值1,值2,翻 ...

  4. Java Socket TCP编程(Server端多线程处理)

    package com; import java.io.*; import java.net.Socket; /** * Socket Client * <p> * Created by ...

  5. bzoj 2820 / SPOJ PGCD 莫比乌斯反演

    那啥bzoj2818也是一样的,突然想起来好像拿来当周赛的练习题过,用欧拉函数写掉的. 求$(i,j)=prime$对数 \begin{eqnarray*}\sum_{i=1}^{n}\sum_{j= ...

  6. HDU6130 签到题 打表

    LINK 题意:给出一个描述自身的数列,求出第n项 思路:看了很久题目才看懂..每个值其实是描述一个分组中的个数,把两个数列对照一下就可以了,那么一个指针扫,同时向尾部加数,构造个数组就行了.其实很水 ...

  7. sql分页demo

    ALTER proc [dbo].[ProcGetUserInfoPageInfoByUserName] ), @PageIndex int, @PageSize int as Begin selec ...

  8. errno错误号含义

    errno0 : Success errno1 : Operation not permitted errno2 : No such file or directory errno3 : No suc ...

  9. 我的Mac使用笔记

    此篇记录mac使用相关的一些东西,不断更新中... 1.Mac 安装homebrew : https://brew.sh/index_zh-cn.html /usr/bin/ruby -e " ...

  10. CDN基础详解

    什么是 CDN?     Origin Server: 源站,也就是做 CDN 之前的客户真正的服务器;   User: 访问者,也就是要访问网站的网民;   Edge Server: CDN 的服务 ...