关闭

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

border-radius属性 用法: border-radius:像素; 复合写法: 1. 左上角 右上角 右下角 左下角 border-radius:20px; 2. 左上角=右下角=20px; 右上角=左下角=40px; border-radius:20px 40px; 3. 左上20 右上30 右下40 border...
阅读(172) 评论(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个元素的样式 div:nth-child(8){ color: red; } 注意:第...
阅读(458) 评论(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(只能选择到div下方第一个p 若div下方第一个不是p元素 就没改变 且div自身的样式不改变) 3.属性选择器...
阅读(173) 评论(0)

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

响应式布局设计的一般步骤 第一步:在head标签内设置meta标签 第二步:在style标签内通过媒体查询来设置meta query meta query 是响应式设计的核心,它能够跟浏览器进行沟通,浏览应该呈现什么样的布局。 iphone3gs 当屏幕小于320px时执行里面的样式 @media only screen and (min-width: 100px) and (...
阅读(219) 评论(0)

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

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

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

布局的分类 a.静态布局:限制死宽高的网站 传统web设计,不管浏览器具体是多少,网页的布局就一直会按照最开始的布局来显示。 特点:固定死宽高。 b.自适应布局:根据不同显示分辨率各设置一套样式,让元素的大小不变 位置可变(但是如果继续缩小 该页面还是会出现滑动条,样式是固定px 没用百分比) 定义:就是为不同的屏幕分辨率来定义不同的布局,并且在每个布局中页面元素不随窗口...
阅读(114) 评论(0)

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

多媒体标签 一.audio音频标签 浏览器不支持该标签时,才显示这部分文字 属性: 1.src:表示文件地址 2.controls 向用户展示播放按钮 3.当浏览器不支持该标签时,才显示标签里面的内容 4.loop文件循环播放 5.autoplay 让文件自动播放 6.preload用来缓存大的文件其中有三个值可选 a.none:不缓存 b.auto:缓存(默认) ...
阅读(163) 评论(0)

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

一. 用法:定义了独立的内容,内容通常是一篇帖子,一篇博客,一篇短文,杂志,新闻文章,一条完整的回复,评论等 内部可以使用header,footer,section,article标签 提示: 每一个article标签的内部结构应该是相似的。 用法:是界面进行分区,元素通常可由标签和内容组成 注意: 内容一般宝航一个标签h1-h6,可以包含article,嵌套sectio...
阅读(94) 评论(0)

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

兼容性个例 1.并一行的元素,第一个元素没有设置浮动,第二个元素设置了向左浮动。在IE6,7下连两个元素之间会多出3px的空隙。 解决办法:如果一行有一个元素设置了浮动,那么给ital元素都设置浮动就可以消除空隙。 2.并列一行元素,第一个元素没有设置浮动,第二个元素向右浮动,那么在IE6,7下,第二个元素会折行显示。 3.块属性标签设置浮动,并且有水平方向的margin值,水...
阅读(91) 评论(0)

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

浏览器兼容性概念 1.市面上浏览器有哪些? IE6,IE7,IE8,谷歌浏览器,火狐浏览器 至于我们常用的浏览器的遨游浏览器,QQ,360采用的是计算机系统自带的浏览器内核,所有只要兼容以上几类浏览器即可兼容这些浏览器 2.CSS HACK? CSS hack是通过在CSS样式中加入一些特殊符号,让不同的浏览器识别不同的符号(什么浏览器识别什么样的符号都是有自己一套标准)...
阅读(70) 评论(0)

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

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

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

CSS编码风格 1)单行 阅读性比较差 优点:减少css文件数。提高开发速度。 2)多行 优点:阅读性比较强 缺点:css行数比较多,影响效率。 注意: 1.200kb大小的css文件执行速率相差1s 2.如果一个网站打开时间超过3s,会有20%-30%的用户流失,如果超过5s,流失率达80-100%。 WEB标准架构:实现样式和行为的分离 分割为:....
阅读(108) 评论(0)

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

一.浮动框架 iframe       iframe可以称之为内敛框架, 它可以在网页中局部插入另一个文件或者页面。可添加样式。        用法:     iframe可于a标签来组合使用 例子: 点击 效果如下: 点击 注意: a标签的target一定要iframe中的name名字保持一致 可只显示某个网页的某一...
阅读(381) 评论(0)

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

雪碧图原理 1.雪碧图原理 是CSS一种头图像合成技术,该方法是将所有的小图标拼接到一张图片上,然后利用图片的背景定位来显示需要现实的部分。 2.使用场景 1)静态图,不随用户的信息的变化而变化 2)下图片,图片容量比较小 3)夹在两比较大的图片 3.使用雪碧图,可以减少http请求,加速显示内容, 4.雪碧图的制作方式 1.利用PS进行手工拼接 2.s...
阅读(166) 评论(0)

触发BFC实现简单自适应

首先试一下代码 .div{ /*width: 600px;*/ height: 400px; border: 5px solid red; } .a{ width: 300px; height: 200px; background: palegreen; float: left; } .b{ heigh...
阅读(156) 评论(0)
53条 共4页1 2 3 4 下一页 尾页
    个人资料
    • 访问:14151次
    • 积分:642
    • 等级:
    • 排名:千里之外
    • 原创:53篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档