HTML5+CSS3
文章平均质量分 92
HTML5+CSS3
小白张幺幺
这个作者很懒,什么都没留下…
展开
-
HTML5中的拖拽以及使用原生js实现拖拽效果
HTML5中的拖拽以及使用原生js实现拖拽效果1. HTML5中的拖拽1.1 相关知识拖拽元素:可以为元素添加draggable="true"来让元素能够被拖拽。拖拽元素的事件监听:(应用于拖拽元素)ondragstart:当拖拽开始时调用ondragleave:当鼠标离开拖拽元素时调用ondragend:当拖拽结束时调用ondrag:整个拖拽过程都会调用目标元素:把元素A拖拽到元素B里,那么元素B就是目标元素。页面中任何一个元素都可以成为目标元素。目标元素的事件监听:(应用于目标元原创 2020-11-17 19:55:18 · 714 阅读 · 0 评论 -
移动端适配之rem详解
移动端适配之rem详解rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位。1rem等于根元素的font-size,即只需要设置根元素的font-size,其它元素使用rem单位时,设置成相应的百分比即可。为什么需要rem?(与传统的单位的区别)px:是相对于显示器屏幕分辨率而言的相对长度单位。在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。em:是继承父级的(相对于父元素)。假原创 2020-11-10 19:17:23 · 3085 阅读 · 0 评论 -
媒体查询(-@media)的用法详解
媒体查询(-@media)的用法详解媒体查询可以用来干什么?@media的作用:媒体查询可以在指定的设备上使用对应的样式替代原有的样式。可以简单理解为:告诉浏览器,当满足某条件时,调用某样式。当满足条件A时,调用A样式; 当满足条件B时,调用B样式。检测1.viewport(视窗) 的宽度与高度2.设备的宽度与高度3.朝向 (智能手机横屏,竖屏) 。4.分辨率等等语法和操作符语法一:内联@media@media 查询条件表达式{ CSS样式 }例:@media not|only m原创 2020-11-03 20:03:30 · 18005 阅读 · 1 评论 -
CSS3之动画和过渡
CSS3之动画和过渡一、动画(animation)在CSS3中什么是动画?在CSS3中使元素从一种样式逐渐变化为另一种样式的效果被称作为动画。创建动画剧本(@keyframes)1.@keyframes 规则是创建动画。2.@keyframes 规则内指定一个 CSS 样式逐步从目前的样式更改为新的样式。语法@keyframes move{ /* 背景颜色由红色变为黄色 */ from {background: red;} to {background: yellow;}原创 2020-10-20 20:51:21 · 300 阅读 · 0 评论 -
CSS3弹性盒子常用使用方法详解
CSS3中的弹性盒子布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现;2009年,W3C提出了一种新的方案—Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。弹性盒子是 CSS3 的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。组成内容原创 2020-10-20 20:23:30 · 1725 阅读 · 0 评论 -
百度地图API的一些调用
百度地图API的一些调用调用百度地图的API可以非常方便的实现我们需要的地图的功能,今天研究了一下调用百度地图API,显示定位信息、地图标注、路径导航等问题处理起来真的很方便。功能很强大,调用也很方便, 可以实现的功能非常多,有一点要注意:调用API要有一个开发者密钥,申请过程十分简单。1.申请ak:调用百度地图API,首先你需要得在官网注册一个帐号然后申请一个密钥,注册网址:http://lbsyun.baidu.com/,在打开网页的最下方可以申请密钥2.如果只是想在浏览器及本地测试,创建应用类型原创 2020-10-10 19:50:17 · 678 阅读 · 0 评论 -
HTML5中的canvas(画布)
HTML5中的canvas画布()1、关于canvas的简介1.canvas是HTML5标签,表示画布,canvas只是作为图像绘制的容器,所有的绘制工作都在脚本JavaScript内部完成。2.canvas的作用:①绘制基础图形;②绘制文字;③图形变形和图片合成;④处理图片和视频;⑤动画实现;⑥制作小游戏等等。3.支持canvas的浏览器:Firefox, safari, chrome, opera, IE9等。2、创建和获取① 查看当前浏览器是否支持canvas:可以在canvas标签内书原创 2020-09-27 20:42:44 · 1387 阅读 · 0 评论 -
如何解决浮动带来的影响
如何解决浮动带来的影响?浮动:选择器名{float:}浮动可以用来干什么?设置了浮动的框可以向左(left)或向右(right)移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动并不存在于文档流之中。浮动会带来什么影响?当我们给子元素设置了浮动float:left或float:right或两者,但是没有给父元素设置高度时,就会出现父元素高度塌陷问题。因为浮动元素脱离了文档流,所以包围图片和文本的父元素盒子不占据空间。所以父元素盒子就不会被所浮动的内容展开,从而出现了高度塌陷。而因原创 2020-07-12 23:44:29 · 352 阅读 · 0 评论 -
CSS高级选择器的基础使用方法
CSS高级选择器一.伪类选择器定义:对于之前的类选择器的补充类再定义一个别名。例:<div class='a a-1'>123</div>其中a为类,a-1为伪类,伪类也是一种类,它们之间用空格隔开我们选择该标签的时候可以.a.a-1,也有.a,也可以.a-1伪类选择器都是用“:”连接的。常用的伪类选择器:1.nth-child(N):先确定位置,再筛选选择器在同一结构下都是相同选择器时使用。2.nth-of-type(N):先确定选择器,在匹配位置在同一结原创 2020-07-12 23:02:47 · 213 阅读 · 0 评论 -
css属性值的计算过程详解
什么是属性值的计算过程?属性值是什么:对HTML超文本标记语言有过了解的应该都知道,在构建网页的的过程中,所用到的每个标签中的元素都会以人们想要看到的样子出现在网页中,而通常把调整一个元素的样式的行为称作渲染。在渲染的过程中,每个元素应该是以什么样子出现的,或是想要去调整这个元素的样式,就要去给它添加属性,而属性中填写的内容,就被称为属性值。所以说一个元素要想显示在页面中,它的属性就必须有属性值。属性的计算:首先我们来看属性值的计算方法有哪些:一共有四种,它们分别是:1. 确定声明值2. 层叠原创 2020-07-06 00:05:23 · 605 阅读 · 0 评论 -
HTML的常用标签介绍
HTML的基本标签HTML标签的简介HTML标签中文全称通常为超文本标记语言标记标签,它是HTML语言中最基本的单位,是HTML最重要的组成部分。它一般都是成对出现的,也有以单标签的形式出现的。其中双标签也可被称为闭合元素,它有一个开始标签和一个结束标签。开始标签是由<>包围的元素名组成的,结束标签是由</>包围的元素名组成的。比如段落标签:<p></p>而单标签也可被称为单元素,它没有结束标签,比如换行标签:<br>它只有一个开原创 2020-06-28 22:16:26 · 203 阅读 · 0 评论 -
什么是HTML和CSS
什么是HTML和CSS?HTML的定义:首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,比如说段落标签:<p>这是一段话</p>通过这个标签可以表示文本的一个段落。而且其中还有还有图片标签、视频标签、声音标签、表格标签等等标签,通过将这些标签组织并且关联起来后,从而将分散的网络资源整合在一起,来展现在人们的面前。它是来设定网页原创 2020-06-28 20:49:45 · 2851 阅读 · 0 评论