使用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?

→https://www.google.com/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

未经允许不得转载：爱前端网 » 使用HTML5和CSS3碎语