qq_39224105的博客

.home-more-p { width: 114px; height: 44px; background: #ffffff; border: 1px solid #919191; border-radius: 22px; cursor: pointer; user-select: none; display: flex; justify-content: center; align-it

我在这里整理了好几个滚动条，因为浏览器原生的滚动条样式，真的不是很好看。1.第一个（代码部分）：::-webkit-scrollbar { width: 8px; height: 8px;}::-webkit-scrollbar-track { background-color:#F5F5F5; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em;}::-

大家可以先看一下背景滚动的效果这个效果需要注意的就是鼠标悬浮的时机hover，鼠标在悬浮到不同的选项上时，背景的那个色块距离左侧的边距会发生改变。在鼠标离开导航栏时，色块会返回到你定义的那个位置(这个位置在实际的开发中，肯定是当前页面的位置，这个位置你可以自行更改)。下面是代码部分：html部分：<div class="container"> <nav> <a href="#">home</a> <a href="#"&

大家可以先看一下输入框输入效果这个效果需要注意的就是输入框触发的时机问题，在输入框获取焦点的时候：Name文字会向上移动，输入框的下边距会出现。会用到input标签的focus和valid:focus定义：获得焦点的元素，一般用于表单(input、textarea);触发条件：当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。:valid定义：伪类指定一个通过匹配正确的所要求的表单元素;在这里:valid主要的功能是在input输入框失去焦点是保持最后的状态。下面是代码