<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 css图片自动缩放</title>
<style type="text/css">
.cont{ margin:0 auto; width:600px;}
.cont img{max-width: 100%!important; height: auto!important;...
学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少。师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛。于是决定在这个假期里,主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个HTML5+CSS3静态页面布局的练习,查缺补漏知识点并且总结在实践过程中遇到的一些错误。页面的设计稿主要是网络上找来了的,也尝试自己切图、测量位置、获得内容的属性等等...
1.display 中 block, inline, inline-block 的区别 1).默认情况下, block 宽度占满整个浏览器, inline 宽度等于其内容的宽度 2).每行只容纳一个 block 元素, 但可以并列容纳多个 inline 元素 3).block 元素宽、高、行高等可以更改, inline 元素宽、高、行高等不可更改 4).应用 inline-block 的元素呈现为内联对象, 周围元素保持在同一行, 但可以设置宽度和高度地块元素的属性(这样可以使用 li + inline-block 制作导航...
现在我们可以选择浏览器非常多,所以浏览器的环境也是种类繁多,同一个浏览器也是包含各种不同的版本,不同的版本之间的渲染方法也存在差异,,它们支持的 HTML5、CSS3 特性恐怕也不尽相同。这种情况于是造成Web开发者在开发网站时,要面对数量庞大的浏览器种类。如果开发时按最低标准,比如 IE6不支持的特性,我们统统不用,那就没有必要写这篇文章了;但我想这种情况极少,更多的开发,是在现代浏览器上使用它们支持的特性,而在...
译文原链接:http://codetheory.in/html5-fullscreen-background-video/前言:当网页载入时,自动播放的全屏背景视频 已经成为当前颇受欢迎的趋势。 就个人而言,我认为自动播放、质量好的视频会增加用户/客户的参与度。应该记住,视频的故事必须与品牌相关。 近年来,我们被FB和Twitter等社交网络上的大量视频所包围。 据研究由此引起了用户更多的参与。最近我不得不在一个网站上实现相同的功能,因此我决定构建一个用到 HTML5 视...
先看效果(把鼠标移上去看看)abcd 这个效果很简单,就是移动文字的位置模拟出震动的效果。 Css 1<style>2@-webkit-keyframes shake {3 0%{4 -webkit-transform:translate(2px, 2px);5 }6 25%{7 -webkit-transform:translate(-2px, -2px);8 }9 50%{
10 -webkit-transform:translate(0px, 0px);
11 }
12 75%{
13 -webkit-transform:translate(2px, -2px);
14 }
15 100...
第一章:Web时代的变迁HTML5放心使用的理由:兼容性:HTML5在老板本的浏览器上也可以正常运行;实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能;非革命性的发展:HTML5的内部功能不是革命性的,只是发展性的。第二章:HTML5与HTML4的区别1.DOCTYPE声明:<!DOCTYPE html>2.指定字符i编码:<meta charset = "UTF-8">3.不允许写结束标记的元素有:area, base, br, col, command, embed, hr, ...
今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下:在线预览 源码下载实现的代码。html代码:<div class="container"><div class="cube"><div class="side side1"></div><div class="side side2"></div><div class="side side3"></div><div class="side side4"></div><div class="side side5"></div><div class="side side6"></div></div></div><div class="container container2"><div class="cube"><div class="sid...
当文章的标题是一副用photoshop制作的图片,那么势必在搜索引擎中无法搜索到。并且因为图片的体积不算小。可能在网速慢的的时候不得不耐心的等待图片的刷新。所以。我们来谈谈有没有一种新的方法能够避免这些缺点。 什么是HTML5和CSS3 HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这样的语言。我们能够向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。 HTML 5的新特性 1. 新的内容标...
一:论文信息标题:浅析HTML5+CSS3在网页设计中的新特性及优势关键字: HTML5; CSS3; 网页设计 ;网页视觉元素 ;二:论文内容基础:HTML5作为新-一代万维网的核心语言,目前仍处于不断完善阶段.谈及HTML5,不仅仅指超文本标记语言( HTML)本身,同时还包括CSS与JavaSeript 在内的一系列技术组合. CSS3与以往版本相比,在图片、布局的样式控制上有很多新优势,尤其在网页视觉元素方面表现突出将HTMLS与CSS3功能与优势进行融合,势必将...
第四章 文本1、<p></p>2、<small></small>表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。3、<strong></strong>表示内容的重要性,以粗体显示,一个strong可以嵌套在另一个strong中;<em></em>表示内容的着重点,以斜体显示,一个em可以嵌套在另一个em中。<b></b>用于如文档摘要里的关键词、评论里的产品名、基于文本的交互式软件中指示操作的文字、文章导语等;<i></i>用于如分类名称、技术术语、外语里...
第21章 Media Queries相关样式该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器、便携设备、电视机)使用方法@media 设备类型 and (设备特性) {样式代码}大部分设备特性的指定值接受min/max的前缀,表示大于等于或小于等于的逻辑使用and关键字来指定某种设备类型的某些特性满足某个条件时使用的样式,下列表示设备窗口小于640px时所使用的样式@media screen and (max-widt...
前言
我们在手机上布局一般是这个样子的:其中头部对整个mobile的设计至关重要,而且坑也很多:① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多② 在Hybrid应用中,Header很多时候扮演了不一样的角色,首先要完成以webview(window)为容器的功能,又要调用native提供的接口Hybrid中Header的实现往往是一个难点,主要原因是同一套接口,要保证H5站点与native处于不一样的环境调用相同的接口,完成不同...
本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍一下HTML5的拖放。拖放(Drag 和 drop)是 HTML5 标准的组成部分。浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。被拖元素,dragElement : 1、添加事件:ondragstart2、添加属性:dragable放置元素,dropElement:1、添加事件:ondargenter , ondragover , ondragleave , ondragend ,ondrop和mouser划入划出一类的事件很类...
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类似的用户体验。而且使用这些特性将会比使用flash更加有效。也许你可能刚知道Adobe停止开发移动版flash的消息,虽然在桌面中我们还拥有大量的flash的应用,但是随着HTML标准的完善,可能flash也要退出历史舞台了。在今天这篇文章中,我们将介...