2019年07月_clqxmt

原创 HTML视频、音频插入

1.插入视频：video ：是块状元素第一种写法： <video src="路径" >第二种写法： <video> <source src="路径" type="video/拓展名"></source> type属性一定要写 </video>2.插入音频：audio：是内联元素<audio ...

2019-07-31 23:26:33 733

原创 HTML新增标签

1.HTML新增标签带来的是网页布局的改变提升，对搜索引擎的友好。2.新增结构型标签：（有意义的div）标记定义一个页面或一个区域的头部。标记定义导航链接标记定义一个区域定义一篇文章标记定义页面内容部分的侧边栏标记定义文件中一个区块的相关信息。标记定义一组媒体内容以及它们的标题。标签定义figure元素的标题标记定义一个页面或一个区域的底部。标记定义一个对话框（会话框）类似微...

2019-07-31 23:14:35 193

原创如果没有doctype html会发生什么标准盒模型怪异盒模型

1.如果没有<!doctype html>会发生什么IE浏览器会触发怪异盒模型；2.怪异盒模型会如何解析宽高？解析为实际给定的宽和高，不包括边框，内边距3.标准盒模型实际宽高的计算方式：border+padding+width/height(给定宽高)4.怪异盒模型与标准盒模型的转换属性：box-sizing值：border-box为怪异盒模型content-box为标...

2019-07-31 22:47:17 635

原创使用HTML5新增的结构性标签布局时解决IE浏览器的兼容问题

放在HTML文档中（就是注释，无需更改）var e=("abbr,article,aside,audio,canvas,datalist,details,"+"figure,footer,header,h...

2019-07-31 21:59:19 320

原创两栏布局时左侧栏出现下移问题的解决方法

使用两栏布局，给left设置float：left；给right设置overflow：hidden；时会出现left往下移动的问题，如下：.left{height:820px; width:196px;background:#417ec8;float:left }/*right*/.right{height:820px;overflow:hidden;}解决方法：使用定位可以解决....

2019-07-31 21:14:04 242

原创 banner 区域使用定位后浏览器缩小依然会改变其位置的解决方法

banner区域写了定位，但是浏览器缩小依然会跑到其他位置（应该始终都是居中的）解决方法：给banner设置width：100%； <div class="banner"> <div class="pic"> <img src="img/banner.jpg" alt="" /> </di...

2019-07-31 21:01:16 780

原创浏览器缩小头部的内容会被挤下来

问题浏览器缩小时top里面的字体会被挤到下面，解决方法：给父元素ul整体设置浮动。会整体下来，不会单个下来<form action=""> <input type="text" value="新版网银" class="txt"/> <input type="submit" value="搜索"/> <input t...

2019-07-31 20:54:24 1121

原创各种导航的制作

各种导航的制作1<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} /* nav1 */ .nav1{width:489px;h...

2019-07-30 18:55:53 374

原创双飞翼布局和圣杯布局的写法

双飞翼布局和圣杯布局1.第一种写法：必须按照 left、right、center的顺序写，如果是按照left、center、right的顺序right不能浮动到右边<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &lt...

2019-07-30 18:29:30 301

原创 BFC

1.BFCBFC直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与，它规定内部的Block-level Box如何布局，并且与这个区域外部毫不相干。2.BFC的布局规则1）内部的Box会在垂直方向，一个接一个地放置。2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠3）每个元素的margin-...

2019-07-30 18:08:54 61

原创表格的补充

表格的补充1.rules属性：添加组分隔线值：rows：位于行之间的线条cols：位列之间的线条all:位于行和列之间的线条none:没有线条groups:位于行组和列组之间的线条2.数据列分组（1）<colgroup span="分组列数"></colgroup>（2）<col span="">说明：1）col和colgroup元素会根据...

2019-07-30 16:46:25 319

原创表单的补充

表单的补充1.表单的组成：表单域（from）、表单控件（input）、提示信息（label）2.表单字段集：fieldset：是一个块元素<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> ...

2019-07-30 15:38:36 112

原创插入图片以及使用iframe标签撑大三像素的解决方法

插入图片以及使用iframe标签撑大三像素的解决方法1.使用vertical-align:top/bottom/middle可以解决2.使用display:block;也可以解决<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&gt...

2019-07-30 14:02:56 527

原创图片大小不一样时如何同时设置垂直居中

图片大小不一样时如何同时设置垂直居中第一步：给img找一个参照物，即在img后面插入一个空标签，例如<span> </span>第二步：给img设置{vertical-align:middle;}第三步：给空标签span设置{display:inline-block; height:100%; vertical-align:middle;}<ul> ...

2019-07-30 12:06:07 335

原创 BUG :CSS 样式不能正常显示

错误描述：div cp 的css样式一直显示不出来，有宽度，高度也能根据div里面的内容高度显示，但是就是CSS样式显示不出来，在CSS文档中设置背景颜色颜色也没用解决：一行一行的把CSS代码看了一遍，发现不小心在cp样式前面的空白处写了东西，导致挨着多出来的文字的div样式显示不出来。...

2019-07-28 13:22:43 1069

原创轮播图区域定位

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>banner区域定位</title> <style> *{margin:0;padding:0;} body{height:10000px;} .top1{h...

2019-07-27 19:05:56 1142

原创五大浏览器的内核

五大浏览器的内核代表作品1 .Trident: IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器，**代表作品IE，**因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。2.Gecko（壁虎）：代表作品Mozilla Firefox是开源的，它的最大优势是跨平台，能在Micr...

2019-07-27 19:01:20 322

原创元素宽高自适应窗口宽高

元素宽高自适应窗口宽高设置HTML,body{height:100%}元素本身{width:100%;height:100%;}<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ma...

2019-07-27 18:43:53 384

原创 CSS中存在的兼容问题

CSS中存在的兼容问题1.网页中插入图片会出现的问题：向下撑大三像素解决方法：（1）将结束标签例如与img在同一排显示（只有IE6支持）（2）将图片变成块状 display:block（3）利用图片垂直方向对齐方式 vertical-align:top/middle/bottom（4）给图片写浮动 float:left/right;（5）给父元素设置 font-size:0;如果...

2019-07-27 18:14:26 104

原创伪对象选择符

伪对象选择符1.:after{content:“value”;}：元素的后边添加content里边的内容例如：div:after{content:"111";}content中的内容也可以是图片例如：div:after{content:url(logo.jpg);}2.:before{content:"value";}在元素内容的前边添加content里边的内容。语法格式和:after一...

2019-07-27 17:47:20 399

原创 visibility:hidden和display:none的区别

visibility:hidden和display:none的区别都可以实现隐藏visibility:hidden内容会隐藏但是位置会保留display:none内容会被隐藏但是不保留位置<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></ti...

2019-07-27 17:00:19 185

原创 CSS中高度塌陷

CSS中高度塌陷1.高度塌陷产生的原因：子元素浮动，父元素高度自适应。2.解决方法：（1）给父元素添加overflow：hidden；优点：简单易写缺点：如果父元素中有内容溢出会被裁切掉。（2）给浮动的元素后边添加一个空div,设置clear:both;为了防止往空div里添加内容，加上height:0;overflow:hidden;优点：如果父元素中有内容溢出不会被裁切缺点：不...

2019-07-27 16:57:08 122

原创 CSS中宽高度自适应

CSS中宽高度自适应1.宽度自适应宽度自适应可以写一个min-width，如果小于最小的宽度，那么浏览器可以以滚动条的形式去显示，如果大于最小宽度，浏览器默认会占一整行。max-width元素的宽度最大可以达到的值，可以无限缩小，但是不能扩大。2.高度自适应（1）如果不写高度默认是内容撑开。（2）设有高度为auto，也是由内容撑开。（3）设置min-height会随内容的增多而改变。...

2019-07-27 13:54:50 1122

原创 CSS实现鼠标放上图片放大

CSS实现图片放大<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片放大</title> <style> *{margin:0;padding:0;} .photo{width:622px; height:427p...

2019-07-27 13:04:03 1111

原创 CSS中的边框显示圆角

CSS中的边框显示圆角属性：border-radius语法格式：border-radius:左上右上右下左下；四个值border-radius:左上右下右上左下（对角线）两个值border-radius:左上右右下左下；一个值还可以通过x轴y轴设置：border-radius:20px(X轴)/30px(y轴)；border-radius:20px(X轴1) 30px...

2019-07-27 12:27:43 209

原创 CSS中的滑动门

CSS中的滑动门

2019-07-27 08:45:19 157

原创图片整合

图片整合（雪碧图、精灵图）1.图片整合需要先在Photoshop中把图片整合在一张图片上，然后在CSS代码中使用。2.图片整合的好处：（1）减少向服务器的请求次数。（2）减小图片体积，提高页面加载速度。（3）减少网络带宽占有，提高用户体验度。3.图片整合的原理：利用背景图片的可移动性。核心属性是background-position:;4.图像整合的注意事项：（1）只有作为背景图...

2019-07-27 08:31:21 251

原创 CSS中设置透明度

CSS中设置透明度1.使用rgbar:红色值。值可以是正整数或百分数g:绿色值。值可以是正整数或百分数b:蓝色值。值可以是正整数或百分数a:Alpha透明度。取值0-1之间rgba使背景透明，背景上面的字体不会透明。rgba在CSS3中才出现，低版本浏览器不支持，2.opacity值是0-1 例如：opacity：0.5； IE不兼容opacity不仅会使背景透明...

2019-07-27 08:20:25 472

原创 CSS中的定位属性

CSS中的定位属性属性：position值：static：默认值，静态的relative:相对定位，相对于自身原来位置的偏移。不会脱离正常的文档流，不占据空间（不影响其他元素的空间）absolute:绝对定位。会脱离正常的文档流，不占据空间（不影响其他元素的空间）根据离其最近的有定位的父元素进行定位，如果父元素都不存在定位，根据浏览器窗口定位。fixed：固定定位。无论窗口是否出现滚动...

2019-07-25 13:18:03 136

原创元素类型的转换

元素类型的转换属性：display值：加上inherit一共19个block:变成块元素。如果给元素添加float属性，相当于给元素设置blockinline:变成内联元素inline-block:变成行内块例如：img可以设置宽度和高度支持vertical-align;none：隐藏大多数块状元素的display属性是blockli标签的display属性是list-ite...

2019-07-25 12:04:07 1028

原创元素类型

元素类型元素类型：分为内联元素和块状元素。div是块状元素的代表span所示内联元素的代表块状元素和内联元素的区别：（1）块状元素可以设置宽高，内联元素不可以，内联元素的宽高就是其内容。（2）块状元素自上而下独占一行，内联元素自左向右在一排显示，直到遇到边界换行。（3）块状元素和内联元素都遵循盒模型设置，但是内联元素的某些属性不能正常显示。（4）块状元素一般作为其他内联元素的盒子使...

2019-07-25 11:51:09 157

原创显示省略号

显示省略号text-overflow:ellipsis/clip;ellipsis:省略号clip:裁切单行文本溢出显示省略号的必要条件：（1）有一定的宽度：width:value;（2）强制内容在一排显示：white-space:nowrap;（3）溢出裁剪：overflow:hidden;（4）显示省略号：text-overflow:ellipsis;...

2019-07-25 11:37:02 149

原创空白空间属性

容器溢出属性overflow:visible/hidden/scroll/auto/inheritvisible:默认值，溢出内容不会被裁剪，在元素框外显示。hidden:溢出内容被裁剪，超出的内容是不可见的。scroll:溢出内容会被裁剪，但是浏览器会出现滚动条，以便查看其他内容。auto:自适应，有溢出显示滚动条，没溢出不显示。inherit:继承父元素的overflow属性。...

2019-07-25 11:30:40 171

原创容器溢出属性

容器溢出属性overflow:visible/hidden/scroll/auto/inheritvisible:默认值，内容不会被裁剪，会呈现在元素框之外hidden:内容会被裁剪，溢出的内容不可见scroll:内容会被裁剪，但是浏览器会显示滚动条，以便显示其他内容auto:自适应，超出滚动条显示，不超出不显示。inherit：继承父元素...

2019-07-25 11:14:52 291