此文章主要是写下,方便日后自己来复习,和给大家分享一下我一个小白的工作经验。
2018-09-14
鼠标经过的样式可以用 父级元素:hover 例如 .box:hover ul li div{}
可以用background-img来实现图片变色或者变化
background-img:url(images/a.jpg);
background-repeat:no-repeat;
background-position:0 0;
background-size:120px;
图片缩放可以用PS里的CTRL+T
要开始记录一下公司那些文件存放的是网站哪一部分,
便于日后修改和查询
指向性选择改变样式 可以用nth-of-type 或 nth-child
例如 .box ul li:nth-of-type(2) div:nth-of type(3){}
2018-10-18
元素设置了阴影不出效果,或者加边框就里面元素错位了,可能是父级元素加了overflow:hidden原因
jquery都是通过先捕获元素,然后再绑定事件来实现想要的效果。
inherit 继承父级元素的属性。
让元素的高度随着宽度的变化而变化,不设置height,给padding-top:100%就行。如果
里面加内容,让内容绝对定位。宽高都100%
弹性布局:让父级元素加display: flex;
让子元素铺满父元素的宽度,可以给父元素加
鼠标经过元素上移和阴影效果:
box-shadow: 0 0 6px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.1);
transform: translate3d(0,-3px,0);
transition: all .2s;
2018-10-27
清除浮动有:
1.父类加overflow:hidden。但如果子类有外边框的效果,超出父类的会被隐藏掉。
例如给子元素加阴影或者边框。
2.在不要浮动的后面加个空元素取个类名,在类名里面加clear:both。
但是在html结果里多出一个空元素,如果过多的浮动就要添加过多的空元素,不好。
3.父类加高度。
4.伪类清除浮动(主流用法)
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
在设置元素之间的边距时,多用padding,少用margin,因为margin有时会导致元素错位。
之前就是设置margin-right导致下面浮动的元素不会往左边靠,用了padding就没事了。
响应式设置浮动元素的宽度写法:
例如有5个li子元素,宽度设置为width:calc((100% - 80px)/5) ----注意里面的减号两边需要空格
然后给li设置margin-right来做间距,但同时最后一个li的margin-right为0。
常规做按钮,border-radius:20px。就像一个按钮边框了。再圆点就加到30px
学习到了$.each()的用法,多用于遍历数组的,以后遇到多元素排列的时候,可以排上用场。
利用jquery来减少代码量。 $.each(arr,function(i){...});
利用transform:translate3D和阴影做出鼠标经过元素,上移和阴影效果。
让多个元素排成一行,多用float:left; 少用display:inline-block;因为用了inline-block,
父类与子类之间还是有一点点空隙。
让元素居中,最近用的最多的是margin:0 auto。和让元素绝对定位 left:50%;transform:translateX(-50%);
今天接触到一个新的动画js文件,叫 wow.js 可以研究一下。使用方法跟animate.css差不多
这周也学到了一些VUE的基本用法,要多加看看学习。
年轻就是资本呀,既然给别人晚起步,迟入行。那就得多努力,多去学习,去追回失去的那些时间。
2018-11-10
引入外部网络地址的jQuery文件如果是http开头的,而网页是https开头的,就会导致
jQuery文件非法引入而无法引入到网页里面。解决办法是:
1.把外部网络地址前的http去掉,留下//开头,他就以当前网页的https开头来引入。
2.下载jQuery文件到本地目录里面。
jQuery文件不能两次引入,不然jQuery会冲突,导致一些属性无法定义。
尤其是PHP的文件,通常一个网页都是拆分成好多个子页面来引入,所以要特别注意PHP的网页引入文件
在哪里,引入文件里面是否包含其他的引入jQuery,css或者其他的PHP页面。
今天学会了用cookie.js来给网页标记一个属性,来制作网页弹出广告,再次刷新就不会再出现的效果。
$(function(){}) 页面加载完dom元素就执行里面的方法,所以要看清楚需求才觉得是否要把
方法放在那里面去。
jq 获取下拉框选中的值:
$('.abc option:selected').val();
jq 获取单选框选中的值:
$('.abc input[name="sex"]:checked').val();
复习到了CSS动画效果:
.btns{width: 200px;position:absolute; bottom: -80px;left: 50%;transform: translateX(-50%);
-webkit-animation-name:'ripple';/*动画属性名*/
-webkit-animation-duration: 1.5s;/*动画持续时间*/
-webkit-animation-timing-function: linear; /*动画频率*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料,infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/}
@keyframes ripple {
100% {
width:220px;
}
}
PHP:判断代理和日期是否小于20181112 strtotime()将英文文本日期时间解析为 Unix 时间戳
<? if(!$_SESSION['id_AgentS'] && time() < strtotime('2018-11-12')){ //2018双11活动代码 2018-11-10?>
<?}?>
2018-11-17
一个可以链接的全屏区域的遮罩层
a{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
JQ绑定尽可能的减少事件的次数(通过索引来做判断)
$(.abc li).click(function(){
var index = $(this).index()
if(index == 0){
$(this).addClass('wx').siblings().removeClass('bd')
}else{
$(this).addClass('bd).siblings().removeClass('wx')
}
})
form表单里的action要用相对路径,如果是https的外部路径也是可以的。
2018-12-7
没用的jquery代码要删除或者注释掉,不然的话会影响整个jquery代码都无效。
无效获取的jquery代码页会导致部分jquery代码失效,所以要多多检查获取的DOM是否正确有效。
复选框选中的jquery写法
if($("input[name='f2']:checkbox[check = true]").size()<1){
}
jqeur获取dom对象,尽可能的简单点,可以通过dom对象上的id或者class来直接获取,以更少的代码写出更多的功能。