排序:
默认
按更新时间
按访问量

HTML5学习_day13(3)--border-radius属性(圆角边框)

border-radius属性 用法: border-radius:像素; 复合写法: 1. 左上角 右上角 右下角 左下角 border-radius:20px; 2. 左上角=右下角=20px; 右上角=左下角=40px; b...

2016-10-12 21:13:25

阅读数:441

评论数:0

HTML5学习_day13(2)--nth-child(n)伪类选择器(多标签时不通过id,class来快速选中标签)

nth-child 作用:可以不通过id,class来快速选中标签 用法: 1 2 3 4 可以通过 div:nth-child(2) 来快速选中第二个div nth-child(n):n可输出正整数,代表选中第几个 控制第8个元素的样式 di...

2016-10-12 20:55:47

阅读数:758

评论数:0

HTML5学习_day13(1)--css3基础属性

css3选择器 css2选择器 1.标签选择器 2.id选择器 3.class选择器 4.群组选择器 5.后代选择器 6.伪类选择器(first-child等) 7.通配选择器 css3选择器: 1.子选择器 例如:div>p 2.相邻兄弟选择器 div+p(只能选...

2016-10-12 20:37:38

阅读数:333

评论数:0

HTML5学习_day12(3)--响应式布局

响应式布局设计的一般步骤 第一步:在head标签内设置meta标签 第二步:在style标签内通过媒体查询来设置meta query meta query 是响应式设计的核心,它能够跟浏览器进行沟通,浏览应该呈现什么样的布局。 iphone3gs 当屏幕小于320px时执行里面的...

2016-10-12 19:44:21

阅读数:394

评论数:0

HTML5学习_day12(2)--流式布局

流式布局 流式布局的实质:百分比布局 转换公式 目标元素的宽度/上下级元素的宽度(父级元素的宽度)=百分比宽度; 弹性图片 去掉图片的宽高,指定max-width:100%;可以使图片缩放到与包含其容器的宽度的100%匹配。 两个简单例子: 例子1: #wrap...

2016-10-12 19:35:45

阅读数:159

评论数:0

HTML5学习_day12(1)--html布局

布局的分类 a.静态布局:限制死宽高的网站 传统web设计,不管浏览器具体是多少,网页的布局就一直会按照最开始的布局来显示。 特点:固定死宽高。 b.自适应布局:根据不同显示分辨率各设置一套样式,让元素的大小不变 位置可变(但是如果继续缩小 该页面还是会出现滑动条,样式是固定px ...

2016-10-12 19:27:46

阅读数:203

评论数:0

HTML5学习_day11(2)--H5多媒体标签

多媒体标签 一.audio音频标签 浏览器不支持该标签时,才显示这部分文字 属性: 1.src:表示文件地址 2.controls 向用户展示播放按钮 3.当浏览器不支持该标签时,才显示标签里面的内容 4.loop文件循环播放 5.autoplay 让文件自动播放 6.p...

2016-10-12 19:15:01

阅读数:366

评论数:0

HTML5学习_day11(1)--HTML新标签

一. 用法:定义了独立的内容,内容通常是一篇帖子,一篇博客,一篇短文,杂志,新闻文章,一条完整的回复,评论等 内部可以使用header,footer,section,article标签 提示: 每一个article标签的内部结构应该是相似的。 用法:是界面进行分区,元素通常可...

2016-10-12 19:06:38

阅读数:168

评论数:0

HTML5学习_day10(4)--兼容性个例

兼容性个例 1.并一行的元素,第一个元素没有设置浮动,第二个元素设置了向左浮动。在IE6,7下连两个元素之间会多出3px的空隙。 解决办法:如果一行有一个元素设置了浮动,那么给ital元素都设置浮动就可以消除空隙。 2.并列一行元素,第一个元素没有设置浮动,第二个元素向右浮动,那么在...

2016-10-11 20:52:55

阅读数:171

评论数:0

HTML5学习_day10(3)--兼容性概念

浏览器兼容性概念 1.市面上浏览器有哪些? IE6,IE7,IE8,谷歌浏览器,火狐浏览器 至于我们常用的浏览器的遨游浏览器,QQ,360采用的是计算机系统自带的浏览器内核,所有只要兼容以上几类浏览器即可兼容这些浏览器 2.CSS HACK? CSS hack是通过在CS...

2016-10-11 20:49:12

阅读数:201

评论数:0

HTML5学习_day10(2)--css文件书写格式

css文件书写格式 1.尽量将样式写在一个单独的css文件里面,在head里面去引用 1)实现了内容与样式的分离, 2)减少了页面的体积 3)css文件可以被缓存,重用,维护成本低 (注意:css文件只加载一次,重新刷新页面时会在缓存里面找) 2.不要使用@import(这个也是可...

2016-10-11 20:36:13

阅读数:811

评论数:0

HTML5学习_day10(1)--css编码风格和WEB标准架构

CSS编码风格 1)单行 阅读性比较差 优点:减少css文件数。提高开发速度。 2)多行 优点:阅读性比较强 缺点:css行数比较多,影响效率。 注意: 1.200kb大小的css文件执行速率相差1s 2.如果一个网站打开时间超过3s,会有20%-30%的用户流失,如...

2016-10-11 20:29:54

阅读数:200

评论数:0

HTML5学习_day09(1)--(iframe embend dispalu_table !important)的使用

一.浮动框架 iframe       iframe可以称之为内敛框架, 它可以在网页中局部插入另一个文件或者页面。可添加样式。        用法:     iframe可于a标签来组合使用 例子: 点击 效果如下: 点击 ...

2016-10-11 19:52:38

阅读数:555

评论数:0

HTML5学习_day08(1)--雪碧图

雪碧图原理 1.雪碧图原理 是CSS一种头图像合成技术,该方法是将所有的小图标拼接到一张图片上,然后利用图片的背景定位来显示需要现实的部分。 2.使用场景 1)静态图,不随用户的信息的变化而变化 2)下图片,图片容量比较小 3)夹在两比较大的图片 3.使用雪碧图,可以...

2016-10-11 19:40:55

阅读数:234

评论数:0

触发BFC实现简单自适应

首先试一下代码 .div{ /*width: 600px;*/ height: 400px; border: 5px solid red; } .a{ width: 300px; height: 200px; background...

2016-10-11 19:26:05

阅读数:323

评论数:0

overflow解决浮动高度塌陷问题的原理--触发BFC

.div{ width: 600px; border:5px solid black; overflow: hidden; } div{ width: 400px; height: 200px; background: blue; ...

2016-10-11 19:13:03

阅读数:473

评论数:0

HTML5学习_day07(2)--BFC定义

1.BFC? 块级格式化上下文(block formatting context)简称BFC 它规定了块级盒子的渲染布局方式。   2.什么元素可以触发产生一个BFC? 1.根元素(HTML) 2.float浮动属性为非none,如设置为left或right时 3.position...

2016-10-11 19:03:20

阅读数:167

评论数:0

HTML5学习_day07(1)--BFC概念

1.BFC? 块级格式化上下文(block formatting context)简称BFC 它规定了块级盒子的渲染布局方式。   2.什么元素可以触发产生一个BFC? 1.根元素(HTML) 2.float浮动属性为非none,如设置为left或right时 3.positi...

2016-10-08 10:53:22

阅读数:196

评论数:0

HTML5学习_day06(5)--html之固定总结(轮播图 垂直居中)

1.position:relative 不会脱离文档流 2.position:absolute | fix 脱离文档流 3.absolute是相对于父级非static(没有设置定位默认值)进行定位(若父级是static 继续往上找有定位的父级) 4.fixed始终是相对于浏览器窗口来进行定位...

2016-10-08 09:56:37

阅读数:958

评论数:0

HTML5学习_day06(4)--html之固定定位

1.固定定位的定义position: fixed 它使相对浏览器窗口进行定位的,同样脱离文档流的,可以通过left,right,top,bottom来调整元素所在的位置 就是让该标签一直显示在网页某个位置  无论你怎么滚动界面 2.用户 1.一般用来做页面的导航部分与底部 2.可以...

2016-10-08 09:31:46

阅读数:183

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭