当我们使用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碎语的更多相关文章

  1. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  2. Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

    XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...

  3. 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结

    今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

  4. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  5. Modernizr.js:为HTML5和CSS3而生!

    原文链接:http://caibaojian.com/modernizr-js.html modernizr这个JS,在国外的主题里面很多地方都看到,就只记得是为html补充的,有点类似与respon ...

  6. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  7. Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  8. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  9. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

随机推荐

  1. 用一句SQL查询相对复杂的统计报表

    --统计从2017年3月份开始每个月金融服务支付前分期申请数以及通过(核账完成)数 ,ApplyTime)) ,ApplyTime)) as varchar)+'月' as 日期,count(*) a ...

  2. selenium用jquery改变元素属性

    一.jQuery 语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 1.基础语法: $(selector).action() 选择符(selector)即," ...

  3. MVC Autofac依赖注入

    通过Dll实现全部类的属性注入,该演示实例主要通过多层架构中单一的对象方式来演示,没有采取接口的方式, 新建AutoFacHelper类,如下代码: public class AutoFacHelpe ...

  4. webstorm2017添加vue模板

  5. SqlServer自定义函数Function中调用with as

    SET QUOTED_IDENTIFIER ON 标识符可以由双引号分隔,而文字必须由单引号分隔 SET QUOTED_IDENTIFIER OFF 标识符不可加引号,且必须遵守所有 Transact ...

  6. Sqlserver在现有数据库中插入数据

    需求:1.客户提供的excel表和数据库中的表结构总是有一些差距,id的生成,各种字段的关联等等 2. 如何在Excel中生成Guid. 1.在Excel的宏中执行以下代码: Private Decl ...

  7. 项目通过https访问的tomcat相关配置

    开发项目已经完成,那么就是要部署项目到服务器上面.我最近把刚完成的项目部署到服务器上面,内网通过http协议进行访问一切正常,但是测试外网通过https协议进行访问的时候就出现了一些js文档找不到的b ...

  8. 全局查询文件linux

    在工作中,可能突然需要找到某个文件,这个又不知道,需要全局查询一下. 下面是命令行: find / -name "*.log" | xargs grep "elk&quo ...

  9. PHP获取访问者公网IP

    if(!empty($_SERVER["HTTP_CLIENT_IP"])){  $cip = $_SERVER["HTTP_CLIENT_IP"]; } el ...

  10. sublime安装package control 的方法

    1.安装sublime3后,点击菜单 view>show console,复制以下代码按回车即可,安装时稍微有些卡,需要耐心等待. import urllib.request,os; pf = ...