文武科技柜 CSS 学习记录02：菜单悬浮、全屏Banner、幻灯片
斌仔
分类：
文章字数 642 字 阅读时间 21 分钟
🤖 由 ChatGPT 生成的文章摘要
已经离上次 CSS 学习记录 01：链接背景悬浮效果 过去3天了，这三天除了上班，就趁晚上休息时间，学习前端知识，并撸了几个小项目拿来练练手。
菜单悬浮效果
html文件
<!-- 先编写大概布局 -->
<div class="top">
<ul class="father">
<li>父菜单一
<ul class="son">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li>父菜单二
<ul class="son">
<li>子菜单1</li>
</ul>
</li>
<li>父菜单三
<ul class="son">
<li>子菜单1</li>
<li>子菜单2</li>
</ul></li>
</ul>
</div>
<div class="content">
<p>
刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。
</p>
</div>
Css文件
/*
1. 页面初始化
*/
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/*
2. 设置顶部栏宽高
*/
.top{
width: 80%;
height: 10%;
margin: 0 auto;
border: 1px solid #000;
border-radius: 5px;
}
/*
3. 设置父菜单的布局样式
*/
.father{
text-align: center;
/*
详细可见：
1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
2. https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
*/
display: flex;
justify-content: center;
position: relative;
}
.father>li{
padding: 20px 6px;
position: relative;
}
.father>li:hover{
color: #fff;
}
/*
6. 设计父菜单悬浮背景效果
*/
.father>li::before,.son>li::before{
content: "";
background-color: rgb(255, 118, 152);
position: absolute;
top: 25%;
left: 0;
height: 50%;
width: 100%;
z-index: -1;
border: 1px solid #000;
border-radius: 5px;
opacity: 0;
transform: scaleX(0.3);
transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.father>li:hover::before,.son>li:hover::before{
transform: none;
opacity: 1;
}
.father>li:hover .son{
opacity: 1;
}
/*
4. 设置子菜单的布局样式
*/
.son{
background-color: #f7f9fe;
color: #000;
min-width: 100px;
text-align: left;
border: 1px solid #000;
border-radius: 5px;
position: absolute;
top: 45px;
text-align: center;
margin: 0 0 0 -25px;
padding: 10px 6px;
/*
opacity：元素的不透明度
详细可见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/opacity
*/
opacity: 0;
/*
translateY() 在页面垂直移动元素
*/
transform: translateY(5px);
transition: all .6s cubic-bezier(.4,.01,.165,.99);
}
.son>li{
padding: 6px;
position: relative;
}
.son>li::before{
height: 60%;
top: 20%;
}
.content{
width: 80%;
height: auto;
margin: 0 auto;
}
全屏banner
html文件
<body>
<div class="page" id="page">
<div class="info" id="info">
<p>彼岸花花开彼岸，断肠草草断肝肠。</p>
<p>文武科技柜</p>
</div>
<div class="scroll-down scroll-down-effects" id="scrollDown">
↓
</div>
</div>
<div class="content" id="content-inner">
<p>刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。</p>
<p>刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。</p>
</div>
</body>
Css文件
* {
padding: 0;
margin: 0;
}
/*
必须设置页面html,body 100%，否则页面内容无法全屏填充
*/
body {
width: 100%;
height: 100%;
}
.page {
height: 100vh;
/*
background
详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
*/
background-image: url(https://api.dujin.org/bing/1920.php);
/* background-image: -webkit-cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(https://api.dujin.org/bing/1920.php), 75%); */
/* background-image: cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(https://api.dujin.org/bing/1920.php), 30%); */
/*
background-attachment：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment
*/
background-attachment: scroll !important;
/*
background-repeat: 背景图像的重复方式
*/
background-repeat: no-repeat;
/*
background-position: 背景图片设置初始位置
*/
background-position: center center;
/*
background-size: 背景图片大小
cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
*/
background-size: cover;
overflow: hidden;
text-align: center;
color: #fff;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/*
给图片添加遮罩
*/
.page::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.info {
z-index: 1;
font-weight: 700;
}
.scroll-down {
position: absolute;
width: 100%;
bottom: 0px;
text-align: center;
color: #fff;
cursor: pointer;
}
.scroll-down-effects {
animation: 1.5s ease 0s infinite normal none running scroll-down-effect;
}
/*
keyframes(关键帧)：控制动画序列的中间步骤
详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
*/
@keyframes scroll-down-effect {
0% {
bottom: 0px;
opacity: 0.4;
}
50% {
bottom: 10px;
opacity: 1;
/*
详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
*/
filter: none;
}
100% {
bottom: 0px;
opacity: 0.4;
}
}
.content p{
height: 500px;
}
JavaScript文件
const btf = {
scrollToDest: (pos, time = 500) => {
/*
pageYOffset：垂直方向滚动的像素
*/
const currentPos = window.pageYOffset
if (currentPos > pos) pos = pos - 70
if ('scrollBehavior' in document.documentElement.style) {
/*
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo
*/
window.scrollTo({
top: pos,
behavior: 'smooth'
})
return
}
}
}
const scrollDownEle = document.getElementById('scrollDown');
scrollDownEle.addEventListener('click', function() {
console.log("666");
/*
1. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop
2. https://www.runoob.com/jsref/prop-element-offsettop.html
*/
btf.scrollToDest(document.getElementById('content-inner').offsetTop, 600)
})
幻灯片
html文件
<div class="banner">
<img src="http://iph.href.lu/600x300?text=图片1" alt="">
<img class="b-img" src="http://iph.href.lu/600x300?text=图片2" alt="">
<img class="b-img" src="http://iph.href.lu/600x300?text=图片3" alt="">
<img class="b-img" src="http://iph.href.lu/600x300?text=图片4" alt="">
<img class="b-img" src="http://iph.href.lu/600x300?text=图片5" alt="">
<div class="pre">👈</div>
<div class="next">👉</div>
<div class="b-quan">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
Css文件
* {
margin: 0px;
padding: 0px;
}
.banner {
width: 600px;
height: 300px;
margin: 0 auto;
position: relative;
}
img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.b-img {
opacity: 0;
}
li:nth-child(1){
list-style: disc;
}
li{
list-style: circle;
}
.pre,.next{
position: absolute;
top: 50%;
z-index: 999;
cursor: pointer;
}
.next{
right: 0;
}
JavaScript文件
/*
代码参考：
[jQuery实现轮播图 - 掘金](https://juejin.cn/post/6858605052978790414)
*/
let index = 0;
doStart(); // 默认开启
let imgLength = $('img').length;
// 自动轮播效果
function doStart() {
myTime = setInterval(function() {
//让上一张淡出
imgOut(index);
index = ++index % imgLength;
//让下一张淡入
imgIn(index);
}, 3000);
}
$(".banner").mouseover(function() {
clearInterval(myTime);
}).mouseout(function() {
doStart();
});
$(".pre").click(function() {
//让上一张淡出
imgOut(index);
index--;
if (index < 0) {
index = imgLength-1;
}
//让下一张淡入
imgIn(index);
});
$(".next").click(function() {
//让上一张淡出
imgOut(index);
index = ++index % imgLength;
//让下一张淡入
imgIn(index);
});
// 灰点事件
$("li").mouseover(function() { // 鼠标移入
dotIn(this);
}).mouseout(function() { // 鼠标移出
dotOut(this);
}).click(function() { // 单击
// 不同的灰点单击才变换
if (index != $(this).index()) {
imgOut(index); // 当前的淡出
index = $(this).index();
imgIn(index); // 小圆点对应的淡入
}
});
function imgIn(num) {
$("img").eq(num).animate({
"opacity": 1
}, 1000);
dotIn($("li").eq(num)); // 对应灰点亮起
}
// 图片淡出
function imgOut(num) {
$("img").eq(num).animate({
"opacity": 0
}, 1000);
dotOut($("li").eq(num)); // 对应灰点暗去
}
function dotIn(dot) {
$(dot).css({
"list-style": "disc"
});
}
function dotOut(dot) {
$(dot).css({
"list-style": "circle"
});
}
总结
通过这几天学习小项目，发现不知不觉有些样式竟然能自己默写出来，写不出来也大概知道需要用到哪些东西，一搜就解决了。这可能就是所谓的「熟能生巧」吧
如果你也正在学习前端，就动起手来吧，只有敲起代码，你才知道你有哪里不懂了。共勉。
你觉得这篇文章怎么样？
0
0
0
0
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 文武科技柜！
小红
感谢分享，赞一个