![](https://img-blog.csdnimg.cn/20190927151124774.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端学习
主要记载WEB前端HTML5+CSS3学习经验及技巧。
Web-Jason365
这个作者很懒,什么都没留下…
展开
-
纯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 · 383 阅读 · 0 评论 -
利用伪元素给图片在鼠标悬停时添加背景图片
利用伪元素给图片在鼠标悬停的时候添加背景图片,这种效果在电影网站上使用的比较频繁,主要是鼠标悬停的时候显示出播放的图标,点击图片链接后就会进入视频详情页面,而使用伪元素是为了使我们的html代码更加简洁。要点:1.需要使用绝对定位和相对定位,确定背景图片的位置,父级盒子设置为绝对定位,伪元素背景图片设置为相对定位。2.背景图片的宽高要和父级盒子的宽高一致。3.背景图片在默认情况下不显示,需要用display属性将其设置为none,当鼠标悬停的时候再让其显示出来,鼠标悬停时将其display属性设置为原创 2020-09-08 21:04:21 · 1353 阅读 · 0 评论 -
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 · 484 阅读 · 0 评论 -
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 · 2728 阅读 · 3 评论 -
Css实现鼠标滑过文字时显示隐藏的图片
今日在防站过程中,看到目标站有鼠标滑过文字时显示隐藏的图片这种效果,第一感觉是通过JS来实现的,但百度一下找到了完全用Css来实现的方法。具体步骤如下:1、鼠标滑过的文字与图片必须是在一个容器内,并且是容器盒子内相邻的元素。2、需要将图片先进行隐藏。3、设置文字滑过时hover+图片样式才让图片显示出来。分享记录一下代码:<!DOCTYPE html><html lang="en"><head> <meta charset="U原创 2020-08-23 23:24:18 · 8842 阅读 · 0 评论 -
利用伪元素before给无序列表ul中的li添加有序序号
在建站过程中做侧边栏文章排行榜的时候,我们会为我们的网站文章进行一个排序,在这种情况下就会用到无序列表,那么少了序号排列网站看上去就不是那么美观。原来未接触CSS3的时候,我的做法是在li元素前添加一个行内元素,给这个元素添加样式,这样感觉什么麻烦,而CSS3中的Before伪元素实现这样的功能就十分便捷。需要实现伪元素before给无序列表li添加序号,需要在CSS3中做以下操作:一、首先要给li标签设定一个计数器li{counter-increment:number;}二、通过伪元素原创 2020-08-17 11:15:03 · 1992 阅读 · 0 评论 -
自制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 · 2664 阅读 · 0 评论 -
css3自适应控制手机端文字不重叠
在自适应缩放时,发现缩放到手机端时文字出现重叠情况。这时可以使用媒体查询方法用letter-spacing属性对Div文字间距进行设置,实现自适应文字不重叠。@media only screen and (max-width: 568px){ .index-title{ letter-spacing:0.02em; }}...原创 2020-07-28 12:04:14 · 515 阅读 · 0 评论 -
修改默认Bootstrap框架下导航颜色
近日开始在学习Bootstrap框架,十分强大的框架,导航默认的背景颜色和链接文本样式是白色背景和黑色的链接文本样式,调用navbar-inverse反色样式后,背景变成黑色文本链接样式变成白色了,看上去不是那么美观,借助谷歌检查工具获取导航栏的控制背景为navbar-inverse下的background-color控制,直接修改.navbar-inverse下的background-color颜色,修改成你喜欢的颜色就可以了。.navbar-inverse { background-col原创 2020-07-18 23:41:11 · 1786 阅读 · 0 评论 -
耗时1天用弹性盒子写的一个首页
耗时1天用弹性盒子写了一个首页,写完了感觉特别撸,咋看咋不爽。基本上能实现自适应,唯一不足的地方是文字一直不能随着页面的缩小而自适应缩小,导致弹性盒子会被撑大。原创 2020-07-13 14:44:43 · 234 阅读 · 0 评论 -
Html5,Css3快速注释快捷键
在编写HTML5+CSS3中对于编写的每个模块十分有必要添加一个注释,在需要修改的时候便于快速查找到相应模块,对于新手来说快速添加注释就需要了解以下两个快速注释的快捷键。HTML5:快速注释快捷键为Ctrl+/CSS3:快速注释快捷键为Ctrl+Shift+/在Sublime和Phpstorm下可以用以上快捷键实现,可能是以上两个编辑器安装了Emmet插件的原因,但在Notepad++下输入以上两个快捷键未能实现注释功能,Notepad++下未安装Emmet插件。...原创 2020-07-07 21:55:18 · 8361 阅读 · 0 评论