HTML页面部件🦄
关注
分享
扫一扫
文章平均质量分 67
分享HTML小配件~
我是X大魔王
优秀的判断力来自经验，但经验来自于错误的判断。
记录学习过程，进步每一天。
展开
-
(期末复习)html元素上下左右置中对齐的三种方法
冲左右置中方法设置元素对齐方式，首先先看看它的display属性：display:inline/inline-block将父容器设定为text-align:center，就可左右置中display:block将元素本身的margin-left和margin-right都设定为auto，就可以左右置中上下置中就没那么容易啦，下面介绍3种方法上下居中1、设置元素的position为absolute然后设置其top和left都为50%，这个时候就是将元素左上角的位置居中在页面中间，如果想原创 2022-01-04 22:20:08 · 10476 阅读 · 0 评论 -
HTML之我才是定位王者：全面击破position属性(+文档流+absolute重叠、fixed问题)
于之前的我而言，对position属性就是那种我知道有这个属性，但是具体怎么用，我不知道，就随便用呗，但是，但是，这种思想是非常不对的❗❗❗❗❗为痛改前非，狠心学习，终得这篇博文的问世，欢迎关注、交流????????????????????录子position属性概述position之static案例是否会重叠？position之absolute文档流重叠问题position之relativeposition之fixedposition属性概述该属性用于指定一个元素在文档中的定位方式，这个属性有s原创 2022-01-04 16:04:29 · 1710 阅读 · 1 评论 -
(超强理解)用jQuery实现轮播图实现方法+解析原理
最近这段时间，我本人对原生前端的代码、css、js进行了非常认真、详细的理解和训练，我收获了特别多，最近陆续频繁地出博客，现在继续上一篇博客轮番图问题，现在用jQuery实现，其实非常地简单，希望大家看完也已有所收获，现在先来看看效果图jQuery的下载的话，大家直接去官网下载就行了，没什么特别的要求，需要用到的jQuery方法和代码如下：????jQuery的siblings()方法：siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。????jQuery的trig原创 2021-12-20 23:32:37 · 3295 阅读 · 0 评论 -
(全面：附代码演示)css属性选择器：后代选择器、子选择器、相邻兄弟选择器、通用选择器
大家好，这里是X，今天带来CSS选择器中4个比较容易弄混的选择器概念，下面是解释和代码示例????说句实话，有时候玩CSS选择器真的很容易混乱，所以特意写下此文，与大家共勉????????????文章目录方法后代选择器效果图子选择器效果图相邻兄弟选择器效果图通用选择器效果图方法在学习这几个选择器的路上，大家光是听名字也可以听出来，这里存在着父类、子类、兄弟的概念，所以在理解上一定要有“先后顺序”的概念，就比如下面的这段代码是我后面即将测试的用例基础码，分析一下它的层次顺序：<!DOCTYP原创 2021-11-19 22:15:43 · 1387 阅读 · 0 评论 -
HTML为什么我的单选框按钮两个都可以选择？怎么解决？input的radio属性使用规则
大家好这里是X，今天有朋友来问了我一个还蛮有意思的东西，就是他在设置单选框的时候，发现他的单选框竟然可以选择多个结果????????????本来不想解释的，但是还是决定出一篇博客，顺便也提醒一下自己,那我就举个例子：现在这个框的单选框和多选框都是正常的，其实为什么会出现单选框能多选的原因就是：分组问题就举“性别”单选框为例：你必须在代码里要体现男性、女性它们是“一组”的： <input type="radio" name="sex" value="male" checked="check原创 2021-11-19 16:00:05 · 4460 阅读 · 0 评论 -
白天、暗夜双重模式+自作潜水俱乐部前端小项目+学习经验总结(一)
嗨，这里是X，今天带来最近写的一个前端小项目，还挺不错的，所以就在这里分享一下????????原创 2021-11-18 22:52:09 · 317 阅读 · 1 评论 -
HTML作业之粉粉滴个人博客来袭—篇章二
来啦来啦，继续继续，如果还没有看过篇章一的，传送门在这里：快乐星球文章目录主要内容部分(左)效果主要内容部分(右)主要内容部分(左)关于这部分呢我主要是分了左边和右边两个内容：我们先来看左边可以知道是分为3个部分，同样的道理，先建层html部分 <!-- content begin --> <div id="content"> <div id="left"> <div class="zb"> 1&l.原创 2021-10-29 20:57:07 · 315 阅读 · 0 评论 -
HTML作业之粉粉滴个人博客来袭—篇章一
好久不见喽，今天带来一个我的Web作业，虽然说这个作业不是特别的难，但是里面涉及到的知识点真的还蛮多的，而且对于代码的整齐度阿，代码整体的流畅度我个人感觉真的得到了一定的提升，所以多大代码、多想、多做就没错啦，这篇博客比较长，但扯到很多的知识点，喜欢的话收藏一波啦文章目录效果图划分区域打框架????背景+头部效果图导航栏效果图效果图这个效果是动态的，只是这里我就只是截个图，所以看不到????????划分区域在完成这个作业、这个任务之前，我习惯性会将这个页面上的东西进行划分，分为“块”，然后再原创 2021-10-29 20:18:00 · 464 阅读 · 0 评论 -
（快来）解决：如何让多张图片居中、如何让浮动元素居中、盒子整体平移(内元素一起)问题
今天在上Web，老师让我们直接就做一个网页，然后在这个过程中遇到了一个小问题：那就是如何让多张图片一起居中，让浮动图片居中问题，或者是很多图片居中排列等问题的解决方法吧问题来源老师想让我们把这几张图片弄好顺序、排列好，我知道大家肯定会想到浮动，浮动的话确实能够将图片都紧凑的排列在一起，添加了浮动的效果如下：代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">.原创 2021-10-28 12:36:05 · 981 阅读 · 0 评论 -
遨游魔仙堡奇葩口音之—鼠标滑过图片实现各种3D旋转动画
大家好，这里是X????，今天来分享一个3D旋转动画效果，用到的题材为巴啦啦魔仙，对你有帮助的话别忘了点赞、关注和收藏噢????有任何问题欢迎评论区见????在这里呢，非常建议大家去学习一些前端的框架，当然了也是有了比较结实的前端基础之后，可以去接触一些框架????????????这里呢X也是推荐可以先学一下Bootstrap????????好啦，题外话啦效果图????X方向旋转????Y方向旋转????这里只是给大致的样式、大家可以在上面添加很多自己的样式，以下为代码部分????原创 2021-08-28 23:06:01 · 209 阅读 · 0 评论 -
HTML部件之—搜索框深水炸弹第二弹
大家好这里是大魔王????????????，最近比较喜欢做所搜框，所以今天又来分享一个搜索框????，以后的分享会做的更加详细一些，如果对你有帮助，别忘了收藏噢????????????效果图原创 2021-08-23 17:20:17 · 613 阅读 · 5 评论 -
HTML部件之—如何实现搜索框(样式+功能实现)
大家好，这里是最可爱的大魔王????????????，今天是搜索框分享，搜素框可以说是非常非常重要的一个点啦，关于搜素框到底怎么设计、功能怎么实现的？发光搜素框怎么实现等问题做一个解释，信息量很大，别忘了收藏噢????????????搜素框展示????????????????????????????????(超级简约)这款搜索框是来自：亚索老师的浏览器制作????????搜索框的制作多种多样，各不相同，可以按照自己的想法任意发挥，那么就以我上面发的第一个图为例子，教一下这个搜索框是如何实原创 2021-08-19 18:37:36 · 28631 阅读 · 14 评论 -
点击时会跳动的按钮做法详解
欢迎来到HTML部件频道☔☔☔今天分享一下那种带有"跳动"效果的按钮的做法，那么先来看一下效果吧????????????原创 2021-08-10 20:22:17 · 868 阅读 · 0 评论 -
jQuery+风琴拉伸效果唯美少女滴风格菜单的做法
欢迎来到HTML部件频道????今天记录一款非常常见的菜单做法，具体效果看下图：????好啦如果说对今天的分享感兴趣的话就继续往下看吧????<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--兼容性设置--><m原创 2021-07-25 21:55:56 · 157 阅读 · 1 评论 -
CSS之帅气朋克字体效果以及“故障风”按钮的实现（图片+按钮）
欢迎来到HTML部件频道????前言????CSS伪元素前言????今天来实现一个帅气的朋克效果，这个效果是我很早之前就想出的一篇博客，今天补上，先来看一下效果吧????这次的效果主要是通过“clip-path:inset”实现的，可以看到当点击的时候有一种“切割”的感觉，所以在这里分片肯定是不能少的，利用button的伪元素去控制元素的各个部分就Ok,再加上动画去切换分片的位置，来实现晃动的效果????CSS伪元素如果有朋友还对CSS伪元素不了解，可以看一下该简单说明和应用，还是非常的详细的：C原创 2021-07-24 23:26:38 · 839 阅读 · 1 评论 -
CSS之可爱的伪元素::maker详解
欢迎来到HTML部件频道????这里是x魔王，今天分享一个非常有用的部件以及它的用处，先来看看它的效果吧点击是会变图案滴，那么这个的做法就得益于CSS 伪元素 ::marker就像这个大家一定熟悉：<ul> <li>Contagious</li> <li>Stages</li> <li>Pages</li> <li>Courageous</li> <li>Sh原创 2021-07-19 17:32:51 · 2869 阅读 · 0 评论 -
可爱滴css滑动导航条
欢迎来到HTML频道????效果代码分析今天看到了一个还蛮可爱的滑动导航条，在这里分享一下做法，也同时感谢一下原作者，写的特别好????效果这里没有录动态的了，大家脑补一下哈，脑补滑动效果????代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge原创 2021-07-16 10:24:18 · 423 阅读 · 0 评论