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 ...
随机推荐
- 【bzoj3669】魔法森林
Portal-->bzoj3669 Solution 愉悦智力康复ing 这题的话有两个比较关键的地方 首先是答案肯定是原图的某个生成树上的一条路径,那么我们考虑怎么来找这 ...
- 【DP】【CF855C】 Helga Hufflepuff's Cup
Description 给你一个树,可以染 \(m\) 个颜色,定义一个特殊颜色 \(k\) , 要求保证整棵树上特殊颜色的个数不超过 \(x\) 个.同时,如果一个节点是特殊颜色,那么它的相邻节点的 ...
- Xml中SelectSingleNode方法,xpath查找某节点用法
Xml中SelectSingleNode方法,xpath查找某节点用法 最常见的XML数据类型有:Element, Attribute,Comment, Text. Element, 指形如<N ...
- Java国密相关算法(bouncycastle)
公用类算法: PCIKeyPair.java /** * @Author: dzy * @Date: 2018/9/27 14:18 * @Describe: 公私钥对 */ @Data @AllAr ...
- windows环境利用semophore机制进行线程同步
semophore是信号量的意思,常用于PV操作,所谓PV操作就是pend(等待,直到有资源可用,并且消耗资源) V就是释放资源. semophore和mutex区别,mutex本意为互斥,用于线程独 ...
- 「Linux」centos7安装使用rar
安装 1 wget https://www.rarlab.com/rar/rarlinux-x64-5.5.0.tar.gz 2 tar -xzvf rarlinux-x64-5.5.0.tar.gz ...
- HBase基本操作-Java实现
创建Table public static void createTable(String tableName){ try { HBaseAdmin hbaseAdmin = new HBaseAdm ...
- Linux下打包压缩war和解压war包 zip和jar
============jar================= 把当前目录下的所有文件打包成game.warjar -cvfM0 game.war ./ -c 创建war包-v 显示过程信息 ...
- Jenkins使用教程之用户权限管理(包含插件的安装)
在工作的过程中由于分工合作的关系,我们因为工作内容的不同可能分为不同的组织里,但是jenkins默认的权限管理并没有用户组的概念,所以我们需要第三方插件的支持来解决问题.插件:Role-based A ...
- bootstrap下laydate样式错乱问题
查看发现bs使用了 * {box-sizing:border-box;}重置了盒子模型 那么我们再把它重置回来,在样式中加入以下代码 .laydate_box, .laydate_box * { bo ...