HTML5+CSS3
文章平均质量分 79
hello刘海
这个作者很懒,什么都没留下…
展开
-
手机版网页设计html5元素meta name=”viewport”设置需要注意的地方
越来越多的网页开始针对手机浏览,自适应屏幕大小了,css的设置方法请参见前面的文章:用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解,在这篇文章里面我们详细解读一下,html5属性里面 meta name=viewport 的最佳设置方式。首先:看看实例一.......解读:width=device-width转载 2014-02-25 14:34:29 · 2165 阅读 · 0 评论 -
移动对meta的定义
以下是meta每个属性详解尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。一、 //编码META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的标记和 标题 用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以转载 2014-10-13 11:56:02 · 435 阅读 · 0 评论 -
CSS3知识整理——(一)
Css3 选择器 --属性选择器(1)原创 2014-09-29 10:06:34 · 637 阅读 · 0 评论 -
移动Web——CSS为Retina屏幕替换图片
特别声明:此篇文章根据Stéphanie Walter的英文文章《The Mobile Web: CSS Image Replacement for Retina Display Devices》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.noupe.com/design/the-mobile-web转载 2014-09-16 10:16:38 · 575 阅读 · 0 评论 -
HTML5基础知识整理(二)—— 新特性
HTML5新特性的浏览器支持情况http://www.caniuse.com/#index原创 2014-09-24 17:59:30 · 651 阅读 · 0 评论 -
HTML5基础知识整理(一)—— 新增标签和属性
HTML5新特性的浏览器支持情况http://www.caniuse.com/#index原创 2014-09-19 15:28:49 · 1101 阅读 · 0 评论 -
使用CSS3 Flexbox布局
Flexbox的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器(flex container)来辅助实现。 Flexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩,从而容易调转载 2014-08-05 17:27:47 · 537 阅读 · 0 评论 -
CSS3 Media Queries
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> link href="css/style.css" rel="stylesheet" type="text/css" med转载 2014-08-07 14:26:02 · 405 阅读 · 0 评论 -
css3弹性盒子模型之box-flex
box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高、水平均分、按比例划分。但是它有一定的局 限性,在firefox、chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)、chrome(-webkit)。一、box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分。 11转载 2014-08-05 10:39:03 · 1297 阅读 · 0 评论 -
contenteditable="true" 开启元素的编辑模式
使用方法html中 ;js 中 document.all("txt").contentEditable =true;UI的美化,表单元素通过css样式不一定能达成设计师的要求,通过开启 div p span等元素的contentEditable,来实现表单元素的功能(需要js搭配)。原创 2014-04-18 11:11:26 · 6133 阅读 · 1 评论 -
CSS3(四)—— CSS3文本效果
CSS3 文本效果CSS3 包含多个新的文本特性。在本章中,您将学到如下文本属性:rgba 颜色text-shadowword-wrap浏览器支持属性浏览器支持text-shadow word-wrap原创 2014-03-17 16:40:24 · 626 阅读 · 0 评论 -
CSS3(二)—— CSS3框模型
通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。在本章中,您将学到以下边框属性:border-radiusbox-shadowborder-image浏览器支持属性浏览器支持border-radius原创 2014-03-10 11:44:24 · 2420 阅读 · 0 评论 -
CSS3(三)—— CSS3背景
CSS3 背景CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。在本章,您将学到以下背景属性:background-sizebackground-originbackground-clip您也将学到如何使用多重背景图片。浏览器支持属性浏览器支持background-size原创 2014-03-12 15:07:15 · 859 阅读 · 0 评论 -
HTML5 标签 hgroup 已经被废除
HTML5 增加了很多语义化的标签,hgroup 就是其中一个,它用来表明标题的集合。如果有主标题、副标题,可以使用这个来包裹一下,一般比较常见的就是网站的标题和网站描述:但是这样做并不是太必要,而且还有一些麻烦。一般来说,很难有单纯的 hn 标题标签集合在一起,通常还包含一些其他内容,但是使用 hgroup 包裹的内容,必须是 hn 标题标签,否则不会通过 HTML5 验证。又有转载 2014-02-18 11:24:32 · 1943 阅读 · 0 评论 -
用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解
如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。比如说我们熟悉的wordpress后台,当屏幕分辨率小于900px的时候,左边的侧栏就会变成收拢状态(@media only screen and (max-width:900px转载 2014-02-25 14:56:14 · 10657 阅读 · 0 评论 -
CSS3的calc()使用
平时在制作页面的时候,总会碰到有的元素是100%的宽度。众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异转载 2015-01-28 15:36:07 · 1138 阅读 · 0 评论