![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
h5
文章平均质量分 71
GOGOGOAAAA
我很菜
展开
-
H5学习之2 video标签的使用
html>lang="en"> charset="UTF-8"> style="text-align:center"> 一个div 包含了3个按钮,一个视频标签。使用style属性设置其为居中--> 按钮--> onclick="playPause()">播放/暂停 onclick="makeBig()">大 onclick="make原创 2016-07-23 09:53:39 · 4733 阅读 · 0 评论 -
H5学习之22 CSS-导航栏的创建
html>lang="en"> charset="UTF-8"> ul { list-style-type: none; /* 标记项类型*/ margin: 0px; padding: 0; } .chuizhi a:link, .chui原创 2016-08-05 16:20:34 · 5295 阅读 · 0 评论 -
H5学习之23 CSS 水平对齐(定位,调整位置)
html>lang="en"> charset="UTF-8"> type="text/css"> body{ margin:0; padding:0; } #margin { width: 200px; color: d原创 2016-08-05 16:47:57 · 1142 阅读 · 0 评论 -
H5学习之25 CSS 给图片增加框 透明度的设置
html>lang="en"> charset="UTF-8"> div.img{ float:left; padding:5px; margin:5px; border: 1px solid; border-color: dimg原创 2016-08-05 19:11:41 · 4187 阅读 · 0 评论 -
H5学习之16 CSS
html>lang="en"> charset="UTF-8"> href="css.css" rel="stylesheet" type="text/css"/> 文件的引入-->直接规定标签样式 body直接规定系统标签里的样式,一个所有选择通用的准则:物理位置上的外侧的设置样式之后,如果内侧还有单独设置样式,则以内部为准。内部覆盖外部存在原创 2016-08-01 22:33:10 · 391 阅读 · 0 评论 -
H5学习之17 CSS-text设置
html>lang="en"> charset="UTF-8"> href="css.css" rel="stylesheet" type="text/css">id="suojinwenben1">aa id="suojinwenben2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa a原创 2016-08-02 20:29:35 · 690 阅读 · 0 评论 -
H5学习之18 css-background
html>lang="en"> charset="UTF-8"> href="css.css" type="text/css" rel="stylesheet" />id="beijingyanse">背景颜色redid="beijingyanse2">背景颜色继承父元素class="wenbenyanse">文本颜色区域非文本颜色区域非文本颜色区域原创 2016-08-02 20:40:51 · 2365 阅读 · 0 评论 -
H5杂记之 绝对定位 position:absolute;
position:absolute;绝对定位,是相对于 最近的一次定位(绝对定位,相对定位,和 固定定位都可以,只要是定位都可以,float不行,margin不行)的祖先(父辈及以上)元素(与父辈同级的元素无效)。 不是相对于 浏览器,也不是相对于 父元素。如果找不到符合条件的,则是相对于 body元素进行定位。并且设置之后,其本身的文档流会删除,等于消失了一样。fixed是相对于浏览原创 2016-08-21 16:29:32 · 2596 阅读 · 0 评论 -
纯CSS 实现 3级导航栏
html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>style> /* X>Y 选择器是寻找 父元素为X的Y。必须是父元素,而不能比父元素等级高。不能是爷元素。所以就是与X元素挨着最近的那一层的Y元素 X Y 选择器是寻找 X内 所有的Y。不管多少层,只要有就选择上。原创 2016-09-14 09:20:46 · 791 阅读 · 0 评论 -
不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
html>html>head> meta charset="utf-8"/> style> .p-wrap-2 { position: relative; top: 30px; width: 500px; height: 300px; ba原创 2016-09-14 09:25:07 · 5702 阅读 · 0 评论 -
JavaScript基础知识
JavaScript基础赋值用等于号 =一些系统的方法,函数用括号 ()定义变量var x=1;var y=‘xxx’;var z; 无值变量,其实是undefinedvar p=null; 其值为空。h=‘asd’;g=1;如果一个变量在函数内部声明,那么他是局部变量。在函数外部声明,是全局变量。如果一个变量没声明就赋值,那么会原创 2016-09-18 14:59:13 · 919 阅读 · 0 评论 -
@media 判断设备大小加载不同的css
@media screen and (min-width:1200px) and (max-width:1960px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}}bootstrap更高的像素值的屏幕会 使用低像素值的样式。而如果给高像素值的屏幕设原创 2016-10-09 15:50:38 · 1138 阅读 · 0 评论 -
web前端知识杂记(1浮动占据居中空间)(2清楚内部的浮动效果) (3考虑布局) (4letter-spacing导致textalign不居中用text-indent解决)
1左侧内容居中字体这种情况下,即使外部div使用了 文本对其的居中方式。左侧内容也使用了float。但是在计算居中时,仍然会减去浮动区域的宽度。在剩下的区域内进行一个居中。2html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>原创 2016-09-08 09:32:43 · 1676 阅读 · 0 评论 -
1.width是核心内部元素,margin,padding,border值不属于width 2.absolute 两个绝对定位的元素如果是同一父元素会发生重叠,而不是与float一样会正常排布
1 一个元素的width值,不包括 padding,border,margin值。只是最核心的内容的宽度。内部再有元素,内部元素的 margin border padding都算在外部元素的 width值里。属于外部元素的核心内容宽高。2使用 absolute 定位,是根据 所有父元素中 第一个 非默认position属性 的那个元素 来相对定位。就是相对于那个元素定位原创 2016-09-22 09:14:35 · 1955 阅读 · 0 评论 -
如何让文字或者其他元素 移动到div的底部,与底部贴近。
两种思路1.如果是文字或者其他块级元素。使用定位的思想。position:absolute,然后boottom:0。父元素注意要设置一下position:relative。因为绝对定位是相对于最近一个非static定位的元素的相对位置。 但是如果出现多个元素在同一父元素内 同时需要绝对定位移动位置,那么需要注意,如果直接这样做,会造成那些元素重叠,而不是与float一样的正常排布,这是因为他们原创 2016-09-22 09:34:11 · 13590 阅读 · 0 评论 -
H5学习之15 video audio 标签,以及视频 音频能够最大可能正常的方式
html>lang="en"> charset="UTF-8"> 一般情况下,网页加载音频有这样几种方法width="200px" height="100px" src="horse.mp3">标签加载音频-->width="200px" height="100px" data="horse.mp3">加载音频-->controls="controls原创 2016-07-31 19:25:28 · 2804 阅读 · 0 评论 -
H5学习之14 关于字符输出到网页上
html>lang="en"> charset="UTF-8"> <!-- 在 HTML 中,某些字符是预留的。 在 HTML 中不能使用小于号()和大于号(>),这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样:原创 2016-07-31 19:20:29 · 431 阅读 · 0 评论 -
H5学习之13 head标签 (meta标签等)
html>lang="en"> <!-- 元素是所有头部元素的容器。 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。 以下标签都可以添加到 head 部分: 、、、、 以及 。 --> charset="UTF-8"> http-equiv="Refresh" content="5;url=http:原创 2016-07-31 19:07:35 · 669 阅读 · 0 评论 -
H5学习之1 audio标签的使用
html>lang="en"> charset="UTF-8"> src="song.mp3" controls="controls" > 类型的标签,src是来源,controls是必须出现的。其实也就是controls是一个控制条。 也就是音频的标志。--> 是音频标签,在加载音频时使用。 src='song.mp3' 是定义音原创 2016-07-23 00:32:27 · 515 阅读 · 0 评论 -
H5学习之3 拖拽元素 放置元素
html>lang="en"> charset="UTF-8"> type="text/css"> #div1 { width: 488px; height: 100px; padding: 10px; border: 5px black solid;原创 2016-07-23 10:21:11 · 622 阅读 · 0 评论 -
H5学习之4 拖拽元素 放置元素2
html> type="text/css"> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 100px; padding: 10px; bord原创 2016-07-23 12:39:59 · 453 阅读 · 0 评论 -
H5学习之5 canvas的运用
html>id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" >创建画布canvas,并且设置其id,宽度,高度,样式 具体画东西的过程放在script标签里-->type="text/javascript"> var c=document.getElementByI原创 2016-07-24 22:41:45 · 310 阅读 · 0 评论 -
H5学习之6 获取鼠标坐标值并且显示其值
html>lang="en"> charset="UTF-8"> type="text/css"> body { font-size: 70%; /*设置字的大小*/ font-family: verdana, helvetica, arial, sans-serif; /*原创 2016-07-24 22:55:13 · 1846 阅读 · 0 评论 -
H5学习之8 canvas的运用3 填充线性渐变颜色
html>lang="en"> charset="UTF-8"> id="myCanvas" width="200" height="100" style="border:1px solid black;"> 创建canvas画板,设置ID等属性 var c=document.getElementById("myCanvas");/*获取创建的ID原创 2016-07-25 20:41:07 · 1171 阅读 · 0 评论 -
H5学习之9 canvas的运用4 图片的绘制
html>lang="en"> charset="UTF-8"> id="myCanvas" width="300" height="200" style="border:1px solid black">属性赋值时一般都是 xx="yyy" 而属性里具有别的属性还要赋值时, 格式是 xx:y (可能有特殊情况,因为我学习的还不是很多)-->type="text原创 2016-07-25 20:42:10 · 1035 阅读 · 0 评论 -
H5学习之7 canvas的运用2 画圆
html>lang="en"> charset="UTF-8"> style="margin: 0">id="myCanvas" width="300" height="150" style=" border:1px solid black ;" > 里创建一个cavas画板,直接设定他的长度宽度,样式里的边框。-->type="text/javascr原创 2016-07-25 20:27:26 · 724 阅读 · 0 评论 -
H5学习之10 div布局
type="text/css"> div#container { width: 100px; /* 整个大的div的长度*/ } div#header { /*不设定长度的,又不设置浮动的,自动填满最外层容器长度。 这个header的长度就是100,原创 2016-07-29 18:41:24 · 3724 阅读 · 0 评论 -
H5学习之19 css-list
html>lang="en"> charset="UTF-8"> href="css.css" rel="stylesheet" type="text/css">一个正常的无序列表 阳光 空气 你 一个正常的有序列表 阳光 空气 我可以通过更改列表的一些属性值,来改变列表元素前是否有数字,圆原创 2016-08-03 21:35:24 · 1180 阅读 · 0 评论 -
H5学习之20 CSS-table
html>lang="en"> charset="UTF-8"> href="css.css" rel="stylesheet" type="text/css" /> id="table1"> 表格标题 标题1 标题2 标题3 1 2 3原创 2016-08-03 21:44:24 · 433 阅读 · 0 评论 -
H5学习之21 css-padding-margin-outline
html>lang="en"> charset="UTF-8"> p{ padding:1%; /* padding是内边距值,也就是元素本身离边框border的距离. 上右下左 四个方向(设置成4个值的时候的顺序) paddin原创 2016-08-03 21:54:40 · 921 阅读 · 0 评论 -
H5学习之11 body的background.div的background font的设置
html>lang="en"> charset="UTF-8"> aaabgcolor="#7358ff" text="black" >标签的 bgcolor属性设置背景颜色,text属性字体颜色,重点:body标签的背景图片可以由 background属性设置。 background="xxx.jpg"但是body标签设置 背景颜色,字体颜色,背景图片 不原创 2016-07-31 18:44:08 · 3297 阅读 · 0 评论 -
H5学习之12 iframe标签---内联框架
html>lang="en"> charset="UTF-8"> bgcolor="#ffe4c4" text="red">src="https://www.baidu.com/?tn=95505140_hao_pg" width="800" height="600" frameborder="0">在界面里显示其他网页 src规定位置,也可以是本地的一个htm原创 2016-07-31 18:56:15 · 1634 阅读 · 0 评论 -
web端的 触屏操作介绍
原文地址:http://www.cnblogs.com/bugong/p/3942988.html1、Touch事件简介在移动终端上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。当按下手指时,触发ontouchstart。当移动手指时,触发ontouch转载 2016-10-19 09:16:23 · 1104 阅读 · 0 评论