使用HTML5和CSS3碎语_html/css_WEB-ITnose

 

当我们使用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部分添加如下：

 

 

哪些方面需要考虑自适应？

 

● 重新设置宽度高度的百分比或大小
● 重新设置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

 

在每一个页面表头加？

 

 

常识？

 

● 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