繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

前端小细节_前端项目细节怎么写

作者：繁依Fanyi0 | 2024-03-24 02:52:56

踩

前端项目细节怎么写

关于超链接标签

关于img图片缝隙问题

直接设置img会有一个底部缝隙问题，解决


  img{
    vertical-align: bottom;
  }

vscode:

vscode快速生成一段英文


<p>
    lorem
</p>

清除浮动：


.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
                }

边框显隐问题：

之前做过一个项目是有一个样式问题，写完之后要求获取焦点显示边框，加上border之后发现位置变了；处理的办法


outline: 1px solid red;
 
outline会显示边框但是不占位置，如果贴着他有文字的话文字会被边框覆盖；
 
border是会占位置的所以加边框跟不加边框会有一个像素的位置差别；
 
也可以用box-sizing: border-box;吧他会吧边框囊括进去，不过没用这个属性；

顶部导航栏移入鼠标，展示隐藏框问题：


.location:hover .city-list{
        display: block;
        }
 
location表示父级元素
 
city-list表示后代
 
// 建议就是隐藏框使用margin，不要使用flex布局，因为初始布局后如果使用display: block；布局会乱

关于超链接<a>标签


<a href="#">百度</a>
 
#设置后可以阻止超链接的跳转，但是设置后会跳转顶部
 
<a href="javascript:;">百度</a>
 
javascript设置后也可以阻止跳转，但是不会跳转顶部，不发生任何变化

input框获取焦点，边框问题


  input{
           border: none;
           outline:none;
        }
 
border去除边框问题，获取焦点会有一个获取焦点的边框
 
outline是取消获取焦点的边框

修改chrome浏览器滚动条样式


::-webkit-scrollbar {
  width: 9px;
  height: 14px;
}
 
::-webkit-scrollbar-thumb {
/* background-color: #01c8dc;
border-radius: 3px; */
  background-color: #334157;
  border-radius: 10px;
}

关于框中三角形

自己写的时候直接在框里面加了个块元素然后设置定位，问题就是样式可能会下渗到子元素就很恶心，


		.top-nav-left ul li:nth-of-type(23) a>div>.two{
			border: 10px solid;
			border-color: transparent transparent #fff transparent;
			position: absolute;
			top: -17px;
			left: 61px;
			width: 0;
			height: 0;
			box-shadow: none;
		}

个人不建议这样了，踩过坑了。比较好一点的处理方法是，使用伪元素的方法，提供参考，但是之前已经写完了，就没试过。


		.top-nav-left ul li:nth-of-type(23) a>div::before{
            content: '';
			border: 10px solid;
			border-color: transparent transparent #fff transparent;
			position: absolute;
			top: -17px;
			left: 61px;
			width: 0;
			height: 0;
			box-shadow: none;
		}

大致是这个样子，需要的话自己修改，或者百度。

关于鼠标移入，隐藏元素缓慢下拉样式


		.demo{
			width: 200px;
			height: 200px;
			background-color: #bfa;
			transition: height 3s;
		}
		.demo:hover{
			height: 300px;
		}

不要设置display属性，block,none;要设置他的高度例子： 0=>100，结合transtion属性也可以设置他的宽度。

之前小米logo鼠标移入左右切换样式


	<div class="header-left">
		<h1>
			<a href="javascript:;" class="home"></a>
			<a href="javascript:;" class="mi"></a>
		</h1>
	</div>


.header-left>h1{
			position: relative;
			width: 55px;
			height: 55px;
			overflow: hidden;
		}
		.header-left>h1>a{
			width: 55px;
			height: 55px;
			display: block;
			position: absolute;
			background-image: url(https://cdn.pixabay.com/photo/2020/04/30/03/26/rufous-5111261__340.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			left: 0;
			transition: left 3s;
		}
		.header-left>h1:hover a{
			left: 55px;
		}
		.header-left>h1>a:nth-of-type(2){
			width: 55px;
			height: 55px;
			display: block;
			position: absolute;
			left: -55px;
			background-image: url(https://cdn.pixabay.com/photo/2022/07/24/11/26/fallow-deer-7341424__340.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.header-left>h1:hover a:nth-of-type(2){
			left: 0;
		}

仅供参考，有的地方需要修改

设置页面图标

<link rel="icon" href="./img/favicon.ico">

.ico图标一般在根目录下

关于元素居中

宽高确定情况下


   .box2{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }


 .box2{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
 
//没有宽高也可以居中

关于元素获取焦点，类似京东向上移动效果


 .box1{
      width: 100px;
      height: 200px;
      background-color: orange;
      margin-right: 50px;
      transition: transform .3s;
    } 
 .box1:hover{
      transform: translateY(-10px);
      box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    }

初识less的使用

在html中使用变量


//变量的声明及引用
    html{
      --color: green;
    }
 
    .box{
      width: 100px;
      height: 100px;
      background-color: var(--color);
    }

使用插件easyless使用变量


@a:yellow;
 
.box{
  background-color: red;
  .box1{
    background-color: @a;
    .box3{
      background-color: @a;
    }
  }
  .box2{
    background-color: red;
  }
}
使用变量当做值是用


@c:box9;
.@{c}{
  width: 200px;
  height: 200px;
  background-color: @a;
  background-image: url('@{c}/i.png');
}
 
使用变量当做类使用是加括号，背景图片也是，还要加引号

如果变量重复，则用就近原则


.main{
  color: red;
  background-color: $color;
  >.box{
    color: red;
  }
  &:hover{
    color: yellow;
  }
}
$color会使用color的样式，如果easyless版本第可能会不生效问题
 >.box{
    color: red;
  }
表示子元素选择器
 &:hover{
    color: yellow;
  }
&表示给自己加样式


.p1{
  width: 100px;
  height: 100px;
}
.p2:extend(.p1){
  color: red;
}
.p3{
  .p1()
}
.p4(){
  width: 500px;
  height: 500px;
  background-color: red;
}
:extend表示p2独有的
.p3直接引用p1的样式
.p4()表示混合函数，样式不会生效，只有引用时生效


.con(@w,@a:red){
  width: 100px;
  height: @w;
color: @a;
}
//上边表示混合函数,可以指定默认参数
.con1{
  .con(100px)
}
//下面如果引用必须传值，顺序是一一对应

关于定位后元素不显示问题

定位后元素的层级不高，被图片或者层级较高的遮挡，需要给元素设置z-index置顶一个较大的值


	.popup{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateY(-50%);
		z-index: 999;
		width: 500rpx;
		background-color: #fff;
		margin-left: -251rpx;
	}

遮罩层


//遮罩层
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.65);
		z-index: 999;
	}
//层上的东西
 
	.popup{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateY(-50%);
		z-index: 1000;
		width: 500rpx;
		background-color: #fff;
		margin-left: -251rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

显示的部分一定要比遮罩层的z-index大不然就是在遮罩层下面

关于居中问题

一般三个标签来说居中很简单

   display: flex;
   justify-content: space-between;
     align-items: center;

设置之后就可以实现居中，但是如果两个标签，或者一个标签来说就有点麻烦，一个标签还好一点，如果是两个标签的话


<view class="nav">
			<i class="fa-solid fa-chevron-left" @click="backgo"></i>
			<text>{{title}}</text>
			<i class="fa-solid fa-chevron-left"></i>
</view>
 
	.nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #22a7f2;
		color: #fff;
		i:nth-of-type(2){
			visibility: hidden;
		}
	}
 
.nav里面有三个属性，只需要把不需要的属性设置visibility: hidden;就可以实现这个标签隐藏，但他是占位置的所以可以实现居中。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/299387