- 博客(53)
- 收藏
- 关注
RSS订阅原创 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
4144
原创 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
1412
原创 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
607
原创 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
825
原创 HTML5学习_day12(2)--流式布局
流式布局流式布局的实质：百分比布局转换公式目标元素的宽度/上下级元素的宽度(父级元素的宽度)=百分比宽度；弹性图片去掉图片的宽高，指定max-width:100%;可以使图片缩放到与包含其容器的宽度的100%匹配。两个简单例子：例子1： #wrap{ width: 800px; height: 600px; margi
2016-10-12 19:35:45
1083
原创 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
670
原创 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
326
原创 HTML5学习_day10(3)--兼容性概念
浏览器兼容性概念1.市面上浏览器有哪些？IE6,IE7,IE8，谷歌浏览器，火狐浏览器至于我们常用的浏览器的遨游浏览器，QQ,360采用的是计算机系统自带的浏览器内核，所有只要兼容以上几类浏览器即可兼容这些浏览器2.CSS HACK?CSS hack是通过在CSS样式中加入一些特殊符号，让不同的浏览器识别不同的符号（什么浏览器识别什么样的符号都是有自己一套标准）
2016-10-11 20:49:12
371
原创 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
1917
原创 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
327
原创 HTML5学习_day09(1)--(iframe embend dispalu_table !important)的使用
一.浮动框架 iframe iframe可以称之为内敛框架， 它可以在网页中局部插入另一个文件或者页面。可添加样式。 用法： iframe可于a标签来组合使用例子： 点击效果如下：点击注意：a标签的target一定要iframe中的name名字保持一致可只显示某个网页的某一
2016-10-11 19:52:38
836
原创 HTML5学习_day08(1)--雪碧图
雪碧图原理1.雪碧图原理是CSS一种头图像合成技术，该方法是将所有的小图标拼接到一张图片上，然后利用图片的背景定位来显示需要现实的部分。2.使用场景1）静态图，不随用户的信息的变化而变化2）下图片，图片容量比较小3）夹在两比较大的图片3.使用雪碧图，可以减少http请求，加速显示内容，4.雪碧图的制作方式1.利用PS进行手工拼接2.s
2016-10-11 19:40:55
447
原创 触发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
2149
原创 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
288
原创 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
339
原创 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
2330
原创 HTML5学习_day06(4)--html之固定定位
1.固定定位的定义position:fixed它使相对浏览器窗口进行定位的，同样脱离文档流的，可以通过left,right,top,bottom来调整元素所在的位置就是让该标签一直显示在网页某个位置 无论你怎么滚动界面2.用户1.一般用来做页面的导航部分与底部2.可以用来做网页中插入广告和商业推广注意：1.我们在使用时候尽量使用在页面的底部，因为他脱离了文档流，也
2016-10-08 09:31:46
502
原创 HTML5学习_day06(3)--html之绝对定位
绝对定位的定义position: absolute;它使相对不是static的最近一次的有定位父元素来进行定义的。（（这里的所有定位都不能是默认值 static）一开始设置定位时 就找上一级的父元素是否有定位 有就以它为基准定位 若是没有就继续往上找 直到找到有定位的元素 实在没有就会以body为基准定位）被定位的元素会完全脱离文档流，然后我们可以通过left,right,top,
2016-10-08 09:29:13
667
原创 HTML5学习_day06(2)--html之相对定位
相对定位就是相对于自己原来的位置 只是内容偏移了而已并且原有占用的空间依旧存在 不会被其他元素填充 相对定位 #div{ width: 1000px; border: 3px solid red; } #div div{ width: 200px; height: 200px; border: 4px so
2016-09-27 15:55:32
867
原创 HTML5学习_day06(1)--html之定位的定义
1.什么是定位？ 把一个元素按照某一种方式放到某一个地方。 2.定位的语法 position属性 值: absolute 绝对定位 relative 相对定位 static 静态(系统默认值) fixed 固定定位
2016-09-27 14:36:39
323
原创 HTML5学习_day05(8)--html之伪类元素选择器(伪元素)
伪类元素选择器 div:after{ content: "后面添加"; } div:before{ content: "前面的"; } :before 在内容前面添加一个元素 :after 在内容后面添加一个元素 添加内容用content属性 123 content:属性值 1.content:“字符串”;
2016-09-26 19:15:28
566
原创 HTML5学习_day05(7)--html之布局中使用浮动带来的问题
解决float带来的布局问题 .div1{ width: 600px; /*height: 400px;*/ /*float: left;*/ /*display: inline-block;*/ /*margin:10px auto; */ /*设置了内敛标签后 margin左右无效 duv1不能水平居中*/ border:4px so
2016-09-26 19:13:23
423
原创 数个div横向放方法
方法1.把div转换成内敛标签display:inline-block;弊端：每个div有左右都有间隔方法2 把几个div设置浮动 并且不会有间隔(但是要在父级元素清除浮动 例如:在父级属性内 overflow:hidden;)
2016-09-26 19:08:30
792
原创 HTML5学习_day05(6)--html之布局中使用浮动带来的问题
问题1: 如果两个相邻兄弟块级元素，给第一个元素float，那么后面的未设置float的块级元素就会无视这个浮动元素的存在，占据浮动元素原有的空间，发生了布局的重叠。 问题2. 对于父子级元素，子元素设置了float，如果父级元素没有设置固定的高度的话，则会导致父级元素高度塌陷。 问题3. 背景不显示
2016-09-26 16:48:24
330
原创 HTML5学习_day05(5)--html之float元素的规则
浮动元素的细则 div{ width: 400px; height: 400px; background-color: aqua; } p{ width: 300px; height: 300px; background-color: salmon; position:; float: lef
2016-09-26 16:23:34
316
原创 HTML5学习_day05(4)--html之float具体表现
浮动具体表现形式 .class1 { width: 300px; height: 200px; background: wheat; /*float: left;*/ /*position: absolute; 定位属性 可注释float查看效果 定位是完全脱离文档流,所以div3的一些文字被覆盖了 但是float是半脱离文档流 所
2016-09-26 16:12:54
383
原创 HTML5学习_day05(3)--html之float定义
1.什么是浮动？ 浮动的框可以向左或向右移动，知道它的外边缘碰到包含框或者是另外一个浮动元素的浮动框为止。 2.float语法： float: left 元素向左浮动 right 元素向右浮动 none 元素不浮动 inherit 从父元素集成float属性
2016-09-26 11:35:54
301
原创 HTML5学习_day05(2)--html文档流和脱离文档流
文档流和非文档流的定义： 1.什么是文档流？ 解释：将窗体自上而下分成一行行，并在每一行中按从左到右的顺序来排放元素，这个我们称之为文档流。 2.什么是脱离文档流(非文档流)? 解释:也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
2016-09-26 10:10:49
807
原创 HTML5学习_day05(1)--html浮动之文档布局
文档布局的4种方式： 1.流式布局(自然布局) 特点：没有任何修饰(没有定位float 定位 弹性)的布局，也就是元素在排版过程中，元素从上到下，从左到右的流式排列，遇块(块级元素)换行等。 2.浮动布局(float) 特点:给元素设置float属性后,脱离文档流，进行左右浮动，紧贴着父级框的左右框。此浮动元素流出来
2016-09-26 09:27:33
241
原创 css+html写下拉导航栏
*{ margin: 0px; padding: 0px; } .heading>li{ border-radius: 10px; line-height: 37px; text-align: center; width: 60px; height: 37px; list-style: none; backgrou
2016-09-24 20:01:17
1583
原创 a标签去下划线或文字添加下修饰
text-decoration:none;a标签属性属性内设置上方属性 即可去除下划线或者文字添加修饰也用这个属性值描述none默认。定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过
2016-09-24 10:09:37
30406
2
原创 文字和背景图位置设置
标签：通常就div或者span不过span可不换行 可横向布局 但不能设置宽高 所有要用display:inline-block;转换格式就可设置高宽设置背景图片位置：background:url(图片路径) no-repeat(不自动延伸) x位置像素(或center) y位置像素(或center) ;例子background:url(img/show.png) no
2016-09-23 12:40:10
2933
原创 HTML5学习_day03(4)--html盒模型了解
盒模型：每个html元素都可以看做成一个盒模型。1.一个盒子的特点。（border，padding，内容区域）2.盒子与盒子之前的关系（margin）盒子的结构：1.content（内容区域）：展示文字跟图片的2.padding（内边距）：内容与边框线的距离3.border（边框）：元素的边框4.margin（外边距）：元素与元素之间的距离（兄弟元素，父子级关系
2016-09-22 19:22:05
375
原创 HTML5学习_day03(3)--a标签伪类(四种状态样式变化)
标签未被点击过的效果a:link{color: red;}定义标签访问后的效果(测试时无法还原link效果时 清理浏览器缓存)a:visited{color:black;}鼠标悬浮在标签位置时效果a:hover{color:green;}鼠标按下未放开时效果a:active{color: darkgoldenrod;}遵循顺序:
2016-09-22 19:19:09
1119
原创 HTML5学习_day03(2)--html之a标签(超链接)
a标签：语法：target属性值:1._blank 在空白页打开ahref="https://www.baidu.com"target="_blank" id="baidu">百度a>2._self(默认) 在相同窗口打开跳转的地址3._parent 在父框架集中打开跳转的地址(效果同上)4._top 在整个窗口中打开链接地址(效果也同上
2016-09-22 19:11:48
235
原创 HTML5学习_day03(1)--块级内敛标签之img
img标签写法：当图片设置宽或高一个值 另一个按比例放大或缩小 不让图片变形 一般来说只设置一个值。注意：1.路径可以使本地图片也可以是网络图片地址2.alt属性一定要写3.图片如果不设置宽高，那么显示的图片宽高会喝原声图片大小保持一致4.如果只设置宽高中的一个值，那么另一个就会等比例进行缩放5.如果不按图片原比例同时设置宽高，那么图片就会
2016-09-22 19:07:12
315
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人