你的位置:首页 > 网页设计

[网页设计]使用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