- 博客(17)
- 收藏
- 关注
RSS订阅原创 jQuery特效Tab切换栏选项卡demo
在建站过程中，有时候需要有效利用页面空间，需要将多个模块的链接、图片、视频等网站资源放在一个div中，实现点击或者滑动实现展示多个模块，多用在侧边栏展示网站最新更新、最热文章，或者是展示顶级频道页面下的多个栏目的内容，其实CSS也可实现这样的效果，但是还是没有jQuery实现起来方便，以下是今天学习jQuery写的一个jQuery实现tab切换栏特效，实现多个模块点击切换的Demo. Html和jQuery代码： <!doctype html><html lang="c...
2021-03-18 19:28:18
351
原创 简单实现jQuery鼠标经过切换图片特效
html部分代码：<!doctype html><html lang="ch-ZN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2021-03-17 10:57:19
848
原创 利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果，其实利用css同样可以实现导航下拉菜单效果，但自从学习了jQuery后，感觉还是jQuery做起来效果更好。jQuery制作导航下拉菜单，需要用到jQuery的筛选方法里的children()方法、.mouseover()、.mouseout()、$(this)、.show()、.hide()方法。以下是Demo的html和jQuery部分代码，jQuery引用的是百度的jQuery库:<!DOCTYPE html><html lang=
2021-03-15 13:31:33
2529
原创 用Python条件判断简单制作一个12星座速配工具
今天是学习Python语言第二天，今天主要学习的是Python的条件判断，感觉和php基本上还是比较类似的。感觉Python的输出函数比较实用，在学习Python条件判断的过程中，突发奇想我可以借助Python语言条件判断写一个12星座的速配工具。原来感觉这样的小工具十分NB，但现在看来，用Python实现起来还是很Easy滴。制作思路：1、首先设定一个变量，让变量进行输出。2、对输出的变量进行python的条件判断，根据用户输入的星座打印出相关星座，最后如果输入的星座有误或者不是12星座，输出提示语
2021-01-20 13:44:29
1102
原创 用PHP中的for循环写的乘法口诀运算表
利用PHP循环制作的乘法口诀运算表。直接上撸的PHP代码：<?php echo '<h1 align="center" >'.'乘法口诀运算表'.'</h1>'; //输出h1标题，让标题文章在页面中居中对齐； echo '<table width="900" height="150" border="1" align="center" >'; //输出一个表格，表格的高度是900px,高度是150px,边框为1px，文字
2020-10-21 14:57:28
1970
原创 纯CSS3制作Tab切换菜单栏实例思路分析及问题查找
今日在防站项目中遇到某一个模块需要制作Tab点击式的切换菜单栏，通过Js或者jQuery比较容易实现，可是实在是不懂Js，所以寻求通过CSS实现，其实用CSS也有几种方式可以实现Tab菜单栏切换效果，在百度里搜索了我认为是最简单的方法，一种纯CSS3制作Tab切换菜单栏，具体实现代码如下：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="
2020-09-20 16:51:40
384
原创 利用伪元素给图片在鼠标悬停时添加背景图片
利用伪元素给图片在鼠标悬停的时候添加背景图片，这种效果在电影网站上使用的比较频繁，主要是鼠标悬停的时候显示出播放的图标，点击图片链接后就会进入视频详情页面，而使用伪元素是为了使我们的html代码更加简洁。要点：1.需要使用绝对定位和相对定位，确定背景图片的位置,父级盒子设置为绝对定位，伪元素背景图片设置为相对定位。2.背景图片的宽高要和父级盒子的宽高一致。3.背景图片在默认情况下不显示，需要用display属性将其设置为none，当鼠标悬停的时候再让其显示出来，鼠标悬停时将其display属性设置为
2020-09-08 21:04:21
1357
原创 Css3制作三角形图标
在建站过程中，有时候需要给部分容器添加装饰效果，这样就会添加小图标，今天和大家分享用Css3制作三角形图标。在Css3之前，我们使用transparent属性来实现背景颜色透明，在CSS3中我们使用opacity属性将背景颜色实现透明。注意要点：1.首先必须要设定容器盒子的宽和高为0px;2.这里是在rgba颜色中使用opacity来控制颜色透明度，在rgba三色后设置透明度，rgba(0,0,0,0.0)最后一个0.0就是设置颜色透明度，就是opacity属性，取值范围从0.0到1，当设置
2020-09-07 11:14:26
487
原创 layui框架轮播图实现轮播图片自适应视口缩放
一点JS也不懂，利用layui现成的框架轮播组件，简单的实现了layui框架轮播图自适应视口而缩放效果。以下是代码：<section> <div class="layui-carousel" id="test1"> <div carousel-item> <div><img src="img/1.jpg" alt=""></div>
2020-09-02 16:40:00
2745
3
原创 Css实现鼠标滑过文字时显示隐藏的图片
今日在防站过程中，看到目标站有鼠标滑过文字时显示隐藏的图片这种效果，第一感觉是通过JS来实现的，但百度一下找到了完全用Css来实现的方法。具体步骤如下：1、鼠标滑过的文字与图片必须是在一个容器内，并且是容器盒子内相邻的元素。2、需要将图片先进行隐藏。3、设置文字滑过时hover+图片样式才让图片显示出来。分享记录一下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="U
2020-08-23 23:24:18
8887
原创 利用伪元素before给无序列表ul中的li添加有序序号
在建站过程中做侧边栏文章排行榜的时候，我们会为我们的网站文章进行一个排序，在这种情况下就会用到无序列表，那么少了序号排列网站看上去就不是那么美观。原来未接触CSS3的时候，我的做法是在li元素前添加一个行内元素，给这个元素添加样式，这样感觉什么麻烦，而CSS3中的Before伪元素实现这样的功能就十分便捷。需要实现伪元素before给无序列表li添加序号，需要在CSS3中做以下操作：一、首先要给li标签设定一个计数器li{counter-increment:number;}二、通过伪元素
2020-08-17 11:15:03
2009
原创 自制HTML5+CSS3移动端自适应菜单导航
自己自制HTML5+CSS3的移动端自适应菜单导航，用到弹性盒子布局及媒体查询语法。HTML部分：注意必须写入自适应meta语法： <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie..
2020-07-29 09:35:26
2671
原创 css3自适应控制手机端文字不重叠
在自适应缩放时，发现缩放到手机端时文字出现重叠情况。这时可以使用媒体查询方法用letter-spacing属性对Div文字间距进行设置，实现自适应文字不重叠。@media only screen and (max-width: 568px){ .index-title{ letter-spacing:0.02em; }}...
2020-07-28 12:04:14
522
原创 修改默认Bootstrap框架下导航颜色
近日开始在学习Bootstrap框架，十分强大的框架，导航默认的背景颜色和链接文本样式是白色背景和黑色的链接文本样式，调用navbar-inverse反色样式后，背景变成黑色文本链接样式变成白色了，看上去不是那么美观，借助谷歌检查工具获取导航栏的控制背景为navbar-inverse下的background-color控制，直接修改.navbar-inverse下的background-color颜色，修改成你喜欢的颜色就可以了。.navbar-inverse { background-col
2020-07-18 23:41:11
1808
原创 耗时1天用弹性盒子写的一个首页
耗时1天用弹性盒子写了一个首页，写完了感觉特别撸，咋看咋不爽。基本上能实现自适应，唯一不足的地方是文字一直不能随着页面的缩小而自适应缩小，导致弹性盒子会被撑大。
2020-07-13 14:44:43
235
原创 Html5,Css3快速注释快捷键
在编写HTML5+CSS3中对于编写的每个模块十分有必要添加一个注释，在需要修改的时候便于快速查找到相应模块，对于新手来说快速添加注释就需要了解以下两个快速注释的快捷键。HTML5:快速注释快捷键为Ctrl+/CSS3:快速注释快捷键为Ctrl+Shift+/在Sublime和Phpstorm下可以用以上快捷键实现，可能是以上两个编辑器安装了Emmet插件的原因，但在Notepad++下输入以上两个快捷键未能实现注释功能，Notepad++下未安装Emmet插件。...
2020-07-07 21:55:18
8403
原创 Web小白开博第一篇
第一次用这么专业的编辑器，顿时感觉无从下手，慢慢来吧。从2011年学习建站以来，从编辑做起，后是学习Seo，再后来利用Dedecms建站成为个人站长，防站拔模板，会一些简单的HTML+CSS，出于SEO方面考虑自己决定系统的学习一下HTML5+CSS3前段设计。虽有个人博客，但模板也是扒来的，不是自己写的，用着感觉也不是那么舒服，故特开通此博客用于记录Web前段学习。...
2020-07-07 21:36:47
155
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人