- 博客(20)
- 收藏
- 关注
RSS订阅原创 JS基础（二）—JS书写
01-JS基础1.JS书写位置js代码结尾的分号可加可不加；script标签可以出现在除title标签以内的其他任何位置；大部分情况写在body结束之前；内部jsscript标签有一个type属性，是可以忽略的：外部js创建一个外部js文件， 用src属性用路径的方式引入js文件：内部引入内联js2.向页面输出内容往页面中写一个字符串（单双引号...
2020-03-31 21:48:21
183
原创 JS基础（一）—JS介绍
01-JS基础1.Javascript是一门面向对象的，跨平台的脚本语言。什么是面向对象？对象：属性和方法什么是跨平台？跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。什么是脚本语言？HTML文件必须在浏览器里执行。JS文件嵌入到HTML文件里才能执行。凡是不能独立执行需要依赖其他程序的，通常...
2020-03-31 00:24:10
749
原创 响应式布局
响应式布局1.概念响应式布局：用一套代码，去适配不同的设备。既可以运行在PC端，也可以运行在移动端，从而实现响应式布局。就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。（注：比较适合小网站，个人博客，产品介绍页…）2.CSS3 Media Query要实现响应式布局，我们就需要知道CSS3中的Media Query（媒体查询），Med...
2020-03-26 13:07:38
172
原创 CSS3实现倒影效果
css的功能很强大，可以实现很多效果。比如图像的倒影和文字的倒影等，利用的是box-reflect，因为浏览器兼容问题，目前主要采用-webkit-box-reflect来实现（谷歌浏览器）。倒影的属性：box-reflect：给图片加倒影，只需要给div加一张图片：-webkit-box-reflect: below;下倒影-webkit-box-reflect: abov...
2020-03-25 15:49:03
1292
原创 CSS3文本阴影、边框阴影
1.文本阴影 text-shadow首先来看一个特别酷炫的火焰字：代码：运行效果：这个火焰字就是用文本阴影实现的；text-shadow的属性值：text-shadow：x（阴影在x轴偏移，正值向右偏移，负值向左偏移）y（阴影在y轴偏移，正值向上偏移，负值向下偏移）blur（模糊度，值越大越模糊，不可为负值）color（阴影颜色）多阴影（用逗号隔开）火焰字利用的就是多...
2020-03-25 08:34:41
235
原创 grid网格布局之骰子案例
上次用的flex布局做的骰子，这次用grid网格布局来做。点数1—5用3行3列的网格，点数6用3行2列的网格就ok啦html：css：点数1—5的网格结构都是33的（红框中的结构相同），再利用grid-area找到指定的位置即可点数1：点数2：点数3：点数4：点数5：点数6：32的网格运行结果：...
2020-03-24 09:34:23
636
1
原创 flex布局之骰子案例
此案例用flex布局实现，有利于帮助我们掌握flex语法的使用。首先是1—3的点数，结构相同html：css：运行效果：接下来是点数4，因为flex适合做一维的布局，我们就把点数4的结构分为两行来操作html：css：注： 垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定，所以这里我们要给box4下的div 每行50%的高度。运行效果...
2020-03-24 08:39:21
632
原创 flex弹性盒模型
flex弹性盒模型随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。flex弹性布局比较适合做自适应的网页，特别是移动端（要适配不同大小的设备）一、语...
2020-03-23 21:03:17
231
原创 CSS之元素居中方案
CSS常用的居中方案如图的这种情况，我们要让子元素在父容器内上下左右居中，常用的居中方案有：1、定位 + 拉取自身宽度的一半（这种情况子元素需要固定大小）2、定位 + 位移 ： 当子元素大小不固定时，我们要让元素居中可以使用transfom:translate(xx%， xx%); 因为translate的百分比是按照子元素来计算的。此时box2的宽高可不固定，子元素都可以在父容器...
2020-03-21 23:23:02
215
原创 CSS3 pointer-events属性（控制鼠标点击事件）
pointer-events：（鼠标点击事件失效）• 阻止用户的点击动作产生任何效果• 阻止CSS里的 hover 和 active 状态的变化触发事件• 阻止JavaScript点击动作触发的事件• 提交页面，提交按钮点击后，添加这个样式属性（style=“pointer-events”），来防止重复提交。• 一些层的绝对定位，覆盖按钮，穿透可以点击它。pointer-events...
2020-03-21 16:24:12
1058
原创 css3 calc()方法详解
css3 calc()方法1、什么是calc()?学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东西？在实际运用中更好的使用。calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pa...
2020-03-20 23:23:04
445
原创 CSS3 iconfont字体图标的使用（很详细）
CSS3 iconfont(字体图标)首先来看看什么是字体图标，在哪里使用？比如天猫的商品分类栏：还有小米商城的底部栏：所以字体图标的使用的是比较多的，而且是很方便更改它的大小以及颜色的，还可以使用彩色的字体图标。首先分享一个非常多字体图标的网站：https://www.iconfont.cn/（阿里巴巴矢量图标库）在这里，基本上你想使用的图标都可以找到，那么接下来我们就看看是...
2020-03-20 21:47:52
13068
原创 HTML5语义化标签
HTML5语义化标签在学习HTML5语义化标签之前，首先来了解一下HTML5的一些相关知识。一、兼容性支持HTML5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器...
2020-03-18 13:13:56
407
原创 animation动画
animation动画animation动画1、 首先要知道transition和animation的区别：transition:; 过渡 需要事件触发animation 动画 不需要事件触发,使用关键帧就可以执行2、 animation原理：逐帧动画。会把整个运动过程，划分成100份。3、animation属性：▷ animation-name : ; 设置动画的名字 (自定...
2020-03-16 09:42:36
505
原创 transform变形
transform变形一、定义transform属性应用于元素的2D或3D转换，这个属性可以使元素旋转，缩放，移动，倾斜等。二、属性和用法1、translate : 位移transform:translate(100px,100px); 两个值 分别对应 x轴 和 y轴。transform:translateX(100px);只针对x轴transform:translateY...
2020-03-13 23:00:21
846
原创 transition过渡
transition过渡定义和用法transition用于设置四个过渡属性：1、transition-property : 规定设置过渡效果的CSS属性的名称。all ( 默认值 ) , 指定 width , height;2、transition-duration : 规定完成过渡效果需要多少秒或毫秒。需要添加单位：s (秒) ms (毫秒) 1s == 1000ms3...
2020-03-12 17:42:14
841
原创 CSS Sprite
CSS SpriteCSS Sprite叫做CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。好处（1）可以减少图片的质量，网页的图片加载速度快；（2）减少图片的请求的次数，加快网页的打开；（3）解决网页设计师在图片命名上的困扰，提高了网页制作效率。如图所示：左图中9张图片对服务器的请求次数为9次，右图CSS s...
2020-03-12 09:31:08
190
1
原创 grid网格布局实例
grid网格布局实例一起来学习一下grid网格布局的一个小案例eg：百度风云榜上代码：（1）划分区域按照图示首先划分七个区域：结构：样式：1.划分为3列4行（2）加上网格的间距：（3）找到网格指定的区域：先加上红色的背景色看一下运行效果：（4）分别给每块加上颜色此时每块的背景色就完成了：（5）给对应的块加上文字，再加上样式就完成这个简单的网格布局了...
2020-03-07 22:06:20
534
原创 grid网格布局
grid网格布局Grid布局是一个二维的布局方法，它是由纵横相交的两组网格线形成的框架性布局结构。比如百度风云榜就用到网格布局一、首先来看它的属性：（1）作用在容器上的：display : gridgrid-template-columns : 设置列数grid-template-rows : 设置行数fr单位repeat()方法注：网格中提供了一个新的单位：fr ( 比例单...
2020-03-05 00:11:36
413
原创 语义化标签
语义化标签今天一起来学习HTML5中的语义化标签。首先要了解为什么要使用语义化标签？优点为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；比div标签有更加丰富的含义，方便开发与维护；方便搜索引擎能识别页面结构，有利于SEO；方便其他设备解析（如移动设备、盲人阅读器等）；有利于合作，遵守W3C标准。语义化标签1.HTML5新语义化标签 ( 很重要的 )div ...
2020-03-03 23:57:03
286
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人