H5学习
关注
分享
扫一扫
文章平均质量分 77
sunset0827
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
使用git把网页放到服务器上让别人看得见
只能挂静态网页,动态网页还是需要买服务器的这里只是把代码挂到了码云上,用的码云的gitee page 功能,github也有相同功能,但GitHub服务器在国外,上GitHub很慢所以选择码云,更多更能自行百度吧先展示效果(无聊时随便写的一个首页,就别吐槽了),访问这个可以看到 https://sunset0827.gitee.io/h5-first/正文教程开始:下载git,懒癌患者百度云传送...原创 2018-07-16 09:02:16 · 5028 阅读 · 4 评论 -
BootStrap框架引用
虽然个人不是很喜欢用BootStrap框架,但还是要会用的!使用bootstrap先去官网下载:bootstrap下载官网这里下载第一个就行了然后下载jQuery.js,因为bootstrap用到了jquery,jQuery下载官网,一般我们学习用普通版,min版是去了空格缩进,开发一般用min版,因为比较小,点进去发现直接是源码,不用复制,这时候按CTRL+S保存即可.解压之后只需三步:1.导入...原创 2018-07-13 22:16:16 · 824 阅读 · 0 评论 -
媒体查询,响应式页面
对于移动端页面，有两种实现方案： 1,网站PC端页面和移动端页面完全分开做，根据用户的访问设备类型，给用户返回不同的页面（目前国内大多数网站采用的都是此方案）。 2，响应式页面布局，页面本身能够根据浏览器窗口的宽度进行不同的布局，在宽屏幕上显示一种布局，在移动端窄屏幕上显示另一种布局。分开做就是做两个完全不相同的页面,所以记一下媒体查询媒体查询,响应式布局像bootstrap这种框架...原创 2018-07-13 21:59:55 · 820 阅读 · 0 评论 -
viewport视口
viewport视口每次在写代码时,都会用vscode生成html代码时,都会有一句<meta name="viewport" content="width=device-width, initial-scale=1.0">这段是viewport视口设置,如果没有的话手机浏览网页就会自动缩放文本,设置之后你写的网页就会原原本本的显示出来比较官方一点的说明是:默认情况下，移动端浏览器打开...原创 2018-07-13 21:43:51 · 486 阅读 · 0 评论 -
表单元素
H5表单元素本章不讲form表单，讲的是一些常用的基本表单元素比如 input，输入框，是行内块元素 <input type="text" placeholder="请输入账号"> button，按钮，也是行内块元素 <button>按钮</button>label,标签，用于关联一个其他表单元素，for属性需要写要关联的元素的id，点击lable就相当...原创 2018-07-12 08:49:22 · 349 阅读 · 0 评论 -
CSS关键帧动画
关键帧动画：关键帧动画是H5中特别常用的，重点！代码复制到vscode查看<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2018-07-11 22:20:47 · 3305 阅读 · 0 评论 -
元素阴影和文本阴影
元素阴影和文本阴影：这章没什么好说的，看代码比较简单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc原创 2018-07-11 22:17:23 · 340 阅读 · 0 评论 -
CSS过渡动画
CSS过渡：强调重点：要过渡的样式必须有初始值；并非所有样式都能过渡，一般和元素外观有关的样式都能过渡，例如：color,width,height,left,right,border,transform等。和元素布局，定位有关的样式，一般不能过渡 。<!DOCTYPE html><html lang="en"><head> <meta char...原创 2018-07-11 22:15:50 · 724 阅读 · 0 评论 -
设置文本不自动换行
在一些时候我们不想使文本换行，使超出的文本以…显示这个时候就需要：设置文本不自动换行white-space:nowrap;overflow:hidden;多余的文本使用...显示text-overflow:ellipsis;...原创 2018-07-11 11:13:27 · 3439 阅读 · 0 评论 -
3D变换
3D变换相对于2D变换也就是在编写transform属性值时多了X，Y，Z轴而已po个例子，简单易懂<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=原创 2018-07-10 21:50:36 · 327 阅读 · 0 评论 -
元素的2D变换
虽然2D3D变形用的不是很多，但今天既然学到了还是要记一下，笔记流博客，不喜勿喷transform:变形样式rotate表示旋转变形，正值顺时针，单位为degtransform-origin，设置变形原点，默认为50% 50%translate:平移变形，两个参数分别是横向偏移量和纵向偏移量scale:缩放变形，两个参数分别是横向方大倍数和纵向放大倍数多种变形效果可以共同使用但需要注意的是有先后顺...原创 2018-07-10 21:47:55 · 278 阅读 · 0 评论 -
弹性布局-2
弹性布局实现定宽居中建议将代码复制到vscode然后保存在浏览器打开对比代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt原创 2018-07-10 21:37:06 · 388 阅读 · 0 评论 -
弹性布局-1
弹性布局内容很多，以vscode代码显示比较鲜明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2018-07-10 21:34:39 · 293 阅读 · 0 评论 -
VSCode的emmet输入法
emmet输入法可以快速输入批量的html和css用法为：标签名+tab ps：+enter也行但不推荐标签名.xxx 输入一个class包含xxx的标签，如果标签名省略，则默认为div如：在vscode中输入：p.c1.c2效果：<p class="c1 c2"></p>标签名#xxx 输入一个id为xxx的标签如：div#box.c3效果： <di...原创 2018-07-10 21:32:05 · 678 阅读 · 0 评论 -
元素的隐藏
在一些特定的情况下需要把元素隐藏，而隐藏元素分为在文档流中保留位置和不保留位置.hide{ /* display:none，设置元素为隐藏，而且文档流中没有元素的位置 */ /* display: none; */ /* visibility: hidden;隐藏元素，但文档流中位置还在 */ /* ...原创 2018-07-10 21:13:15 · 289 阅读 · 0 评论 -
CSS选择器及选择器优先级
CSS选择器： css选择器有四种，标签名选择器，id选择器，class选择器，属性选择器，其中属性选择器权重最低且不常用 两个选择器A和B使用,连写时,表示选择满足A或满足B的元素#p2,#p3{ color: blue;} 两个选择器A和B使用空格连接时，表示选择满足A选择器的元素内部的满足B选择器的元素#list a{ text-decoration: n...原创 2018-07-10 20:54:42 · 519 阅读 · 0 评论 -
表单元素属性和事件
关掉input烦人的自动提示给input添加autocomplete="off"即可<input type="text" id="username" autocomplete="off">设置元素不可交互(input,select等表单元素)添加disable属性 <button id="regist-btn" disabled&quo原创 2018-07-27 11:52:57 · 1281 阅读 · 0 评论