bootstrap4示例模板中出现这样的代码
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
这行代码的作用可以让网页的宽度自动适应手机屏幕的宽度，但是多了shrink-to-f
...
- 前端
- 2020-03-18
提高CSS 开发效率的常用代码片段
这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，欢迎收藏转载：
清除浮动
浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个<div style="clear:both
...
- 前端
- 2020-03-17
纯CSS3实现各种loading效果
动画效果参考连接：http://www.webhek.com/post/css-loaders.html
效果如下：
以上这些效果都是用一个div加css3动画实现的，看起来效果似乎不错。如果不考虑IE9兼容性的话，有一定的使用价值。
...
- 前端
- 2020-03-17
css实现标题左右横线
直接上代码
<style type="text/css">
.title {
position: relative;
font-size: 32px;
color: #fff;
height: 45px;
line-height: 45px;
text-a
...
- 前端
- 2020-03-17
CSS 伪元素:before&:after 与z-index 的那点事
最近要实现一个类似下面的层叠的效果，需要带一个hover 缓动效果。
第一反应就是直接使用:before&:after伪元素，配合绝对定位加z-index 轻松实现，实际操作发现并不是这么一回事。
...
- 前端
- 2020-03-17
jQuery 自 2006 年诞生以来，一个发行了 1.x、2.x、3.x 这三个大版本。而在这三个大版本下又细分了许多小版本。可能有些小伙伴不太清楚这些版本有什么区别？实际开发中应该选用哪个版本？下面我对其做个总结。
...
- 前端
- 2020-03-09
有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加CSS属性：vertical-align:middle;这样，它们在同一行就会垂直居中对齐了。
...
- 前端
- 2020-01-16
HTML5 图片下边界出现空隙，css去除空隙的解决方法
图片img下方出现空隙，且找不到空隙被哪一个元素占用，无缘无故多了空隙，影响样式设计，有以下几种解决方法：
1，给<img>元素添加样式：display:block;
<img style="display: block" src="../img/banner_index.png"/>
2,
...
- 前端
- 2020-01-15
1、垂直对齐
如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：
.verticalcenter{
position: relative;
top: 50%;
-webkit-transform: transl
...
- 前端
- 2020-01-11
关于Google浏览器使用layer弹出层video标签播放视屏无法全屏播放，而IE9+及Firefox浏览器都是正常全屏播放的，
通过调试发现是这个class的处理影响了全屏的展示
所以，目前的解决办法是在layer层创建之后，移除这个class即可（注意在success回调中置于下一轮事件循环）
处理方法即在
...
- 前端
- 2020-01-09
FontAwesome5.11 与4.7的区别 5.x版本图标显示方框的原因
请点击进入Fontawasome5.x 图标查询页面
进入之后可见所有图标，右侧下方可选各个分类的图标，可根据自身要求连续选择所需的分类。
使用Fontawasome这一字体图标的好处是：
不管在什么设备上，总能最精细的显示出来，而不会失真。
...
- 前端
- 2019-12-30
今天要写一个网页，
浏览器是chrome，
网页里有个自动播放的视频背景，
万事大吉，但是chrome怎么也无法自动播放。360浏览器正常。
网上花了很长时间，但都是说 autopaly ="autopaly" 就可以了。
最后弄了半天，
发现chrome 从18年起就不支持了。。。
...
- 前端
- 2019-12-25
input输入框输入内容后显示“X小叉叉”图标 可以清除输入框的内容
输入框获取焦点时动态显示“叉叉”的清空图表：在输入框中输入内容时，右边显示“叉叉”按钮；输入框为空的时候，“叉叉”按钮消失。
如下图：
主要难点是在获取焦点的同时获取输入内容：方法 1 和 2 是 google 到的，但兼容性不够；方法 3 是自己用 js 实现。
...
- 前端
- 2019-12-24
一、设置placeholder的方法
placeholder属性用来设置控件内部的提示信息
<input type="text" placeholder="请输入用户名">
改变placeholder的样式：
input::placeholder {
color: red;
...
- 前端
- 2019-12-24
CSS改变input光标颜色
我们可能会有改变input光标颜色的需求，谷歌浏览器的默认光标颜色是黑色的，我们可以看到GitHub上的光标却是白色，那么这个用CSS怎么改变呢?
这种效果有两种实现方式：
1.使用color来实现
光标的颜色是继承自当前输入框字体的颜色，所以用color属性即可改变：
input{
color:red;
...
- 前端
- 2019-12-10
a标签加边框后， 他们之间会有空隙 请看源代码
<style>
*{
margin: 0;
padding: 0;
}
a{
border: 1px solid #CD1E21;
}
</style>
<body>
<a href=""&
...
- 前端
- 2019-12-06
很简单，css中加入如下代码
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
pointer-events: none;
}
修改完成后发现一个小问
...
- 前端
- 2019-12-05
增加一下js代码
$(function () {
$(".dropdown").mouseover(function () {
$(this).addClass("open");
});
$(".dropdown").mouseleave(function(){
...
- 前端
- 2019-12-05
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"&g
...
- 前端
- 2019-12-03
bootstrap中sr-only是什么属性？用途是什么？
开发中经常发现bootStrap中有sr-only类，如下图
但是，好像在浏览器中并没有显现出什么效果。你作为正常用户觉得没效果就对了。
作用
这是专门为残障人士浏览网页设计的。
在前端开发中，有些时候设计图上面会出现仅供正常视觉用户看的元素。
...
- 前端
- 2019-12-03
最新评论