零碎笔记总结

1.草料二维码生成二维码移动手机端浏览项目；步骤如下：

（1）获取本机电脑的ipv4地址：程序cmd->输入inpconfig回车查看ipv4地址，如：172.16.30.123；

（2）获取项目在浏览器打开的网址：如http://127.0.0.1:8111/public/；

（3）百度搜索草料二维码生成器官网->网址： http://127.0.0.1:8111/public/将其改成

http://172.16.30.123:8111/public/->生成二维码；

（4）手机连接与该电脑相同的无限网，然后微信扫描草料二维码生成的二维码，即可在线浏览项目在真机上的效果；

2. 解决消除点击a标签时产生的阴影效果：

a{       
    -webkit-tap-highligt-color:transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

3. css解决img图片居中显示问题：

div{
    position:absolute/relative/fixed;
}
img{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

4.ps切图：

（1）获取图片：

UI设计师（PSD,PNG图片）；

印屏幕：PrtScR键截屏+ps抠图（ctrl+c=>ctrl+n=>ctrl+v）；

浏览器：F12找到图片的地址打开保存；

具体步骤

方法1脚本切图：ps打开psd图片，然后文件->脚本->将图层导出到文件->目标：即要存放切后图片的位置->文件类型：png-24->png-24选项：透明区域，交错，裁切图层三个选项全选->运行即可；

方法2单个图层切图：选框工具->框选要切的图层的图像->（窗口->图层）图层单击选中选框工具选中的图层->ctrl+c复制->ctrl+n新建->ctrl+v粘贴->勾选去掉背景->ctrl+shift+alt+s(打开存储为web所用的格式)->预设png-24-> 存储到指定位置即可

（2）步骤：

分析设计图的结构；

根据所分析的结构，进行结构编码；

根据所分析的结构，进行CSS编码；(包括重置样式（reset.css）、公共样式(common.css)、独立样式(index.css))；

（3）重置样式reset.css：


body,div,dl,dd,dt,ul,li,,h1,h2,h3,h5,h4,h6,input,form,a,p,textarea{
    margin:0;
    padding:0;
    font-family:"Hevetica Neue",Helvetical,Arical,sans-serif;
}
ol,ul,li{ list-style:none}
a{text-decoration:none;}
img{ border:none;display:block}
.clearfloat{ zoom:1}
.clearfloat:after{
    display:block;
    content:"";
    clear:both;
    visibility:hidden;
    height:0;
}

（4）单个图层图片的旋转，移动，放缩：在图层信息栏选中单击当前图层（图层组的话要先合并成图层）->ctrl+t->在用鼠标进行旋转，放缩，移动->最后再鼠标单击改图片保存操作后的图片即可；

5. css图片等比缩放：

（1）img{width : auto;height : 100%} 或者img{width : 100%;height : auto}；

（2）img{object-fit:cover};

6. $().hover(func1, func2) 的效果等效于： mouseenter(), mouseleave();

7.在线获取网页页面的图片：f12->找到该图片的相对/绝对路径->在新网页中打开open link in new tab->右键图片存储为本地盘即可；

8. ps去掉图片的背景图：选中魔术橡皮擦工具->吸要去掉的背景颜色(Alt+单击鼠标左键)->去掉背景色（鼠标左键单击）

9.让图片和文本水平对齐方式：

（1）.

<div id="div1">
    <img src="1117994955-5978930fb8e64.png">
    <span id="sp2">搜索</span>
</div>
#div1{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
#div1 > img{
    height: 20px;
    width: auto;
}
#div1 > #sp2{
    display: inline-block;
    padding-left: 10px;
}

（2） .img{ vertical-align: middle; }

10. 解决ios下input的默认样式：

input{
    -webkit-appearance: none;
    outline:none;
}

11. 解决ios下input只保留下边框线的样式：

input{
    -webkit-appearance: none;
    outline:none;
    border:none;
    border-bottom:1px solid grey;
    border-radius:0;
}

12. 100%还原设计图：

先拉选框，在拉参考线。

注意：1. 少用*{},影响浏览器性能，需要去掉什么默认样式，就写什么标签！

2. img标签默认周边会有几个像素，所有需要vertical-align:top/middle去让其合适，outline:none;

3. font: 14px/24px '宋体'；分别表示字体的大小，行高，字体类型。

4. 将写好的html视图截图，在ps中粘贴切图最外层大小，拖拽到设计图中，通过图层的开关眼睛，查询编译好的视图和设计图的还原度。

5. psd图层中查看文字大小，选中文字工具，在选中文字，即可查看文字的大小，字体，颜色了。

13. flex布局：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效；

14. ps替换图标颜色：打开ps->选中图层->菜单栏图像->调整->替换颜色->

15. 设置移动端input的placeholder字体颜色：

input::-webkit-input-placeholder { /* WebKit browsers */ 
    color: red; 
} 

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: red; 
} 

input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: red; 
} 

input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: red; 
}

16.如何让多个li元素单行排列，并撑开ul宽度

.container {width: 100%; overflow: auto; }
.container ul  {white-space: nowrap}
.container ul li {display: inline-block; width: 30%;}

17. vue 动态绑定图片的src:

常见错误写法1：

<img src="value.src">

常见错误写法2：

<img src="{{value.src}}">

常见错误写法3：

<img src="{value.src}">

2种正确写法：

<img :src=" 'files/'+value.src ">

<img :src="value.src">

18. vue 动态添加class类名

<template>
    <div>
        <h2>动态添加类名</h2>

        <!-- 第一种方式:对象的形式 -->
        <!-- 第一个参数 类名， 第二个参数：boolean值 -->
        <!-- 对象的形式: 用花括号包裹起来，类名用引号， -->
        <!-- 优点: 以对象的形式可以写多个，用逗号分开 -->
        <p :class="{'p1' : true}">对象的形式(文字的颜色)</p>
        <p :class="{'p1' : false, 'p': true}">对象的形式(文字的颜色)</p>


        <!-- 第二种方式:三元表达式 注意点：放在数组中，类名要用引号-->
        <p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的颜色)</p>


        <!-- 第三种方式: 数组的形式 -->
        <p :class="[isTrue, isFalse]">数组的形式(文字的颜色)</p>

        <!-- 数组中用对象 -->
        <p :class="[{'p1': false}, isFalse]">数组中使用对象(文字的颜色)</p>


  <!--补充:  class中还可以传方法，在方法中返回类名-->
  <p :class="setClass">通过方法设置class类名</p>
    </div>
</template>

<script>
    export default {
        data () {
           return {
               isTrue: 'p1',
               isFalse: 'p'
           }；
        }，

  method: {
  setclass () {
        return 'p1';
      }
  }
    }
</script>


<style scoped>
    .p1 {
        color: red;
        font-size: 30px;
    }
    .p {
        color: blue
    }

</style>

19. 压缩图片网站：https://tinypng.com

20. 切割图片四个角：

img{
    -webkit-clip-path: inset(0 5% round 25% 0);
}

21. css字体描边：

-webkit-text-stroke: 2px red;

猜你喜欢