前端学习手记
关注
分享
扫一扫
文章平均质量分 78
前端菜菜阿海
从零开始的前端学习者
展开
-
CSS实现DIV垂直水平居中
CSS实现DIV垂直水平居中在页面设计中，很多地方都需要这的方法方法一： <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; top: 50%; left: 50%; trans原创 2021-07-15 22:55:55 · 1706 阅读 · 0 评论 -
JavaScript和CSS在HTML文档中不同位置的区别
JavaScript在HTML文档中不同位置的区别前言一、浏览器是如何渲染HTML的？总结前言JS在HTML中放在不同位置的地方会有什么问题呢？我将在这篇文章按照自己的理解为大家介绍一下JS的运行机制。一、浏览器是如何渲染HTML的？首先一个HTML文件是长这样的：我们一般在body里面编写HTML元素，在head里面编写CSS样式，但是CSS的样式有三种写法：1.行内式、2.嵌入式（我在文章里面用的比较多，主要是代码方便上传）、3.链接式（标准方法，建议大家多用这种）。CSS嵌入式放在HT原创 2021-07-12 17:06:23 · 521 阅读 · 0 评论 -
HTML中input文本框与label属性的关系
HTML中input文本框与label属性的关系前言一、label属性是什么？二、label属性的使用方法一方法二总结前言这篇文章的目的是为了解释我在JS常用事件里面的问题：为什么input文本框需要label属性。也可以作为HTML页面设计的一个知识点作为学习和理解，仅供参考学习。一、label属性是什么？label 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是原创 2021-07-07 21:27:07 · 10878 阅读 · 0 评论 -
CSS动画学习实现轮播图及3D骰子
CSS动画学习实现轮播图及3D骰子前言一、CSS动画元素认识1.animation属性2.transition属性二、案例1.轮播图2.3D骰子总结前言CSS功能非常强大，可以通过纯CSS实现轮播图功能和3D骰子，在此之前需要先了解CSS是如何实现动画功能的，所以我整理了CSS动画的知识点，帮助大家理解，仅供参考学习。一、CSS动画元素认识1.animation属性代码如下（示例）： <style> div { width: 100原创 2021-07-04 16:58:11 · 470 阅读 · 0 评论 -
CSS浮动+伪类实现导航栏下拉功能
CSS浮动+伪类实现导航栏下拉功能前言一、浮动二、伪类三、导航栏下拉案例总结前言在前端的学习中，浮动和伪类算是使用的较为频繁的属性，我在这篇文章中，将为大家简单介绍一下，并用一个导航栏案例加深学习的印象，仅供参考学习。一、浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 <style> div { /*设置左浮动*/原创 2021-07-03 21:46:05 · 1661 阅读 · 2 评论 -
HTML设计表格
HTML设计表格前言一、HTML中表格元素的认识二、表格案例1.案例代码及效果图2.案例代码分析总结前言前端的学习中HTML中的表格相信大家也了解了，这是一块简单而又易乱的知识点，所以我为大家简单的梳理了一下知识点，仅供参考学习。一、HTML中表格元素的认识二、表格案例1.案例代码及效果图代码如下（示例）：<table border="1"> <caption>我的课表</caption> <thead> <t原创 2021-07-02 17:28:35 · 1743 阅读 · 0 评论 -
HTML使用iframe元素实现页面内容的跳转功能
HTML使用iframe元素实现页面内容的跳转功能前言一、iframe是什么？二、iframe的使用1.主页面内容代码2.内容页面代码总结前言在前端的学习中，不免有一些页面的跳转功能的实现，而身为初学者的我们没有过快的接触JavaScript，无法实现动态的页面跳转，所以我在这里使用了一种HTML的元素实现页面元素跳转功能，仅供参考学习。一、iframe是什么？irame是 HTML5 中的新增加的属性，所以在HTML5之前的版本是不支持的，作用是文档中的文档，或者浮动的框架。iframe元素会原创 2021-07-01 17:41:21 · 4778 阅读 · 0 评论 -
CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一、绝对定位二、相对定位三、绝对定位与相对定位的区别四、绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些方法css的学习中，开篇就是相对定位和绝对定位的使用，大家在学习的过程中不免被其绕晕，所以我按照自己的理解对其进行了整理及分析，仅供参考学习。未进行定位，用以下面俩种定位的区别一、绝对定位可以将绝对定位理解为以浏览器为父节点来定位自己代码如下（示例）： <style>原创 2021-06-30 19:07:04 · 16892 阅读 · 2 评论 -
HTML+CSS实现背景图片铺满页面的方法
HTML+CSS实现背景图片铺满页面的方法针对页面背景图片我整理了几种方法仅供参考一、DIV中添加背景背景图片二、img中设置背景图片三、Body中设置背景图片结语针对页面背景图片我整理了几种方法仅供参考在前端页面设计的时候大家总会遇到要添加背景图片的情况去美化自己的页面，我在之前的前端学习中也逐渐了解到一些方法和问题的解决方式，在下面我为大家的整理好了，仅供参考学习。一、DIV中添加背景背景图片代码如下（示例）：<head> <meta charset="UTF-8原创 2021-06-12 16:50:49 · 36421 阅读 · 3 评论