使用HTML5和CSS3碎语
当我们使用HTML5， CSS3，甚至Bootstrap设计网站的时候，有些方面是必须考虑的，比如字体大小，标题大小，行间距，每行字数，字体，颜色，背景图片和文字的搭配，图标，留白和布局......所有的这些，都不是随随便便的，讲究一定的原则。本篇收集了使用HTML5和CSS3设计网站的一些片段。
HTML5和CSS3常用参考网站？
● 浏览器渲染符合HTML5标准：http://necolas.github.io/normalize.css/
● Google字体：ttps://www.google.com/fonts
● 栅格：http://www.responsivegridsystem.com/
● 扁平颜色：http://flatuicolors.com/
● 选择颜色值：http://www.0to255.com/
● icon图标:http://ionicons.com/
● css: https://css-tricks.com/
● js的CDN:http://www.jsdelivr.com/
● 一个CSS属性在各个浏览器的兼容性: http://caniuse.com/
● 创建favicon: http://realfavicongenerator.net/
● 压缩图片尺寸：http://optimizilla.com/
● CSS文件最小化：www.minifycss.com
● JS文件最小化：hTp://www.minifyjavascript.com/
● 检测html代码：http://validator.w3.org/
Typography排版？
● 正文字体大小：控制在15px-25px之间
● 标题大小：正标题60px、90px, 副标题32px
● 行间距：120%-150%
● 每行字数：40个左右汉字，80个左右英文
● 字体：自然、简洁、现代
颜色？
● 使用一种主色调
● 使用颜色工具
● 搭配使用引人注意的颜色
● 不使用纯黑
● 红色：力量，热情，兴奋，能量；橙色：积极，引人注意，快乐的，创新，友好，自信，勇气；黄色：幸福，好奇，光亮；绿色：融洽，自然，生命，健康；蓝色：耐心，平和，稳定，可信赖，职业；紫色：自由，能量，财富，忠诚，神秘，高贵；粉红：关心，平和，女性；褐色：自信，放松，舒适，可靠。
● 列出网站项目所使用的颜色列表
背景图片和文字？
● 文字放图片上
● 灰色黑色色调的背景图配白色文字
● 文字放图片中的一个矩形背景区域内
● 模糊背景图片
● 背景图片底部渐趋褐色，底部再配白色字体
icon图标？
● 描述功能或步骤的时候使用icon
● 在菜单和Link中使用icon
● icon只能页面中的配角，不能是主角
● 使用icon fonts，因为相比图片分辨率更高
留白和布局？
● 留白就是呼吸
● 需要留白，但不能丢失页面元素的关联性
● 留白能体现页面元素的关系
● 用户浏览的起点，内容流向符合内容本身，留白能引导流向
用户体验？
● 页面内容不仅仅是展示，更是感觉
● 取用户体验和业务逻辑间的交集
灵感？
● 收集灵感
● 理解
● 多问为什么？
● 好设计的共同点是什么？
● 怎样设计HTML和CSS？
构建网站的7个步骤？
1、定义自己的网站项目
● 明确目的，是卖产品，受众
● 了解受众
● 设计，始终考虑目的和受众
2、准备资料素材
● 文字信息，图片，视频，icon，等等
● 内容为先
● 考虑如何导航
● 考虑网站文件结构，站点地图
3、原型设计
4、设计阶段
5、优化
性能、SEO优化等
6、宿主
7、网站维护
让浏览器渲染元素符合现代标准？
→http://necolas.github.io/normalize.css/
Web Fonts?
栅格？
→参考：http://www.responsivegridsystem.com/
flat ui color?
→ 参考：http://flatuicolors.com/
→ 选择格式
→ 点击某个背景相当于复制了对应的颜色值
相似颜色的颜色值？
→ 参考：http://www.0to255.com/
→ 点击 Pick a color
→ 输入值，再点击pick color
→ 在列出的相似值列表中选择颜色
icons?
→ 参考：http://ionicons.com/
→ 把下载下的ionicons.css文件拷到当前项目，把下载下的fonts文件夹内的所有文件拷贝到当前项目的fonts文件夹内
→ 在页面中引用ionicons.css文件
响应式设计？
● Fluid grid:所有的页面元素都是相对单位，比如百分比
● Flexible images:图片尺寸单位也是相对党委，比如百分比
● Media queries:针对不同的终端设置不同的CSS
元素状态变化的过渡效果？
div{
width:100px;
}
div:hover{
width:300px;
}
如果想在div的原始状态和hover状态间加一个过渡效果，应该这样设置：
div{
width:100%;
transition:width 2s;
}
div可以是圆形吗？
--可以的，真服了。
.someclassname div{
color: #e67e22;
border: 2px solid #e67e22;
display: inline-block;
border-radius: 50%;
height: 55px;
width: 55px;
text-align: center;
padding: 5px;
float: left;
font-size: 150%;
margin-right: 25px;
}
让一个行内元素居中？
span li{
display:inline-block;
width:50px;
text-align:center;
vertical-align:middle;
line-height:120%;
margin-top:-5px; //负数表示拿掉一些空间
}
对一个元素设置的CSS无效？
有时候会碰上对一个元素设置CSS怎么设置都无效，有一种可能是元素标签的名字写错了。比如把section,写成sectioin。
再次，一个大的背景图片如何完整呈现在某个区域，比如section, div中？
background-image:linear-radient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url();
background-size:cover;
background-position:center;
height:100vh;//vh表示页面视图高度
让一个块级元素成圆形？
height: 50px;
width: 50px;
border-radius: 50%;
让一个元素绝对定位？
首先要保证其父类元素设置为相对定位。
position: relative;
然后再设置元素为绝对定位。
position: absolute;
top: -5px;
left: -5px;
自适应考虑宽度的几个节点？
0, 480px, 768px, 1024px, 1200px，按照由大到小的宽度考虑设计，在每一个宽度区间，看有不顺眼的就修理。
/*big tablet to 1200px, width smaller thn the 1140px*/
@media only screen and (max-width:1200px){
}
/*small tablet to big tblet from 768px to 1023px*/
@media only screen and (max-width:1023px){
}
/*small phones to small tablets from 481px to 767px*/
@media only screen and (max-width:767px){
}
/*small phones from 0 to 480px*/
@media only screen and (max-width:480px){
}
也不要忘了在head部分添加如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
哪些方面需要考虑自适应？
● 重新设置宽度高度的百分比或大小
● 重新设置padding的百分比或大小
● 重新设置margin的百分比或大小
● 重新设置字体大小或百分比
● 考虑是否隐藏图片
● 考虑是否改变图片的大小
● 考虑某个元素是否可见
解决chrome下显示繁体不显示简体汉字？
更多工具→编码→自动检测
调整chrome浏览器大小的同时查看其宽高？
→ 打开开发者工具
→ 点击"向下还原"窗口
→ 拖动chrome浏览器的任意边界，在右上角位置显示当前浏览器的大小
通过这个，可以方便地观察某个元素在宽度发生改变时对应的样式。(前提时针对该元素设置了不同宽度下的样式)
哪些浏览器们以及前缀？
● Android: -webkit-
● Chrome： -webkit-
● IE：-ms-
● Firefox： -moz-
● Safari： -webkit-
● Opera: -o-
举例来说：
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
这样是不是很麻烦呢？是的，Brackets有一个插件叫"Autoprefixer"帮我们解决这个问题。
→ 选择某页所有的css文件
→ 编辑--Auto Prefix Selection
→ 可以看到所有的css加上了前缀
可以看到，Autoprefixer足够智能，只有需要前缀的，才加上前缀。
创建favicon?
→ http://realfavicongenerator.net/
→ 上传图片文件，输入保存的相对路径，比如：resources/favicons
→ 点击"Favicon package"按钮
→ 把提供的link放到页面head部分
网站项目提速的措施？
● 保证清晰度的情况下，尽可能减少图片尺寸，可以使用的工具：http://optimizilla.com/
● 最小化CSS和JS文件，可以使用的工具：www.minifycss.com 和 hTp://www.minifyjavascript.com/
一些基本的SEO技巧？
● meta中的content
<meta name="description" content="" />
在每一个页面表头加？
<meta charset="utf-8">
常识？
● text-rendering: optimizeLegibility 告诉浏览器如何渲染文本，它并没有作为CSS3的一个标准，而且不同的浏览器有不同的渲染默认设置，严格意义上来说，text-rendering并不能完全保证在用户浏览器上按预想的方式渲染文本。
● 块级元素才可以float, display:block,默认自动占100%的宽度
● header 页头部分
● height: 100vh; 意思是100% viewport height
● background-size: cover; 背景图片覆盖整个区域，比如一个div， 一个section
● background-position: center;背景图片居中
● 大的背景图片大概有多大？宽度在2700px-3000px之间，高度在1500px-2000px之间
● transform,用来操控元素，倾斜skewing，旋转rotating,移动translating,缩放scaling。比如transform: translate(-50%,-50%);向左移动元素自身宽度的50%，向上移动元素自身高度的50%
● 当给元素绝对定位，常规套路是：position:absolute;width:1000px;top:50%;left:50%;
● 在背景图片上加上一层颜色，比如渐变色：background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(img/h.jpg);
● 字体大小和字体粗细的相对性。当字体变大，就要相应降低font-weight的值。
● 字母间距 letter-spacing
● 单词间距 word-spacing
● 链接a的几个状态：.classname:link, .classname:visited, .classname:hover, .classname:active
● transition，给元素状态变化的过渡效果
● nav导航条
● 图片缩放：可以让宽和高的某个值固定，另外一个值设置为auto，比如：height:100px;width:auto;
● :after，在元素后面追加内容
● display: block，另起一行，默认宽度100%
● figure, html5元素标签，代表一个内容单元，里面放图表、图片、展示、代码段等，可以被移除而不影响整个页面元素
● 设置不透明度，opacity: 0.7;注意：这个背景颜色相关
● .someclassname:first-child 第一个someclass; .someclassname:last-child 最后一个someclass,也可以用.someclassname:last-of-type
● background-attachment: fixed;背景图像不会随着页面其余部分移动；默认值scroll，表示背景图片会随着页面其余部分滚动而移动
● blockquote配合cite标签一同使用
● 以CSS的方式为元素前面或后面添加一些简单内容：.someclassname:before, someclassname:after
