![](https://img-blog.csdnimg.cn/20201207171233423.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web前端全栈从0基础到精通(祺)h5+c3
把自己所学到的东西以及工作经验,分享给大家一个完整的web前端的教学。(如果有什么不对的地方欢迎大家评论讨论),让每一个想学习前端的人,都能实现梦想!!!《这是html+css篇》还有其他篇章,请按顺序观看哦
Midk
这个作者很懒,什么都没留下…
展开
-
web前端全栈0基础到精通(祺)19
Filter 函数CSS 语法 filter:本身生效**backdrop-filter:下层标签生效**filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();Filter描述none默认值,没有效果。blur(px原创 2020-12-30 14:06:37 · 62 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)18
grid网格布局Grid 网格布局概述网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的原创 2020-12-30 14:05:17 · 61 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)17
响应式响应式布局概念2010 年 5 月 由国外著名网页设计师 Ethan Marcotte 所提出页面的设计与开发应当根据用户行为以及设备环境 ( 系统平台、屏幕尺寸、屏幕定向等 ) 进行相应的响应和调整。技术要点标签设置<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><!-- 如果可能,调用 chome 内核,原创 2020-12-28 12:04:56 · 215 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)16
vw + vhvw 即 Viewport’s width 的简写,是 CSS3 规范中的视口单位,相对于视口的宽度,视口被均分为 100 单位的 vw, 相对于视口的高度,视口被均分为 100 单 位的 vh。750px设计稿 750px=100vw 1px = 0.1333333vw;如果使用rem 预设1rem = 100px 100px就是 13.333333vw 由此vm和rem 就可以进行换算了Media @media (max-width: 768p..原创 2020-12-28 12:03:59 · 71 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)15
移动端项目移动端浏览器及内核分析手机浏览器种类:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器, 搜狗手机浏览器,猎豹浏览器,其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自助 研发的内核,就像国内的手机操作系统都是基于Android修改的。viewportwidth:设置viewport的宽度(即之前所提及到的,浏览器的宽度),这里可以为 一个整数,又或者是字符串〃device-width〃。init原创 2020-12-26 00:25:15 · 79 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)14
弹性盒子和预处理弹性盒子弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间。displayflexinline-flex设置flex布局后,子元素的float、clear和vertical-align属性将失效.box{ display: flex; }.box{ display: inline-flex; }容器属性(设置在父元素上面)flex-direc原创 2020-12-25 10:53:24 · 64 阅读 · 1 评论 -
web前端全栈0基础到精通(祺)13
CSS3过渡、变换与动画CSS3过渡属性通过CSS3可以在不使用Flash动画或JavaScript的情况下,为元素从一种样式变 换为另一种样式时添加效果。而CSS3过渡就是元素从一种样式逐渐改变为另一种的效果。 要实现这一点,必须规定两项内容:规定你希望把效果添加到哪个CSS属性上 规定效果的时长transition-property 规定设置过渡效果的CSS属性的名称。none 没有属性会获得过渡效果。all 所有属性都将获得过渡效果。property 定义应用过渡效果的CSS属原创 2020-12-24 08:45:13 · 91 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)12
CSS3简介CSS3简介CSS3是最新的CSS标准。CSS3新增选择器属性选择器以box开头<style> div[class^="box"] { background:red; }</style><div class="box">box</div><div class="abox">abox</div><div class="boxa">boxa</原创 2020-12-23 14:05:09 · 76 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)11
HTML5基础HTML5中新增的布局标签html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 (更加语义化)header标签<header>这里是头部区</header>footer标签<footer>这里是页脚区</footer>main标签<main>这里是主体区</main>nav标签<nav&原创 2020-12-21 15:33:44 · 71 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)10
多栏布局解决方案圣杯布局 Document center left right ```双飞翼布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2020-12-18 20:55:14 · 84 阅读 · 2 评论 -
web前端全栈0基础到精通(祺)09
兼容IE 浏览器常见兼容问题兼容问题ie中图片边框问题图片放在a标签中img { border:none}ie8以下浏览器中背景复合属性的写法问题.bg { background:url("./images/bg.jpg")no-repeat center}//解决方案:在url和no-repeat 直接加上空格.bg { background:url("./images/bg.jpg") no-repeat center}原创 2020-12-18 09:06:48 · 130 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)08
表单表单标签注册和登录 目的:收集用户信息,能够输入内容input标签text文本输入类型<input type="text" name="username">password密码类型<input type="password" name="password">radio单选按钮<input type="radio" name="sex" value="boy">男<input typ原创 2020-12-18 09:05:35 · 58 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)07
项目切图规范PS常用工具移动工具移动工具主要负责图层、选区、等的移动、复制操作。快捷键:v抓手工具快捷键:h空格 + 鼠标左键拖动,空格键可临时转换为抓手工具。放大镜工具放大镜工具可以放大或缩小图像。放大:点击放大工具,点击图像。Ctrl+ 加号。按住 alt+ 鼠标滚动滚轮。缩小:点击缩小工具,点击图像。Ctrl+ 减号。按住 alt+ 鼠标滚动滚轮。文字工具快捷键:t文字工具是用来输入文本的。吸管工具快捷键:i标尺工具标尺工具可以用来原创 2020-12-16 08:49:49 · 79 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)06
定位定位的应用场景和基本原理定位的原理在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变 自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性,允许定义标签框相对于其正常位置应该出现的位置,或者相对于父标签、 另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置positionstatic 默认 静态定位默认的定位位置原创 2020-12-14 19:13:14 · 67 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)05
浮动浮动什么是浮动?标签的浮动是指设置了浮动属性的标签会脱离标准流的控制,移动到其父标签的指定位置浮动属性floatleftrightnone 默认浮动的作用图文环绕页面布局浮动的问题标签浮动以后,脱离的正常文档流,导致父标签无法被撑开,会影响后续正常布局清浮动的几种方法给浮动标签的父标签固定高度(不够灵活)在浮动标签的最后加一个div(块标签),标签本身不符动,且添加样式 clear:both;(代码冗余)给父标签加overflow属性,over原创 2020-12-14 19:12:05 · 55 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)04
最大宽&高max-width和min-width:用来设置元素的最大宽度和最小宽度max-height和min-height:用来设置元素的最大高度和最小高度圆角属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init原创 2020-12-10 19:04:40 · 75 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)03
盒模型基础选择器通配符选择器* { width: 200px; height: 200px; background-color: yellow;}标签选择器div { width: 200px; height: 200px; background-color: yellow;}class选择器.box { background-color: red;}可以包含多个类选择器,用空格分开原创 2020-12-09 19:34:17 · 76 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)02
CSS基础链接 a标签自带属性: href: 链接的路径 target: _self 在当前页跳转,默认就是 _blank 在新页面跳转设置所有链接默认在新页面打开<base target="_blank">头部设置局部链接<!-- 空链接, 加#站位 --> <a href="#">点击</a&原创 2020-12-08 16:15:15 · 59 阅读 · 0 评论 -
web前端全栈0基础到精通(祺)01
前端的概述web的发展史web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博web3.0人工智能复杂的页面功能即时通讯web的前景pc端的网页移动端的网页ios androidvscode编译器的使用快捷键复制本行到下一行 shift+alt+↓复制本行到上一行 shift+alt+↑查找 ctrl+F替换 ctrl+H同时写多行1.按住鼠标滑轮向原创 2020-12-07 17:21:18 · 84 阅读 · 0 评论