MIAC HW2
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的更多相关文章
- JAVA HW2
MODEL //yuec2 Yue Cheng package hw2; import java.io.File; import java.io.FileNotFoundException; impo ...
- Software Testing hw2
Fault的定义:可能导致系统或功能失效的异常条件(Abnormal condition that can cause an element or an item tofail.),可译为“故障”. ...
- HW2.25
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- HW2.24
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- HW2.23
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- HW2.22
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- HW2.21
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- HW2.20
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- HW2.19
public class Solution { public static void main(String[] args) { char outcome; long randomNumber; wh ...
随机推荐
- 【树状数组】【P3902】 递增
传送门 Description 给你一个长度为\(n\)的整数数列,要求修改最少的数字使得数列单调递增 Input 第一行为\(n\) 第二行\(n\)个数代表数列 Output 输出一行代表答案 H ...
- ctsc2009 移民站选址
分析:非常非常好的一道题! 首先需要对问题进行转化: 行列无关,对于行单独处理,对于列单独处理 必然存在一个最优方案使得每一个新站与旧站重合. 转化1很显然,对于转化2,是一类非常经典的“中位数问题” ...
- C++ ------ 创建对象 new 和不 new 的区别
1.作用域不同 不用new:作用域限制在定义类对象的方法中,当方法结束时,类对象也被系统释放了,(安全不会造成内存系统泄漏). 用new:创建的是指向类对象的指针,作用域变成了全局,当程序结束时,必须 ...
- python部分知识归纳
- Tensorflow BatchNormalization详解:1_原理及细节
Batch Normalization: 原理及细节 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 吴恩达deeplearningai课程 课程笔记 Udacity课程 为了标准化 ...
- AJAX 状态值与状态码详解
1- AJAX状态值与状态码区别 AJAX状态值是指,运行AJAX所经历过的几种状态,无论访问是否成功都将响应的步骤,可以理解成为AJAX运行步骤.如:正在发送,正在响应等,由AJAX对象与服务器交互 ...
- 预处理 Gym - 101128H
题目链接:http://codeforces.com/gym/101128 题目大意:给你一个区间[x,y],找出这个区间有多少个seldom的数字. seldom的数字定义如下:该数值的二进制数字符 ...
- js获取上、下级html元素 js删除html元素方法
js获取下级html元素:htmlEle.childNode; js获取上级html元素:htmlEle.parentNode; js删除当前html元素: htmlEle.removeNode(tr ...
- sublime text3 编辑器常用快捷键
选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数 ...
- 20155117王震宇 实验三 敏捷开发与XP实践 实验报告
实验内容 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2.完成实验.撰写实验报告,实 ...