入行前端3个月的工作总结

此文章主要是写下,方便日后自己来复习,和给大家分享一下我一个小白的工作经验。

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来直接获取,以更少的代码写出更多的功能。

猜你喜欢

转载自blog.csdn.net/fishegg07/article/details/84350189