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. go日期时间函数+常用内建函数+错误处理

    日期时间函数 // 时间日期函数包 import "time" // 1. 当前时间 time.Now()-->time.Time类型 // 2. now:=time.Now ...

  2. linux内核支持nfs挂载配置

    1.配置网络部分,主要是使能CONFIG_IP_PNP以在2中能够看到Root file system on NFS选项Networking support Networking options TC ...

  3. 前端PHP入门-024-字符串函数-API查看

    数组.字符串和数据库是我们函数里面最.最.最常用的三类函数,数组和数据库我们现在还没有讲到,等讲到的时候我们再来和大家细说. 当然PHP的字符串函数也有很多.我们最常使用的两个系列的字符串: 单字节字 ...

  4. [DeeplearningAI笔记]卷积神经网络4.6-4.10神经网络风格迁移

    4.4特殊应用:人脸识别和神经网络风格转换 觉得有用的话,欢迎一起讨论相互学习~Follow Me 4.6什么是神经网络风格转换neural style transfer 将原图片作为内容图片Cont ...

  5. linux 下 mysql 主从配置

    话不多说,直接干. 准备条件:安装两个mysql数据库,随便哪个作主库,另一个从库. 1.在主库创建 复制用的账号 grant replication slave ,replication clien ...

  6. NOIP模拟赛12

    期望得分:100+100+50=250 实际得分:100+100+30=230 A 约数之和(count.pas/c/cpp) TL:1S ML:128MB[Description]我们用 D(x)表 ...

  7. bzoj 3261: 最大异或和 (可持久化trie树)

    3261: 最大异或和 Time Limit: 10 Sec  Memory Limit: 512 MB Description       给定一个非负整数序列 {a},初始长度为 N.       ...

  8. 【VIJOS】P1512 SuperBrother打鼹鼠

    [算法]二维树状数组 [题解] 1.树状数组尽量不要出现0,因此所有坐标+1 2.面积求法(默认1开始):(x1,y1)(x2,y2)=sum(x2,y2)-sum(x1-1,y2)-sum(x2,y ...

  9. 1030 大数进制转换(51Nod + JAVA)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1030 题目: 代码实现如下: import java.mat ...

  10. idea docker 连接 linux 上的 docker

    安装插件 Docker插件,首先需要在你的IDEA中安装Docker插件,定位到File-Setting-Plugins后搜索Docker Integration安装 配置Docker服务器,在IDE ...