码迷,mamicode.com
首页 >  
搜索关键字:前端入门    ( 189个结果
web前端入门到实战:CSS不定宽高的垂直水平居中,9 种方式总汇
垂直居中,在CSS中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊9种不同的居中方法。有常见的flex、transform、absolute等等。也有CSS3的网格布局。还有伪元素的方法,是的,你没有看错,::after和::before也可以实现居中。1、flex大家的第一反应,可能就是flex了。因为它的写法够简单直观,兼容性也没什么问题。是手机端居中方式的首选。<
分类:Web程序   时间:2020-01-16 01:00:21    阅读次数:110
web前端入门到实战:css中颜色
颜色如果我们相给页面设置颜色可以采用多种方法进行设置:一、命名颜色假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了,就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。命名颜色的关键字有限,css定义了17个标准色:浅绿色,黑色,蓝色,紫红色,灰色,橙色,绿色,石灰,栗色,海军,橄榄,紫,红,银,蓝绿色,白色和黄色。有的时候也许使用其他颜色值,并不在标准颜色之内的颜色也可以使用,它
分类:Web程序   时间:2020-01-06 23:19:59    阅读次数:180
web前端入门到实战:JavaScript 事件冒泡与事件委托
事件冒泡IE的事件流叫做事件冒泡。顾名思义当事件发生后,事件就开始从里向外传播,查看下方代码:<htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><divid="myDiv"></div>
分类:编程语言   时间:2020-01-06 23:12:20    阅读次数:97
web前端入门到实战:CSS中的cursor属性
css中的cursor这个属性是用来设置光标形状的。这个属性定义了鼠标指针放在一个元素边界范围内时所用的光标的形状。默认值:auto继承性:yes出现版本:css2JavaScript语法:object.style.cursor=‘pointer‘可以设置的值:|值|描述||url需使用的自定义光标的URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由URL定义的可用光标。浏览器支持情
分类:Web程序   时间:2020-01-06 22:57:43    阅读次数:171
web前端入门到实战:HTML自带懒加载技术
对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行:1、加载初始的HTML响应内容2、加载懒加载库3、加载图片假如浏览器能直接支持懒加载,那是最好的,这一想法也不是不可能哦!从Chrome75开始,我们可以通过切换两个开关来手动启用懒加载功能,可能最新的Chrome将会默认开启懒加载功能了,就是说不用我们手动去设置了。(注意这里仅说到了是C
分类:Web程序   时间:2020-01-06 22:36:01    阅读次数:212
web前端入门到实战:CSS背景background
1、背景颜色background-color取值:合法的颜色值和transparent注:背景颜色和背景图片,填充都是从边框开始2、背景图片background-image:url(图片路径)3、背景图平铺background-repeat:取值:repeat:平铺no-repeat:不平铺repeat-x:水平方向平铺repeat-y:垂直方向平铺4、背景图定位background-posion
分类:Web程序   时间:2020-01-04 20:23:26    阅读次数:76
web前端入门到实战:css中display属性
display属性共有4个值:blcok:块级元素inline-block:行内块级元素inline:行内元素none:隐藏元素,不占据空间1.块级元素常见的块级元素有div,p,ul,ol,li,h1~h6等块级元素会默认占满父元素的宽度且独占一行<div><p>尽可能的占满父元素的宽度</p></div>2.行内元素常见的行内元素有span,im
分类:Web程序   时间:2020-01-03 00:44:04    阅读次数:115
web前端入门到实战:CSS新属性实现特殊的图片显示效果
1概述1.1前言使用一个或多个图像相关的CSS属性(background-blend-mode,mix-blend-mode,orfilter)可以实现许多特殊的图片显示效果,共列举了20种图片显示效果。2效果列表2.1铅笔画效果效果示例SCSS代码专门建立的学习Q-q-u-n:784-783-012,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,
分类:Web程序   时间:2020-01-03 00:34:32    阅读次数:110
web前端入门到实战:css绝对定位和相对定位、固定定位
1、绝对定位position:absolute;绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值,则相对于整个网页。<!DOCTYPEhtml><htmllang="en"><head><
分类:Web程序   时间:2020-01-03 00:29:05    阅读次数:124
web前端入门到实战:纯CSS实现加载转圈样式
不同的项目中对于等待加载时转圈圈的样式是不同的,有的是传统的转圈的gif图片,见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和,不符合美观,所以需要用CSS做一个。下面是一个纯CSS实现转圈样式的例子。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><
分类:Web程序   时间:2020-01-03 00:28:05    阅读次数:105
189条   上一页 1 ... 4 5 6 7 8 ... 19 下一页
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!