前端学习—html+css

前端学习笔记 | CSS动画+移动web

一、平面转换为元素添加动态效果，一般与过渡配合使用。1、设置transition给元素本身，表示过渡变换方式和时间2、在元素hover设置transform（动态效果）transform:【移动】translate(x方向，y方向)、translateX（x、translateY(y)位移【旋转】rotate(数字+deg）【缩放】scele(数字)大于1放大，小于1缩小【倾斜】skew（数字+d
简·AI·2024-02-03 15:04

前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）

注：本文的css样式均使用less写法1、字体居中（1）先text-align:center;行内元素水平居中（2）再line-heigh:(盒子高度);行内元素垂直居中text-align:center;line-height:(30/@vw);2、盒子居中情景1：版心居中margin:0auto;情景2：标题栏制作时让左右两个弹性盒子居中的方法（1）设置浮动（2）给父级添加行高line-hei
简·AI·2024-02-03 15:04

前端学习笔记 | CSS高级技巧

一、定位注：需要同时设置定位模式和边偏移才生效。1、定位模式相对定位-position:relative特点：（1）灵活改变盒子在网页中的位置，改变位置的参照物是自己原来的位置（2）不脱标，占位（3）标签显示模式特点不变绝对定位-position:abusolute(子级绝对定位，父级相对定位-子绝父相)特点：（1）脱标，不占位（2）参照物先找祖先元素，如果祖先没有定位，则参照浏览器可视区域位置（
简·AI·2024-02-03 15:03

前端学习笔记 | 响应式网页+Boostrap

一、响应式网页一套代码适应多端1、媒体查询@media(条件){css}max-width小于等于max-width生效min-width【案例】左侧隐藏因为CSS的层叠性，书写顺序：max-width从大到小；min-width从小到大。【媒体查询完整写法】在html中link用于不同视口的css样式，media=""中一定要加（），否则不生效。2、BootstrapBootstrap是由Twi
简·AI·2024-02-03 15:31

HTML+CSS基础面试题总结

1.display:none;和visibility:hidden;的区别display:none;彻底消失，释放空间。可能引发页面的reflow回流（重排）。visibility:hidden;就是隐藏，但是位置没释放，好比opacity:0;不引发页面回流。2.CSS选择器权重如何计算就近原则：直接选中的，一定比继承的权重大。一样近，比权重：id是100，class是10，标签是1，总数权重一
让笑容常在·2024-02-03 10:21

前端小案例——滚动文本区域（HTML+CSS, 附源码）

一、前言实现功能:这个案例实现了一个具有滚动功能的文本区域，用于显示长文本内容，并且可以通过滚动条来查看完整的文本内容。实现逻辑：内容布局：在中，使用容器创建了一个类名为listen_text的区域，作为页面的主要内容容器。其中包含两个段落用于展示标题和作者信息，以及一个listen_text_box的用于封装实际的滚动文本区域listen_text_con。滚动文本区域：listen_text_
H4999·2024-02-03 06:45

大一学生Web课程设计 美食主题网页制作(HTML+CSS+JavaScript)-咖啡 6页

源码获取文末联系Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|精彩专栏推荐美食网页介绍|甜品蛋糕|地方美食小吃文化|餐饮文化|等网站的设计与制作|美食主题网站
二挡起步·2024-02-03 01:23

【前端学习路线】

前端学习路线1.大纲:前端学习路线2.ES6语法1.let和const2.箭头函数3.解构3.1数组解构3.2对象解构4剩余参数4.1和解构联用4.2合并数组5.可选链6.Set7.数组操作8.字符串扩展方法
代码哲学·2024-02-03 00:52

前端学习总结

前端常见面试问题最近发现了一个up主“Alice铛铛铛”，学习到了很多面试技巧，下面分享一下一、1.vueAPP适配是怎么写的，用的什么单位？2.get和post有什么区别？3.计算属性和监听器有什么区别？4.v-for渲染列表是key是用来做什么的？5.数据请求在生命周期哪一个阶段？6.水平居中有哪几种方法？7.flex弹性盒模型？8.父盒子中子盒子浮动有什么后果？9.清除浮动有哪些方法？10.
joy_mhy·2024-02-02 21:31

菜鸡后端的前端学习记录-2

前言记录一下看视频学习前端的的一些笔记，以前对Html、Js、CSS有一定的基础（都认得，没用过），现在不想从头再来了，学学Vue框架，不定时更新，指不定什么时候就鸽了。。。。忘了记一下看的视频了，有兴趣的可以去看一看，目前感觉讲的还不错，但是需要有一定基础：【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】（学习记录第二部分，都写到一个博客里太长了，不利于阅读复习）周末休息-先
无名一小卒·2024-02-02 21:30

HTML+CSS：导航栏组件

效果演示实现了一个导航栏的动画效果，当用户点击导航栏中的某个选项时，对应的选项卡会向左平移，同时一个小圆圈会出现在选项卡的中心，表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。CodeHomeEmailMessageLikeProfile*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sa
若冰说·2024-02-02 18:22

html+css,动画实现“地球绕太阳旋转“

1.效果html+css实现地球绕太阳旋转2.代码htmlcss.main{width:100%;height:100%;display:flex;justify-content:center;align-items
Summer_Uncle·2024-02-02 02:23

2020年小白要知道的Web前端学习路线

今天小编要跟大家分享的文章是关于2020年小白要知道的Web前端学习路线。准备在2020年学习Web前端技术的小伙伴们来和小编一起看看本篇文章，希望能够对大家有所帮助！
web前端学习指南·2024-02-01 23:27

自学前端学习笔记html5(简称H5)

image.pngimage.pngimage.pngH5在语义上的改进在此基础上，HTML5增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。我们常见的css+div布局是：image.png在html5中，我们可以这样写：image.pngH5的经典网页布局：H5中新增的语义标签表示区块表示文章。如文章、评论、帖
Informal杨·2024-01-31 03:14

使用html+css实现-静态开源案例-品优购

使用html+css实现-静态开源案例-品优购设计目标css制作图标规范seo优化网页标题titledescription网站说明显示在搜索引擎后方的解释Keywords关键词字体图标引入方法注意搭建整个页面时的路径问题
SHoadgnaw·2024-01-30 13:24

前端自己整理的学习面试笔记

简介以下是本人一年多整理的前端学习笔记，现汇总分享给大家，很多问题都是面试必问的更多学习资源，可以点击我获取更多1js数据类型原始类型：nullundefinednumberstringbooleanSymbolBigInt
小江的博客·2024-01-30 12:30

HTML+CSS：全景轮播

效果演示实现了一个简单的网页布局，其中包含了五个不同的盒子，每个盒子都有一个不同的背景图片，并且它们之间有一些间距。当鼠标悬停在某个盒子上时，它的背景图片会变暗，并且文字会变成白色。这些盒子和按钮都被放在一个容器中，整个页面看起来像一个画廊。Code下载壁纸Next>*{margin:0;padding:0;box-sizing:border-box;}.container{width:100vw
若冰说·2024-01-30 10:47

HTML+CSS：3D卡片组件

效果演示实现了一个名为“卡片”的效果，当鼠标悬停在一个特定的元素上时，该元素会变得更亮，并且会在其他元素上方显示一个卡片。当鼠标悬停在卡片上时，卡片会变得更亮，并且会在其他元素上方显示一个提示信息。这个效果可以用来展示一些信息或者链接，让用户更好地了解和交互。CodeHOVEROVER:Dlookmom,noJSmousehovertracker/*设置容器的样式*/.container{posi
若冰说·2024-01-30 10:17

css3帮助文档,CSS3 最新版参考手册

《CSS3最新版参考手册》为官方CSS3在线参考学习手册，本css3在线开发手册包含了各种css3属性、语法、定义、使用方法，实例运行等，是网页前端学习者及开发者不可或缺的在线查询手册文档！
坐会儿吧·2024-01-30 09:43

使用react修改ant design默认样式|自定义

写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！
潜心专研的小张同学·2024-01-30 06:52

前端学习day12-总结

关键词：scope在线添加数据到表单一.th>scope语法：col:规定单元格是列的表头。row:规定单元格是行的表头。colgroup:规定单元格是列组的表头.rowgroup:规定单元格是行组的表头二.提高用户体验原本的表单属性中，比如单选按钮:男女若想要点击男女，必须要鼠标点到那个小圆点，用户体验极差。此时，可以利用包裹男女，这样用户在点击“男”这片区域时，也可以选中单选按钮。三.plac
你喜欢吃青椒吗_c744·2024-01-29 18:14

Nodejs前端学习Day5

苦其心志，劳其筋骨文章目录前言一、处理路径问题二、path路径模块总结前言继续fs一、处理路径问题在使用fs模块操作文件时，如果提供的操作路径是以./或…/开头的相对路径时，很容易出现路径动态拼接错误的问题原因：代码在运行的时候，会执行node命令时所处的目录，动态拼接出被操作文件的完整路径如果要解决这个问题，可以直接提供一个完整的文件存放路径就行，但也有缺点，即移植性差，不利于维护见下图node
Mundaneman·2024-01-29 14:00

分享150套简洁漂亮的html个人简历源码 /个人主页源码 /个人简介网页版(无加密打包)

它是html+css网页设计源码，html5网页静态模板。我分别给文件上命名了，一目了然，大家拿来就可以直接套用的，有代码能力的也可以修改一些版块。
hmz856·2024-01-29 13:10

HTML+CSS：炫酷按钮组件

效果演示实现了一个带有发光效果的按钮。按钮在悬停或激活时会产生发光效果，并且按钮上的文字也会随之移动。Code若冰说CSS:root{--glow-hue:222deg;--shadow-hue:180deg;--spring-easing:linear(0,0.002,0.010.9%,0.0381.8%,0.156,0.3125.8%,0.78911.1%,1.01514.2%,1.096,1
若冰说·2024-01-29 05:15

HTML+CSS：王者翻转框

效果演示实现了一个3D翻转卡片的效果，当鼠标悬停在卡片上时，卡片会从正面朝向翻转，从而实现3D效果。其中，卡片的正面和背面分别由一个div元素表示，通过CSS的transform属性实现3D效果。当鼠标悬停在卡片上时，通过CSS的hover属性实现翻转效果。Code快来和妲己一起玩耍吧~妲己法师刺客辅助妲己，原型是商纣王宠妃妲己。职业法师，拥有先手控制敌人，技能范围广、射程够长，而且在后期超高爆发
若冰说·2024-01-29 05:15

企业公司门户网站团队页面设计（三维旋转轮播图片，html+css静态实现，响应式布局，带源码）

效果代码team.htmlteam_engnavbar.html深圳市淮亚之光科技创新有限公司首页合作案例服务团队联系我们中文/English首页合作案例服务团队联系我们中文/Englishnavbar.css*{margin:0;padding:0;box-sizing:border-box;font-family:'OpenSans',sans-serif;}li{list-style:non
鸡鸭扣·2024-01-28 22:30

大一网页设计期末大作业，HTML+CSS静态网站

️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
web网站建设·2024-01-28 20:20

展望2018

跑步，坚持下去并达到1000公里;读书，至少45本；前端学习，学习TypeScript，并在项目中应用到React。
大洪·2024-01-28 18:50

Nodejs前端学习Day3_准备工作

妈的，这几天真tm冷，前天上午还下了一整天的雪，大雪文章目录前言一、Node.js简介1.1何为1.2有什么二、Node.js可以做什么三、学习路线四、下载nodejs4.1小坑记录4.2LTS和Current版本的不同五、什么是终端六、在nodejs中执行js代码七、powershell和cmd的区别八、fs文件系统模块8.1是什么，怎么用8.2fs.readFile()总结前言妈的，昨天没学，
Mundaneman·2024-01-28 17:53

Swiper轮播插件的使用与二次封装

并且Swiper不依赖于任何框架，意味着单纯的html+css也可以去引用，jquery或是Vue等等，都可以去使用。2、Vue中使用Swiper建议不要直接依据官方文档的npm安装，np
听书先生·2024-01-28 15:51

九宫格——用html+css制作一个网页

自用（仅供参考，如有错误欢迎指出）要求：1.通过html和css制作一个可以根据页面缩放进行变化的九宫格。2.并且可以通过手机浏览器访问。过程：1.网页制作先不管通过网页访问这一项，先写一个本地的网页。首先要把九宫格的形状做出来。九宫格就像魔方的一个面，所以我先做一个大的div，然后把它分成三个行，然后每个行再分成三个小块。于是我在body中先写了这样一个结构:假设每个小正方形的边长为50px，颜
sqm，·2024-01-28 12:30

html+css布局初入门：动画效果和实现

动画首先，放一个动画来激起小伙伴们的求知欲和好奇心吧效果图：代码实现：Documentdiv{width:100px;height:100px;background-color:red;/*动画名字*/animation-name:leftToRight;/*动画持续时长*/animation-duration:3s;/*执行速率*/animation-timing-function:linear
The..Fuir·2024-01-28 05:53

Nodejs前端学习Day4_fs文件系统模块基础应用之成绩转换

君子应有龙蛇之变，处于木雁之间文章目录前言一、fs文件系统模块1.1判断文件是否读取成功1.2向指定的文件中写入内容1.2.1fs.writeFile的语法格式1.2.2fs.readFile和fs.writeFile的运用——成绩转换总结前言Day3fs开了点头一、fs文件系统模块1.1判断文件是否读取成功可以判断err对象是否为null，从而知晓文件读取的结果即constfs=require(
Mundaneman·2024-01-28 05:00

前端学习：HTTP协议、请求响应、分层解耦

HTTP协议HTTP-概述  HTTP：HyperTextTransferProtocol(超文本传输协议)，规定了浏览器与服务器之间数据传输的规则。如果想知道http协议的数据传输格式有哪些，可以打开浏览器，点击F12打开开发者工具，点击Network来查看。  浏览器和服务器是按照HTTP协议进行数据通信的。HTTP协议又分为：请求协议和响应协议请求协议：浏览器将数据以请求格式发送到服务器包括
~hello world~·2024-01-27 22:41

easypan前端学习（一）

文章目录前端项目node版本node镜像构建项目创建项目安装项目所有依赖图片资源网站encodeURI&decodeURIapp.config.globalProperties与getCurrentInstanceObject.assignvue-cookies安装vue-cookies使用vue-cookiesrouter.currentRoutepreservelogimport.meta.e
ps酷教程·2024-01-27 13:08

HTML5+CSS3小实例：3D卡片hover翻转效果

实例：3D卡片hover翻转效果技术栈：HTML+CSS效果：源码：【html】3D卡片hover翻转效果蒙奇·D·路飞蒙奇·D·路飞，日本漫画《航海王》及其衍生作品中的男主角。
艾恩小灰灰·2024-01-27 08:25

Nodejs前端学习Day1_补档

我给day1搞没了，还是觉得该补一个，有用文章目录前言一、学习目标二、学习目录三、为什么JavaScript代码可以在浏览器中运行四、为什么JavaScript可以操作DOM和BOM五、浏览器中的JavaScript运行环境总结前言补档一、学习目标二、学习目录三、为什么JavaScript代码可以在浏览器中运行浏览器中存在js解析引擎，才可以执行js代码不同浏览器使用不同的js解析引擎其中Chro
Mundaneman·2024-01-27 06:45

【融职培训】Web前端学习 第7章 Vue基础教程2 创建Vue项目

一、使用vue/cli创建Vue项目在第七章我们已经介绍了如何使用npm命令全局安装node包，本节我们需要安装一个名为@vue/cli的包来创建我们的vue项目，安装代码如下所示：npminstall-g@vue/cli安装完成之后，在命令行可以使用Vue命令命令创建一个vue项目，具体命令如下所示vuecreatehello安装过程需要连接国外服务器下载项目模板和依赖包，如果网速过慢可以在配套
lmonkey_01·2024-01-26 16:59

前端学习-0125

工具VscodeChromemac-vscode实用快捷键格式：shift+option+f快速移动一行：option+上下箭快速复制一行：shift+option+上下箭快速保存：command+s文件内查找：command+f文件内快速替换：option+command+fHTML5标签堆积:基础骨架标签特殊文件格式后缀:.html编写规则、声明:
至鳟宝·2024-01-26 14:29

前端学习-0125

标签含义：标题级别：-快捷键生成：h$*[0,6]属性：align="left|center|right"标签含义：段落标签含义：换行标签含义：线属性：color(颜色)|width(宽度：像素单位)|size(高度：像素单位)｜align(对齐方式left|right)标签路径绝对路径：E://test/test.jpg相对路径：父级：..\;同级：.\;子级：/文本标签标签描述着重加粗斜体st
至鳟宝·2024-01-26 14:25

前端学习之——react篇（条件渲染）

React没有特殊的语法来编写条件语句，因此你使用的就是普通的JavaScript代码。例如使用if语句根据条件引入JSX：letcontent;if(isLoggedIn){content=;}else{content=;}return({content});如果你喜欢更为紧凑的代码，可以使用条件?运算符。与if不同的是，它工作于JSX内部：{isLoggedIn?():()}当你不需要else
每月一瓶米诺地尔·2024-01-26 12:18

html+css的文字渐变动画特效

话不多说，我就直接放效果图和代码吧图片发自App图片发自App图片发自App图片发自Appcolor:transparent;让文字为透明色，就是让后面背景色显示出来-webkit-background-clip属性规定背景的绘制区域本次特效仅支持webkit内核的浏览器，其他内核浏览器不支持
梦醒时分心会凉_·2024-01-26 10:56

前端学习之——react篇（渲染列表）

你将依赖JavaScript的特性，例如for循环和array的map()函数来渲染组件列表。假设你有一个产品数组：constproducts=[{title:'Cabbage',id:1},{title:'Garlic',id:2},{title:'Apple',id:3},];在你的组件中，使用map()函数将这个数组转换为标签构成的列表:constlistItems=products.map
每月一瓶米诺地尔·2024-01-26 09:31

「HTML+CSS」--自定义加载动画【036】

效果展示在这里插入图片描述Demo代码HTMLDocumentCSShtml,body{margin:0;height:100%;}body{display:flex;justify-content:center;align-items:center;background:#263238;}section{width:650px;height:300px;padding:10px;position
海轰Pro·2024-01-26 08:38

前端学习笔记一一HTML常用标签之列表标签

HTML常用标签之列表标签列表标签的用途，就是用于编排短语句的文字。1.无序列表在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。设置无序列表的类型—type无序列表的默认符号是圆点（●）。�元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：�disc(圆●)、circle（圆圈○）、square（方块■）定
前前前端小飞·2024-01-26 08:17

JS制作轮播图——自学笔记

鼠标经过轮播图，左右按钮显示，鼠标离开按钮隐藏2.鼠标点击右侧按钮，图片轮播3.小圆圈跟着图片变化4.点击小圆圈播放图片5.鼠标离开，图片自动轮播，鼠标在图片上时自动轮播停止目录html结构css结构js结构html
描绘已经在学了·2024-01-25 21:24

强烈推荐 GitHub 上值得前端学习的开源实战项目

强烈推荐GitHub上值得前端学习的开源实战项目。
dizhao3079·2024-01-25 18:27

HTML+CSS：展开动画

效果演示实现了一个网页上的图标悬浮效果，当鼠标悬浮在图标上时，会出现一个带有文字的悬浮框，文字内容为“打开微信”、“打开抖音”、“打开WeGame”或“打开STEAM”，字体大小和颜色会随着鼠标移动而变化。当鼠标悬浮在图标上时，悬浮框的背景颜色会变成灰色。Code*{margin:0;padding:0;box-sizing:border-box;}body{height:100vh;displa
若冰说·2024-01-25 15:59

HTML+CSS：炫酷登录切换

效果演示实现了一个登录注册页面的切换效果，当用户点击登录或注册按钮时，会出现一个叠加层，其中包含一个表单，用户可以在表单中输入用户名和密码，然后点击提交按钮进行登录或注册。当用户点击返回按钮时，会将叠加层隐藏，并将登录或注册表单显示在主体区域。这个效果可以提高用户体验，让用户更加方便地登录或注册。Code注册账号点击注册欢迎登录忘记密码?登录已有账号，直接登录没有账号，点击注册body{heigh
若冰说·2024-01-25 15:26

菜鸡后端的前端学习记录

前言记录一下看视频学习前端的的一些笔记，以前对Html、Js、CSS有一定的基础（都认得，没用过），现在不想从头再来了，学学Vue框架，不定时更新，指不定什么时候就鸽了。。。。忘了记一下看的视频了，有兴趣的可以去看一看，目前感觉讲的还不错，但是需要有一定基础：【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】开发工具使用记录：VsCode代码提示挺不友好，配置起来还不一定生效（太
无名一小卒·2024-01-25 06:09
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他