- 博客(21)
- 收藏
- 关注
原创 HTML5学习_day13(3)--border-radius属性(圆角边框)
border-radius属性用法:border-radius:像素;复合写法:1.左上角 右上角 右下角 左下角border-radius:20px;2.左上角=右下角=20px;右上角=左下角=40px;border-radius:20px 40px;3.左上20 右上30 右下40border
2016-10-12 21:13:25 4134
原创 HTML5学习_day13(2)--nth-child(n)伪类选择器(多标签时不通过id,class来快速选中标签)
nth-child作用:可以不通过id,class来快速选中标签用法: 1 2 3 4可以通过div:nth-child(2)来快速选中第二个divnth-child(n):n可输出正整数,代表选中第几个控制第8个元素的样式div:nth-child(8){color: red;}注意:第
2016-10-12 20:55:47 1407
原创 HTML5学习_day13(1)--css3基础属性
css3选择器css2选择器1.标签选择器2.id选择器3.class选择器4.群组选择器5.后代选择器6.伪类选择器(first-child等)7.通配选择器css3选择器:1.子选择器 例如:div>p2.相邻兄弟选择器 div+p(只能选择到div下方第一个p 若div下方第一个不是p元素 就没改变 且div自身的样式不改变)3.属性选择器
2016-10-12 20:37:38 605
原创 HTML5学习_day12(3)--响应式布局
响应式布局设计的一般步骤第一步:在head标签内设置meta标签第二步:在style标签内通过媒体查询来设置meta querymeta query 是响应式设计的核心,它能够跟浏览器进行沟通,浏览应该呈现什么样的布局。iphone3gs当屏幕小于320px时执行里面的样式@media only screen and (min-width: 100px) and (
2016-10-12 19:44:21 824
原创 HTML5学习_day12(2)--流式布局
流式布局流式布局的实质:百分比布局转换公式目标元素的宽度/上下级元素的宽度(父级元素的宽度)=百分比宽度;弹性图片去掉图片的宽高,指定max-width:100%;可以使图片缩放到与包含其容器的宽度的100%匹配。两个简单例子:例子1: #wrap{ width: 800px; height: 600px; margi
2016-10-12 19:35:45 1078
原创 HTML5学习_day12(1)--html布局
布局的分类a.静态布局:限制死宽高的网站传统web设计,不管浏览器具体是多少,网页的布局就一直会按照最开始的布局来显示。特点:固定死宽高。b.自适应布局:根据不同显示分辨率各设置一套样式,让元素的大小不变 位置可变(但是如果继续缩小 该页面还是会出现滑动条,样式是固定px 没用百分比)定义:就是为不同的屏幕分辨率来定义不同的布局,并且在每个布局中页面元素不随窗口
2016-10-12 19:27:46 395
原创 HTML5学习_day11(2)--H5多媒体标签
多媒体标签一.audio音频标签浏览器不支持该标签时,才显示这部分文字属性:1.src:表示文件地址2.controls 向用户展示播放按钮3.当浏览器不支持该标签时,才显示标签里面的内容4.loop文件循环播放5.autoplay 让文件自动播放6.preload用来缓存大的文件其中有三个值可选a.none:不缓存b.auto:缓存(默认)
2016-10-12 19:15:01 668
原创 HTML5学习_day11(1)--HTML新标签
一.用法:定义了独立的内容,内容通常是一篇帖子,一篇博客,一篇短文,杂志,新闻文章,一条完整的回复,评论等内部可以使用header,footer,section,article标签提示:每一个article标签的内部结构应该是相似的。用法:是界面进行分区,元素通常可由标签和内容组成注意:内容一般宝航一个标签h1-h6,可以包含article,嵌套sectio
2016-10-12 19:06:38 306
原创 HTML5学习_day10(4)--兼容性个例
兼容性个例1.并一行的元素,第一个元素没有设置浮动,第二个元素设置了向左浮动。在IE6,7下连两个元素之间会多出3px的空隙。解决办法:如果一行有一个元素设置了浮动,那么给ital元素都设置浮动就可以消除空隙。2.并列一行元素,第一个元素没有设置浮动,第二个元素向右浮动,那么在IE6,7下,第二个元素会折行显示。3.块属性标签设置浮动,并且有水平方向的margin值,水
2016-10-11 20:52:55 325
原创 HTML5学习_day10(3)--兼容性概念
浏览器兼容性概念1.市面上浏览器有哪些?IE6,IE7,IE8,谷歌浏览器,火狐浏览器至于我们常用的浏览器的遨游浏览器,QQ,360采用的是计算机系统自带的浏览器内核,所有只要兼容以上几类浏览器即可兼容这些浏览器2.CSS HACK?CSS hack是通过在CSS样式中加入一些特殊符号,让不同的浏览器识别不同的符号(什么浏览器识别什么样的符号都是有自己一套标准)
2016-10-11 20:49:12 369
原创 HTML5学习_day10(2)--css文件书写格式
css文件书写格式1.尽量将样式写在一个单独的css文件里面,在head里面去引用1)实现了内容与样式的分离,2)减少了页面的体积3)css文件可以被缓存,重用,维护成本低(注意:css文件只加载一次,重新刷新页面时会在缓存里面找)2.不要使用@import(这个也是可以调用css文件 但是是在style标签内使用 @import url(css路径);)影响css
2016-10-11 20:36:13 1913
原创 HTML5学习_day10(1)--css编码风格和WEB标准架构
CSS编码风格1)单行阅读性比较差优点:减少css文件数。提高开发速度。2)多行优点:阅读性比较强缺点:css行数比较多,影响效率。注意:1.200kb大小的css文件执行速率相差1s2.如果一个网站打开时间超过3s,会有20%-30%的用户流失,如果超过5s,流失率达80-100%。WEB标准架构:实现样式和行为的分离分割为:.
2016-10-11 20:29:54 326
原创 HTML5学习_day09(1)--(iframe embend dispalu_table !important)的使用
一.浮动框架 iframe iframe可以称之为内敛框架, 它可以在网页中局部插入另一个文件或者页面。可添加样式。 用法: iframe可于a标签来组合使用例子: 点击效果如下:点击注意:a标签的target一定要iframe中的name名字保持一致可只显示某个网页的某一
2016-10-11 19:52:38 834
原创 HTML5学习_day08(1)--雪碧图
雪碧图原理1.雪碧图原理是CSS一种头图像合成技术,该方法是将所有的小图标拼接到一张图片上,然后利用图片的背景定位来显示需要现实的部分。2.使用场景1)静态图,不随用户的信息的变化而变化2)下图片,图片容量比较小3)夹在两比较大的图片3.使用雪碧图,可以减少http请求,加速显示内容,4.雪碧图的制作方式1.利用PS进行手工拼接2.s
2016-10-11 19:40:55 444
原创 触发BFC实现简单自适应
首先试一下代码 .div{ /*width: 600px;*/ height: 400px; border: 5px solid red; } .a{ width: 300px; height: 200px; background: palegreen; float: left; } .b{ heigh
2016-10-11 19:26:05 506
原创 overflow解决浮动高度塌陷问题的原理--触发BFC
.div{ width: 600px; border:5px solid black; overflow: hidden; } div{ width: 400px; height: 200px; background: blue; float: left; } 父级元素设置了overflow:hidd
2016-10-11 19:13:03 2137
原创 HTML5学习_day07(2)--BFC定义
1.BFC?块级格式化上下文(block formatting context)简称BFC它规定了块级盒子的渲染布局方式。 2.什么元素可以触发产生一个BFC?1.根元素(HTML)2.float浮动属性为非none,如设置为left或right时3.position为 absolute(绝对定位)或fixed(固定定位)4.display为inline-bloc
2016-10-11 19:03:20 287
原创 HTML5学习_day07(1)--BFC概念
1.BFC?块级格式化上下文(block formatting context)简称BFC它规定了块级盒子的渲染布局方式。 2.什么元素可以触发产生一个BFC?1.根元素(HTML)2.float浮动属性为非none,如设置为left或right时3.position为 absolute(绝对定位)或fixed(固定定位)4.display为inline-bl
2016-10-08 10:53:22 337
原创 HTML5学习_day06(5)--html之固定总结(轮播图 垂直居中)
1.position:relative 不会脱离文档流2.position:absolute | fix 脱离文档流3.absolute是相对于父级非static(没有设置定位默认值)进行定位(若父级是static 继续往上找有定位的父级)4.fixed始终是相对于浏览器窗口来进行定位定位的用途:1.图片的叠加2.元素的垂直居中3,布局位置的改变4.广告植入
2016-10-08 09:56:37 2326
原创 HTML5学习_day06(4)--html之固定定位
1.固定定位的定义position:fixed它使相对浏览器窗口进行定位的,同样脱离文档流的,可以通过left,right,top,bottom来调整元素所在的位置就是让该标签一直显示在网页某个位置 无论你怎么滚动界面2.用户1.一般用来做页面的导航部分与底部2.可以用来做网页中插入广告和商业推广注意:1.我们在使用时候尽量使用在页面的底部,因为他脱离了文档流,也
2016-10-08 09:31:46 497
原创 HTML5学习_day06(3)--html之绝对定位
绝对定位的定义position: absolute;它使相对不是static的最近一次的有定位父元素来进行定义的。((这里的所有定位都不能是默认值 static)一开始设置定位时 就找上一级的父元素是否有定位 有就以它为基准定位 若是没有就继续往上找 直到找到有定位的元素 实在没有就会以body为基准定位)被定位的元素会完全脱离文档流,然后我们可以通过left,right,top,
2016-10-08 09:29:13 665
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人