这是我参与「第四届青训营 」笔记创作活动的第二天
承接昨天的网页，继续往下做。这些样式啥的真的是好烦啊...基础不牢固的结果是每一个样式（除了特别基础的）基本都要面向百度编程。话不多说，今天干的事情如下：
给导航栏添加一个下拉消失，上拉出现的效果
用的是vue3，代码如下：
首先是在css中，设置一个可以在js中响应的变量 例：
top: v-bind("hd1");/*将top的内容为hd1变量（大概？） */
}
.div_2{
top: v-bind("hd");/*将top的内容为hd1变量（大概？） */
}
然后是在setup（）中调用相关的函数及返回值：
const heightclass1 = ref(0); //最开始滚轮的位置
const hd = ref("0");
const hd1 = ref("56px");
window.addEventListener("wheel", pan); //鼠标滚轮滚动后调用pan函数
function pan() {
const heightclass2 = document.documentElement.scrollTop; //获取滚动后滚轮的高度
if (heightclass2 > heightclass1.value) {
//判断二者的值，如果后者比前者大，则为下拉，将导航栏的高度重新设定
heightclass1.value = heightclass2;
hd.value = "-60px";
hd1.value = "0";
return;
}
if (heightclass2 < heightclass1.value) {
//反之亦然
heightclass1.value = heightclass2;
hd.value = "0";
hd1.value = "55px";
return;
}
}
return { hd, pan, hd1, heightclass1 };
},
页面内容填充样式：
效果如下：
这里的代码长度还是很大的（是我写的不够简洁，是我菜了，对不起各位）
<div class="combination">
<div class="nav_small">
<a href="#"><div class="div">推荐</div></a>
<a href="#"><div class="div">最新</div></a>
<a href="#"><div class="div">热榜</div></a>
</div>
<div class="small">sdsd</div>
<div class="content">
<div v-for="site in sister" :key="site">
<!-- 循环取值，后端传来数据后也用相同的代码取值 -->
<div class="model">
<h3 class="title">{{ site.title }}</h3>
<p class="content_in">{{ site.text }}</p>
</div>
</div>
</div>
</div>
</template>
<style>
.content_in {
color: #999;
font-size: 14px;
line-height: 26px;
height: 78px;
overflow: hidden; /* 使内容适应填充框，内容过长的话会裁剪它 */
text-overflow: ellipsis; /*用省略号表示无法表示的文本*/
}
.title {
font-size: 22px;
margin-bottom: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.model {
box-sizing: border-box;
width: 660px;
height: 160px;
padding: 20px 0px;
border-bottom: 1px solid #ccc;
margin-bottom: -1px;
}
a > div:hover {
color: rgb(27, 140, 214);
}
.div {
margin-right: 40px;
float: left;
color: rgb(14, 14, 14);
display: block;
}
.combination {
margin-top: -250px;
width: 1028px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.nav_small {
background-color: rgb(249, 251, 252);
width: 710px;
height: 30px;
float: left;
padding-left: 25px;
}
.small {
padding-left: 10px;
background-color: rgb(249, 251, 252);
width: 300px;
height: 300px;
float: right;
}
.content {
margin-top: 1px;
padding-left: 25px;
float: left;
background-color: rgb(249, 251, 252);
width: 710px;
height: 100%;
}
</style>
上面的代码尚不是很完善，等到后面还有很多地方要修改(另外，js的代码我并没有贴出来，各位创建一个数组赋值就好了)，今天还是在样式上面花了很多的时间，基础基础基础真的很重要！！！
好了，今天就先到这吧，本菜狗的一天将在原神中结束。
