html学习
南舍QAQ
这个作者很懒,什么都没留下…
展开
-
Responsive Layouts(响应式布局)
1.媒体查询的应用:在html的style的标签中使用<style> @media(min-width: 500px)(max-width: 600px){ } </style>用link标签引用css文件来做<link rel="stylesheet" media="screen and (min-width:600px)" href="">2.rem,em,vh,vm的应用与区别对于原创 2021-01-15 16:00:20 · 191 阅读 · 0 评论 -
Grid box(网格式布局)
1.基础设置: display: grid; /* grid可以嵌套使用 */ grid-auto-rows: minmax(100px,auto);/* minmax(最小高度 最大高度) 可以设置为auto*/ /* grid-auto-rows: 300px;行高 */ grid-template-columns: 1fr 1fr;/*设置列宽*/ /* grid-template-colum原创 2021-01-13 23:13:54 · 1337 阅读 · 0 评论 -
Flex box(弹性布局)
1.基本概念:定义:display:flex;相关属性:2.基础属性: flex-direction: column;/* 纵向排列 */ /* row 横向排列 (默认值) 左对齐 */ /* row-reverse 横向反向排列 右对齐 */ flex-wrap: wrap;/* 自动换行 */ flex: (数字)/*分配空间属性*/flex-basis: 200px;/* 和width类似可以用来设置宽度 */3.排列和对齐:原创 2021-01-13 15:49:41 · 108 阅读 · 0 评论 -
折叠式侧边栏dem
Html代码boby部分:<nav class="navbar"> <span class="open-side"> <a href="#" onclick="openSideMenu()"> <!-- 绘制面包片 --> <svg width="30" height="30"> <path d=原创 2020-12-15 17:38:53 · 159 阅读 · 0 评论 -
表格和表单
表格:1.常见用法:<table> <tr> <td></td> </tr> </table>table用来设置表格tr表示行td表示单元格2.其他写法(长表格):<table> <thead> <tr> <td> </td> </tr> </thead> <tb原创 2020-12-13 14:16:10 · 148 阅读 · 0 评论 -
阿龙的下拉菜单demo
下拉菜单:样式:鼠标移入出现下滑菜单效果:html的boby部分: <nav id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li>Services<i cl原创 2020-12-11 21:59:06 · 234 阅读 · 0 评论 -
滑动手风琴demo编写注意事项及存在的问题
注意事项:1.text-align: center;用于设置文本居中2.list-style: none;去除无序列表的点3.设置水平列表时,用inline-block来代替inline4.transition设置过渡5.min-width 设置最小宽度存在的问题:原创 2020-12-08 16:30:11 · 209 阅读 · 2 评论 -
布局以及float
1.盒子模型Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Content(内容) - 盒子的内容,显示文本和图像。应用:margin 0 auto可以实现水平居中效果注意该元素要未脱离文档流溢出:若子元素的大小超过父元素的大小则会溢出在进行竖直布局中可以在父元素中设置overflow来解决溢出效果overflow的特殊值:(1)(2)flo原创 2020-12-05 20:51:12 · 74 阅读 · 0 评论 -
高度塌陷问题的解决办法
原创 2020-11-27 14:21:22 · 63 阅读 · 0 评论 -
CSS选择器权重
原创 2020-12-05 20:53:27 · 83 阅读 · 0 评论 -
CSS选择器总结
1.id选择器: 用id=**来定义#id{}来使用2.类选择器:用class=""来定义,用.类元素{}来使用3.交集选择器:例如:div.cc{ color=“red”}的意思是在拥有div和cc的标签变成red4.*选择器:将所有的标签改变原创 2020-11-18 20:55:45 · 206 阅读 · 0 评论 -
关于html中图片,音频和视频的引用
html中关于图片,音频和视频的音乐1.对于音频来说一般采用<audio>标签引用,也可以采用<embad src="" type="audio/mp3">2.也可以采用<audio controls="controls"><source src="">您的浏览器版本太低无法播放该音频</source></audio>,其主要目的是在IE8及以下的浏览器在观看视频时由于浏览器不支持而出现提示您的浏览器版本太低无法播放该音频3.对于原创 2020-11-17 23:40:06 · 599 阅读 · 1 评论 -
第一次写前端的一些经历和感想
第一次写前端的一些经历和感想。1.通过教程熟悉一些html的标记语言。2.第一次网页写的比较简陋。3.也发现了一个问题:就是在HTML中audio无法支持flac(无损音质的播放)。4.对于css,虽然讲了但没有好好去尝试。所以,在这次对前端的书写中没有用到它5.对于makedowm来说了解了一些语法,但还要继续学习。6.在学习audio过程中,因为网易云下载的都是ncm格式而audio无法支持它,且一般的播放器也无法支持。所以,我通过上网查询找到如何将ncm文件转化为一般音频文件的简单办法。通原创 2020-11-13 00:09:56 · 190 阅读 · 0 评论 -
HTML的<a>注意事项
关于<a>标签的一些注意事项1.在对于herf的使用中可以超链接到其他网站,但记得要加http://2.要注意相对路径的正确3.<a href="" target="_blank"></a>的作用是点击超链接后出现新的页面4.<a href="" target="_self"></a>的作用是点击后不会出现新的页面5.<a href="#"> </a>是回到顶部6.在使用<a>标签的时候可以用<原创 2020-11-17 17:24:16 · 181 阅读 · 0 评论