改样式神器之chrome浏览器

作为一个审美不太行的前端码农，更喜欢写js，而不喜欢写css  [苦涩][捂脸]。

参加工作两个月，在项目实践中摸爬打滚，逐渐发现了，最快速，最有效的改样式方法是使用浏览器这个工具协助。以下以chrome浏览器为例：

步骤：

1.右键打开控制台

会出现一下窗口：（随便打开一个网页的哈）

最常用的三个选项卡：使用这三个基本上可以搞定开发了，有时候还需要在 Application 这里 查看 sessionStorage或者localStorage等详情

2. 快速定位要修改css的元素位置

点击控制台窗口的最左上角的箭头

3. 然后把鼠标移动到你想要查看的元素上，在下面的styles选项卡可以看到元素的所有样式。

比如： 在项目中有一个使用了element-ul 的el-tabs，现在要把它自带的下划线去掉，然后使用我自己写的下划线（为什么要这种操作，你不需要知道）

（1）.  把页面运行到浏览器中，右键打开检查

（2）. 点击控制窗口的最左上角

（3）. 移动鼠标，悬停的元素会出现高亮，如下，点击可以快速定位

（4）. 定位之后，可以在Elements选项卡这里看到 元素对应的html代码，下面的styles 看到元素对应的所有css样式

（5）. 也可以直接在控制窗口 sytles 对应的选择器那里编写css样式，写好了再搬到项目中。

 去掉el-tabs自带的下划线， 再设置一个下划线。

 /deep/ .el-tabs__item :active, .el-tabs__item:focus, .el-tabs__item.is-active {
        padding: 0;
        border-bottom: 2px solid #E03D3E; // 显示下划线
        // transform: translateX(0px);
        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 /deep/ .el-tabs__active-bar {
      background-color: transparent !important; // 把自带的下划线设置为透明
 }

控制检查窗口的显示位置，可以再检查窗口的右上角设置

 

终！！！