当我们使用HTML5， CSS3，甚至Bootstrap设计网站的时候，有些方面是必须考虑的，比如字体大小，标题大小，行间距，每行字数，字体，颜色，背景图片和文字的搭配，图标，留白和布局......所有的这些，都不是随随便便的，讲究一定的原则。本篇收集了使用HTML5和CSS3设计网站的一些片段。
HTML5和CSS3常用参考网站？
● 浏览器渲染符合HTML5标准：
● Google字体：ttps://www.google.com/fonts● 栅格：● 扁平颜色：● 选择颜色值：● icon图标:● css: ● js的CDN:● 一个CSS属性在各个浏览器的兼容性: ● 创建favicon: ● 压缩图片尺寸：● CSS文件最小化：www.minifycss.com● JS文件最小化：hTp://www.minifyjavascript.com/● 检测html代码：
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、网站维护
让浏览器渲染元素符合现代标准？
→
Web Fonts?
→
栅格？
→参考：
flat ui color?
→ 参考：
→ 选择格式→ 点击某个背景相当于复制了对应的颜色值
相似颜色的颜色值？
→ 参考：
→ 点击 Pick a color→ 输入值，再点击pick color→ 在列出的相似值列表中选择颜色
icons?
→ 参考：
→ 把下载下的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?
→
→ 上传图片文件，输入保存的相对路径，比如：resources/favicons→ 点击"Favicon package"按钮→ 把提供的link放到页面head部分
网站项目提速的措施？
● 保证清晰度的情况下，尽可能减少图片尺寸，可以使用的工具：
● 最小化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