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. Qt ------ CSS 长度单位

    1.         css相对长度单位 Ø         em          元素的字体高度 Ø         ex           字体x的高度 Ø         px        ...

  2. CSS文字溢出部分自动用"..."代替

    CSS文字溢出部分自动用"..."代替 如html部分: <h4><马尔代夫双鱼岛Olhuveli4 晚6 日自助游></h4> <p&g ...

  3. docker操作mysql

    Docker操作mysql 查找docker hub上的mysql镜像 Docker search.mysql 拉取官方的镜像标签为5.6 Docker pull mysql:5.6 在本地镜像列表里 ...

  4. --BEA官方网站(http: //www.bea.com)甲骨文已完成对该公司的收购BEA Weblogic Server 7.0x应用服务器简明安 装、配置手册 1

    ====================简 介: BEA公司是业内著名的中间件产商,以Tuxedo及Weblogic闻名于世,而其基础件平台(infrastructure)Weblogic platf ...

  5. Ping命令网络监测

    按照由近到远原则: 1. ping 127.0.0.1 先检查TCP/IP协议栈是否正常. 2. ping 本地ip 检查网卡是否工作正常. 3. ping 网关地址 检查和网关连接性. 4. pin ...

  6. MySQL的连接类型

    首先我们来创建两个数据表: 结构: 我们用内连接来查看一下: select *  from test1 join  test2 on test1.aid=test2.aid; 由于内连接是等值连接,所 ...

  7. TED_Topic3:The hidden reason for poverty the world needs to address now

    The hidden reason for poverty the world needs to address now By Gary Haugen # Background about our s ...

  8. 【洛谷 P3705】 [SDOI2017]新生舞会(费用流,01分数规划)

    题目链接 看到这题我想到了以前做过的一题,名字记不清了,反正里面有"矩阵"二字,然后是道二分图匹配的题. 经典的行列连边网络流. 第\(i\)行和第\(j\)列连边,费用为\(b[ ...

  9. unity3d 资源文件从MAX或者MAYA中导出的注意事项

    unity3d 资源文件从MAX或者MAYA中导出的注意事项     1.首先,Unity3d 中,导出带动画的资源有2种导出方式可以选择:    1) 导出资源时,只导出一个文件,保留模型,骨骼和所 ...

  10. 蓝色的PC端后台管理界面设计模板——后台

    链接:http://pan.baidu.com/s/1o82hXX4 密码:x6le