HTML5和CSS3

图片 2

不要痴迷于HTML5 和 CSS3

2011/06/27 · HTML5 ·
CSS3,
HTML5

作为Web设计师,我们都不约而同的痴迷于HTML5和CSS3,我们需要学习HTML5和CSS3有关技术。博客里有很多关于这方面的教程、评论、讲解。但是,自己究竟学到了多少实用的技术?

我们似乎花了大量的时间在阅读关于这方面的文章,但是学到的技术和时间却不成正比。除了这个,还有很多方面值得我们去注意。

下面从几个方面讲讲我的心得,供大家参考。

用户服务

我们需要学习客户服务的几个原因:

第一,我们所做的是为了给用户提供更好的服务。我们不只是单纯的在做网站,我们要引导用户,为用户提供咨询意见和技术支持。

第二,通常多数网站上都会创建用户服务窗口,用户最终需要的往往不是网站程序,而是网站上的信息。

我们要为客户和用户提供更好的服务,所以我们要学习用户服务技术。我的建议是先阅读一些用户服务的博客,从客户体验问题开始入手。

心理学

心理学应该融入到我们工作的每一个细节中,例如:销售、项目管理、用户界面设计和设计美学。我们应该能换位思考,考虑客户和用户的感受,从中感受到他们所需要的东西。

我们只是知道本能的去学习,而不是通过任何正式的培训来弥补这方面的不足。我们设计灵感往往是直觉的反应,而不是那些死板的布局。能够洞察别人脑袋里的想法是至关重要的,无论是用户或是客户。

内容策划

内容是每一个网站的基础,以各种形式展现出来,包括:图像、文本、视频、音频和功能。

客户对于内容上的要求有很多,如果设计师提供不出满意的资料,客户将会取消与你的合作,转而把工作转交给别人。这样就白白错失一个合作的机会。

内容策划并然重要,但也不必成为内容策划的专家,只是需要了解这方面的知识。正如McCoy所说:“我是一个Web设计师,不是一个策划。”

如果在这方面欠缺的比较多,那就该为自己充充电了。推荐从Kristina
Halvorson写的书中开始学习,《Content Strategy for the Web》。

策略

如今的客户现在不只是单纯的需要设计一个网站,他们需求更多的是寻找一个可以告诉他们如何在网络世界中推广他们的业务的顾问。他们需要有人在业务上帮助他们做出回答,告诉他们如何才能把自己的产品、服务推广给更多的人,造成更大的社会效应。这一点往往都被设计师们忽视,所以我们也要在这方面加强学习。我相信只要策略制定明确,接下来的工作会事半功倍,避免一些重复的修改。

总结

现在问题就摆在我们的面前,每个设计师都在学习HTML5和CSS3,错过了学习其他知识的机会。随着网络变得越来越复杂,我们需要扩大自己的视野,拓展自己的知识面,才能迎合未来的互联网。

原文:webdesignerdepot
译文:张祺

 

赞 收藏
评论

图片 1

HTML5和CSS3,HTML5CSS3

睡不着

HTML:

Doctype

声明位于文档中最前面的位置,告诉浏览器文档用那种HTML规范
viewport手机端浏览器将页面放在一个虚拟窗口(viewport),通常这个虚拟窗口比屏幕宽

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
</head>

html5与css3相关小知识点汇总

与你相遇

1、head里的title表示设置网站的标题名称

link和@import

都可以引入CSS文件
顺序有区别,link引用CSS会同时被加载,@import引入CSS会等页面全部下载完后再加载,因此有时候会有闪烁
@import在IE5以上支持,CSS2.1提出的标准

– webkit-text-size-adjust

1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用
html{- webkit-text-size-adjust :none;}

2、- webkit-text-size-adjust 放在body上会导致页面 文字 缩放失效
而 body会继承定义在html的样式,因此用- webkit-text-size-adjust 不要定义成可继承的或全局的,

要单独定义到需要的元素上

 

-webkit-scrollbar 滚动条整体部分

-webkit-scrollbar-button 滚动条两端的按钮

-webkit-scrollbar-track 外层轨道

-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)

-webkit-scrollbar-corner 边角

-webkit-resizer 定义右下角拖动块的样式

通过这些伪元素,可以完全的重写一个网站的滚动条样式。

当然webkit提供的不止这些,还有很多伪类,可以更丰富滚动条样式:

:horizontal – horizontal伪类应用于水平方向的滚动条

:vertical – vertical伪类应用于竖直方向的滚动条

:decrement – decrement伪类应用于按钮和内层轨道(track
piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)

:increment –
increment伪类和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)

:start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end – 类似于start伪类,标识对象是否放到滑块的后面。

:double-button –
该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。

:single-button –
类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。

:no-button –
用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。

:corner-present – 用于所有滚动条轨道,指示滚动条圆角是否显示。

:window-inactive –
用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

另外,:enabled、:disabled、:hover 和 :active
等伪类同样可以用于滚动条中。

另外。。

在iPad上的iframe是没有滚动条的,用手指触摸滑动也没用;div在ipad上设置了overflow:auto|scroll之后也没有滚动条,但用手滑动是可以滚动的,因此iframe的问题就迫切需要解决。

于是网上也搜索了下说是需要给iframe的父元素设置独立区域可滚动,-webkit-overflow-scrolling:
touch;,但同时还需要设置以下属性才可以:

  1. -webkit-overflow:auto; 
    2.父元素的宽和高,还必须设置成绝对的像素,百分比是不可以的。

参考资料 

html5与css3相关小知识点汇总 –webkit-text-size-adjust
1、当样式表里font-size12px时,中文版chrome浏览器里字体显示仍为12px,这…

刚刚好的离奇

2、body里的hx标签表示设置网页内容的标题名称,<p></p>表示内容段落,<img
src=”

bootstrap

默认字体14px, 默认行高20px, 20/14=1.428571rem
xs<768px
768px<=sm<992px
992px<=md<1200px
1200px<=lg

栅格系统

<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
</div>

iPhone
4s:320pt;
5/5s/5c:320pt; 物理像素640
6:375pt;
6 plus:414pt;
12px == 9pt;
1em == 16px;

忍不住

3、HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等

px pt em rem

em:相对当前对象内文本,如当前对象内文本尺寸未被认为设置,则相对于浏览器默认字体尺寸(浏览器默认字体16px,因此默认1em
= 16px)
rem:相对HTML根元素,修改根元素就成比例调整所有字体大小,又可避免字体大小逐层复合连锁反应

// 1em = 10px;
html{font-size:62.5%;}

//rem
html{font-size:14px;}
body{font-size:1rem;}

独自努力

4、CSS样式是表现。就像网页的外衣,比如:标题文字、颜色变化、或为标题加入背景图片、边框等,所有这些用来改变内容外观的东西就是样式的表现

动画

//css动画
.tm-dropdown-slider-out {
    -webkit-animation: drop-slideOut 200ms;
    animation: drop-slideOut 200ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
}
@-webkit-keyframes drop-slideOut {
    from {
        top: 0;
    }

    to {
        top: 100%;
    }
}

div{
    width:100px;
    transition: width 2s;

    //hover是width会动画变为300px
    &:hover{
        width:300px;
    }
}

none:不改变默认行为
forwards:动画完成后,保持最后一个关键帧中定义
backwards:animation-delay所指定的一段时间内,在动画显示之前,应用第一个关键帧中定义
both:向前和向后填充模式被应用

我要宣布重逢

5、JavaScript是用来实现网页上的特效效果,如:鼠标滑过弹出下拉菜单,或鼠标滑过表格的背景颜色改变,还有焦点新闻(新闻图片)的轮换,可以这么理解,有动画的有交互的一般都是用JavaScript来实现

scroll硬件加速

//滚动条硬件加速
overflow: auto;
-webkit-overflow-scrolling: touch;

眼袋困意

6、HTML的代码注释:<!–注释文字–>

上下左右居中

#parent{
    position:relative;

    #child {
        position: absolute;
        top: 50%;
        left: 50%;
        //transform变形改变(旋转,移动)
        //translate(x,y)定义2D移动
        transform: translate(-50%, -50%);
        //允许属性平滑过渡
        //transition:width 2s ease 0s;
    }
}

#parent{
    display:table-cell;
    text-align:center;
    vertical-align:middle;

    #child{
        display:inline-block;
    }
}

#parent{
    display: flex;
    align-items: center;
    justify-content: center;
}

//按图片比例
//padding-bottom设置百分比是相对于width
.mk-new-product-card > a > div:nth-of-type(1) {
    width: 100%;
    height: 0;
    padding-bottom: 48.2%;
    position: relative;
    overflow: hidden;
}

抵不住你的诱惑

7、使用<br>标签表示文本分行显示:

浏览器内核

IE:trident -ms-
FireFox:gecko -moz-
Safari:webkit -webkit-
Opera:presto(旧) blink -o-
Chrome:webkit -webkit-
Autoprefixer插件可自动添加前缀

我愈战愈勇在你心里

<body>

<h2>《咏桂》</h2>

<p>

暗淡轻黄体性柔,<br/>
情疏迹远只香留。<br/>
何须浅碧深红色,<br/>

自是花中第一流。

</p>

</body>

盒模型

具有content, padding, border, margin等属性
IE的width = content + border + padding

box-sizing: content-box | border-box | inherit;

content-box:width = content-width
border-box:width = content-width + padding-width + border

有点窃喜

8、为网页添加一些空格:输入语法&nbsp;

伪类选择器

目标伪类:target
元素状态伪类:enabled, :disabled, :checked
解构伪类:first-child, :last_child, :empty, :only-child
否定伪类:not(selector)
a标签lvha:
:link
:visited
:hover
:active

也有些收获

<body>

<h1>感悟梦想</h1>

来源:作文网 &nbsp;作者:为梦想而飞

</body>

伪元素

content属性与:before, :after伪元素配合使用,插入生成内容

p:before{
    content: "hello";  
}

雾霾少了,信心十足

9、网页显示的新闻列表:用ul-li标签来完成,ul-li是没有前后顺序的信息列表,默认每条信息前面显示小圆点

Flex

.box{
    display: -webkit-flex; /* Safari */
    display: flex;
    /* 主轴方向 */
    flex-direction:row | row-reverse | column | column-reverse;
    /* 如何换行,默认不换 */
    flex-wrap: nowrap | wrap | wrap-reverse;
    /* flex-direction和flex-wrap缩写 */
    flex-flow:row nowrap;
    /* 主轴对齐方式 */
    justify-content: flex-start | flex-end | center | space-between | space-around;
    /* 主轴垂直对齐方式 */
    align-items: flex-start | flex-end | center | baseline | stretch;

    .item{
        //项目排序
        order:1;
        //子项分配父项剩余空间比,默认0
        flex-grow:0;
        //子项收缩占的份数
        flex-shrink:1;
        //子项初始大小
        flex-basis: 350px;
        //flex-grow, flex-shrink, flex-basis简写
        flex:0 1 auto;
        //子项,数值占剩余空间份数
        flex:1;
    }
}

有爱的你

<body>

<ul>

   <li>this is my home</li>

   <li>this is my home</li>

   <li>this is my home</li>

</ul>

</body>

媒体检测

only限定某种设备
screen设备的一种
and 关键字
not

设备:all, braille, handheld, print, screen, speech

//screen指浏览器视窗
//视窗小于1024px响应以下样式
@media only screen and (max-width: 1024px) {
    margin: 0;
}
//视窗小于376px响应以下样式
@media(max-width: 376px) {}

把我的灵魂吸引

10、把一些标签放进<div>里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的

画三角

//绘三角形
.up{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid red;
}

痴迷忘记了生活的苦

<body>

<div id=”hotList”>

<h2>热门课程排行榜</h2>

<ol>

<li>前端开发面试心法</li>

<li>零基础学习html</li>

<li>javascript全攻略</li>

</ol>

</div>

<div> id=”learninstructed”>

<h2>web前端开发导学课程</h2>

<ul>

<li>网页专业名词大扫盲</li>

<li>网站职位定位指南</li>

<li>为您解密Yahoo网站制作流程</li>

</ul>

</div>

</body>

Position

position:absolute | fixed | relative | static | inherit;
absolute:绝对定位,相对于relative
fixed:绝对定位,相对于浏览器
relative:相对定位元素
static:默认,没定位
inherit:从父元素继承position属性值

一日不见

11、HTML文件的结构:

Font-face

//.eot, .ttf, .woff, .svg
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?ac2jxe');
  src: url('../fonts/icomoon.eot?ac2jxe#iefix') format('embedded-opentype'),
  url('../fonts/icomoon.ttf?ac2jxe') format('truetype'),
  url('../fonts/icomoon.woff?ac2jxe') format('woff'),
  url('../fonts/icomoon.svg?ac2jxe#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-1:before {
  content: "\e900";
}

手机简书APP

<html>

   <head>…</head>

   <body>…</body>

</html>

文本溢出

.overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    //文本不换行,直到遇到<br/>
    white-space: nowrap;
}

.overflow-plus {
    overflow : hidden;
    text-overflow: ellipsis;
    //多行文本溢出
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

//跨浏览器兼容多行文本溢出
.overflow-plus-plus {
    p {
        position: relative;
        line-height: 1.4rem;
        height: 4.2rem; //3行
        overflow: hidden;
    }

    p::after {
        content: "...",
        position: absolute;
        background: #ffffff;
    }
}

我是真的活不下去

因为与简书相遇,兴奋与激动就一直未离开。每天的夜里,才仿佛有了灵感,想写的念头无法打消。

和有书那群兴趣爱好相同的不曾见面的朋友,有了默默没有相约的约定。定时或不定时,大家都在那群中相邀,说天谈地,好不惬意。

有初秋的开始,到了初冬的日子,没有约定的约会,好像没有休息的意思,不想熬夜,黑眼圈和眼袋的抗议,把我的心搅乱得如此彻底。我也无语,我无法管住自己不找你,我的手机简书APP!

随着冬天的阳光,随着大家的温情播报,随着大咖的成长,随着春风还远的节奏,在冬天里我暗下决心,熬夜我先戒了!

随时拿起手机,随时看到朋友,在工作之后,我们一切的一切安排妥当,那时候一点也不迟,到那时,我们都好好诉说些日子。

或许,那个时候,

你已是自己写作天地的王子与公主,踩着五彩的云朵,我们随时变形去接近理想的那里。

不用太多的时间,我们都把熬夜戒掉,不熬夜的王子与公主,是世上最美的太阳下,最美的精灵。

爱你在初冬太阳暖暖的日子,我的简书。

天有点冷,我的心里有个童话,公主与王子相遇。

图片 2

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图