码迷,mamicode.com
首页 >  
搜索关键字:web前端入门    ( 111个结果
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
web前端入门到实战:css实现的骨架屏方案
优点简单,不需要工程,不用puppeteer生成骨架dom,也不需要二次开发维护定制程度高,想怎么搞就怎么搞不臃肿,只给你想要的缺点自动化程度低,需要在骨架dom上手动添加类协同要求高,不像工程化能通过工程去约束思路通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换实现css部分(scss写法)通过after伪元素生成骨架样式,并通过absolute覆盖到实际元素上专门建立的学习Q-q-
分类:Web程序   时间:2020-01-03 00:21:33    阅读次数:282
web前端入门到实战:制作一个百度首页
一、我们制作一个百度首页作为练习,可直接复制该代码保存后缀名为.html来查看<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>d93_baidu_home_exercise</title><style>.header{height:250
分类:Web程序   时间:2019-12-29 09:26:28    阅读次数:116
web前端入门到实战:HTML标签的权重
一、什么是优先级的权重1.作用:当多个选择器混合在一起的时候,我们可以通过计算权重来判断谁的优先级最高。2.权重的计算规则公共代码:<body><divid="identity1"class="box1"><ul><li><pid="identity2"class="box2">试炼语句</p></li></
分类:Web程序   时间:2019-12-29 09:24:21    阅读次数:103
web前端入门到实战:HTML-div和span标签
一、div标签1.作用:一般用于配合CSS完成网页的基本布局2.例子:<style>.head{width:980px;height:100px;background:red;margin:auto;}.content{width:980px;height:300px;background:green;margin:auto;}.footer{width:980px;height:10
分类:Web程序   时间:2019-12-29 09:18:21    阅读次数:132
web前端入门到实战:内边距属性、外边距属性
一、内边距属性1.定义:边框和内容之间的距离就是内边距2.分开写padding-top:数字px;padding-left:数字px;padding-bottom:数字px;padding-right:数字px;3.连写:padding:上右下左;4.注意点:(1)给标签设置内边距之后,标签占有的宽度和高度会发生变化(2)内边距也会有背景颜色web前端开发学习Q-q-u-n:⑦⑧④-⑦⑧③-零①②
分类:Web程序   时间:2019-12-21 23:06:11    阅读次数:321
web前端入门到实战:外边距合并现象、盒子模型以及宽度和高度
一、在默认布局的垂直方向上,默认情况下外边距是是不会叠加的,会出现合并现象,谁的外边距较大,就听谁的;但是在水平方向就不会出现这种状况,我们举个例子span{display:inline-block;width:100px;height:100px;border:1pxsolidred;}div{width:100px;height:100px;border:1pxsolidgreen;}/*我们
分类:Web程序   时间:2019-12-21 23:05:10    阅读次数:187
web前端入门到实战:背景关联和缩写以及插图图片和背景图片的区别
一、背景属性缩写的格式1.backgound:背景颜色背景图片平铺方式关联方式定位方式2.注意点:这里的所有值都可以省略,但是至少需要一个3.什么是背景关联方式默认情况下,背景图片会随着滚动条的滚动而滚动,如果不想这样,那么我们可以修改它们的关联方式4.格式:background-attachment:值;值的取值范围:scroll:默认值,会随着滚动条而滚动。fixed:不会随着滚动条滚动而滚动
分类:Web程序   时间:2019-12-21 22:49:41    阅读次数:122
web前端入门到实战:css3动画 Transition
CSStransitions提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用CSStransitions后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。CSStransitions可以决定哪些属性发生动画效果(明确地列出这些属性),何时开
分类:Web程序   时间:2019-12-21 22:48:47    阅读次数:118
111条   上一页 1 ... 3 4 5 6 7 ... 12 下一页
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!