首頁 web前端 html教學 使用HTML5和CSS3碎语_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:36 AM

 

当我们使用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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

See all articles