[HTML/CSS/JS]作品案例--笔记1

news2024/11/23 15:06:26

 一、头部导航栏代码

html代码

<!-- 第一部分 导航栏 登录 注册 卡片点击 切换   -->
    <div class="nav-containers">
        <ul class="ul-one">
            <li class="li-one color-white">
                首页
            </li>
            <li class="li-one">
                古诗练习
                <ul class="ul-two">
                    <li class="li-two">
                        <a href="./texstPaper.html">出古诗题</a>
                    </li>
                    <li class="li-two">
                        <a href="./exam.html">练习古诗</a>
                    </li>
                </ul>
            </li>
            <li class="li-one">
                诗歌
                <ul class="ul-two">
                    <li class="li-two">
                        <a href="./study.html">诗歌视频</a>
                    </li>
                    <li class="li-two">
                        <a href="./text2.html">诗歌</a>
                    </li>
                </ul>
            </li>
            <li class="li-one">
                教育
                <ul class="ul-two">
                    <li class="li-two">
                        <a href="./text.html">互动</a>
                    </li>

                </ul>
            </li>
            <li class="li-one">
                导航1
                <ul class="ul-two">
                    <li class="li-two">
                        导航2
                    </li>
                    <li class="li-two">
                        导航2
                    </li>
                    <li class="li-two">
                        导航2
                    </li>

                </ul>
            </li>
            <li class="li-one">
                导航1
                <ul class="ul-two">
                    <li class="li-two">
                        导航2
                    </li>
                    <li class="li-two">
                        导航2
                    </li>
                    <li class="li-two">
                        导航2
                    </li>

                </ul>
            </li>
            <li class="li-one">
                登录|注册
                <ul class="ul-two">
                    <li class="li-two">
                        <span onclick="showDialog('.login-containers',true), showDialog('.hot-x', false)">
                            登录
                        </span>
                    </li>
                    <li class="li-two">
                        <span onclick="showDialog('.logon-containers',true), showDialog('.hot-x', false)">
                            注册
                        </span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

js代码

 // 导航栏
        $('.li-one').hover(function () {
            //stop()立即停止动画
            $(this).children().stop().slideToggle();
        });

部分css代码

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
li{
    cursor: pointer;
}
a{
    text-decoration: none;
    color: #FFFFFF;
}
.color-white{
    color: #FFFFFF!important;
    background-color:rgba(0, 0, 0, 0.8);
}
/* 导航栏部分 */
.nav-containers{
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    background-color:rgba(0, 0, 0, 0.5);
    color: #FFFFFF80;
    font-family: 微软雅黑,'Heiti SC',黑体,Arial;
    z-index: 20;
}
.nav-containers ul{
    background-color:rgba(0, 0, 0, 0.6);
}
.nav-containers li{
    width: 180px;
    height: 60px;
    text-align: center;
    line-height: 60px;  
}
.nav-containers li:hover{
    background-color:rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
}
.ul-one{
    width: 1260px;
    display: flex;
    z-index: 10;
    
}
.ul-two{
    display: none;
}

二、自动轮播图

html代码

<!-- 第二部分 图片轮播器-->
    <div class="two_content">
        <div class="left_remove "></div>
        <div class="right_remove"></div>
        <div class="bigimages">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/08/31/s630ec3a73e553.jpg" alt="" data="0">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/09/28/s63340e337270c.jpg" alt="" data="1">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/11/29/s63859d939961e.jpg" alt="" data="2">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/11/29/s6385b09f3f21f.jpg" alt="" data="3">
        </div>
        <div class="bigimg_prompt">
            <div class="bigimg_prompt_img "></div>
            <div class="bigimg_prompt_img "></div>
            <div class="bigimg_prompt_img "></div>
            <div class="bigimg_prompt_img "></div>
        </div>
    </div>

js代码

//轮播图
        var timeIn = setInterval(carousel, 1000 * 4)
        var bigImgPromptImg = $('.bigimg_prompt_img ')
        var bigImages = $('.bigimages');
        var images = $('.bigimages img');
        var index = 0
        //轮播样式变化
        function styleBanner() {
            images.eq(index).show()
            images.eq(index).siblings().hide()
            bigImgPromptImg.eq(index).css("backgroundColor", "#FFFFFF");
            bigImgPromptImg.eq(index).siblings().css("backgroundColor", "rgba(0, 0, 0, 0.3)");
        }
        //自动轮播
        function carousel() {
            index++
            if (index > 3) {
                index = 0
            }
            styleBanner()

        }
        //鼠标悬浮停止轮播
        var twoContent = $('.two_content')
        var rightRemove = $('.right_remove')
        var leftRemove = $('.left_remove')
        twoContent.mouseover(function () {
            clearInterval(timeIn)
            rightRemove.css({
                right: "100px"
            })
            leftRemove.css({
                left: "100px"
            })
        })
        twoContent.mouseout(function () {
            timeIn = setInterval(carousel, 1000 * 3)
            rightRemove.css({
                right: "-60px"
            })
            leftRemove.css({
                left: "-60px"
            })
        });
        //点击底下长条实现切换
        bigImgPromptImg.click(function () {
            index = $(this).index();
            styleBanner()

        })
        //向右移
        rightRemove.click(function () {
            index++;
            if (index > 3) {
                index = 0
            }
            styleBanner()

        })
        //向左移
        leftRemove.click(function () {
            index--;
            if (index < 0) {
                index = 3
            }
            styleBanner()

        })

css代码

/* 轮播图部分 */
.two_content {
    width: 100%;
    height: 490px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

.bigimages {
    width: 10000px;
    height: 500px;
    z-index: 1;
    position: relative;

}

.bigimages img {
    width: 1536px;
    height: 482px;
}

.bigimages :nth-child(1) {
    z-index: 10;
}

.right_remove {
    width: 60px;
    height: 60px;
    background-image: url('./../images/right_tb.png');
    position: absolute;
    opacity: 0.5;
    right: -60px;
    top: 250px;
    z-index: 10;
    transition: 1s;
}

.right_remove:hover {
    opacity: 1;
}

.left_remove {
    width: 60px;
    height: 60px;
    background-image: url('./../images/left_tb.png');
    position: absolute;
    opacity: 0.5;
    left: -60px;
    top: 250px;
    z-index: 10;
    transition: 1s;

}

.left_remove:hover {
    opacity: 1;
}

.bigimg_prompt {
    width: 200px;
    height: 18px;
    position: absolute;
    bottom: 20px;
    left: 700px;
    display: flex;
    justify-content: space-around;
    z-index: 10;
}

.bigimg_prompt div {
    width: 45px;
    height: 5px;
    border-radius: 5px;
}

.bigimg_prompt div:nth-child(1) {

    background-color: #FFFFFF;
}

.bigimg_prompt div:nth-child(n+2) {
    background-color: rgba(0, 0, 0, 0.3);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/672104.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

下峰锁定,行情未尽,筹码峰真的不会骗人吗?

在学习筹码分布的时候&#xff0c;经常可以看到这样的顺口溜&#xff1a;“上峰不死&#xff0c;下跌不止&#xff1b;下峰锁定&#xff0c;行情未尽”。简单解释一下就是&#xff1a;下跌行情中&#xff0c;如果上密集峰未被充分消耗&#xff0c;那么就没有新的行情产生&#…

【Unity3D】雾效

1 前言 屏幕深度和法线纹理简介中对深度和法线纹理的来源、使用及推导过程进行了讲解&#xff0c;激光雷达特效中讲述了一种重构屏幕像素点世界坐标的方法&#xff0c;本文将介绍使用深度纹理重构屏幕像素点在相机坐标系下的坐标计算方法&#xff0c;并使用重构后的坐标模拟雾…

EventBus

EventBus 文章目录 EventBus1.EventBus的作用2.关于EventBus的概述3.EventBus的使用方法4.EventBus的黏性事件5.EventBus的源码EventBus的构造方法getDefault()源码EventBus()源码 订阅者注册register()源码findSubscriberMethods()源码findUsingInfo()源码findUsingReflection…

TCP的三次握手与四次挥手

TCP的三次握手与四次挥手 1.网络分层 网络分层代表硬件协议/技术特性应用层HTTP,DNS,FTP,SMTP,Telnet协议等应用程序实现的,规定应用程序的数据格式传输层TCP/UDP协议负责两主机之间的数据正确传输主机系统内核实现的网络层路由器IP协议负责地址管理和路由选择(确定对应主机)…

合宙Air724UG Cat.1模块硬件设计指南--SDIO接口

SDIO接口 简介 SDIO(Secure Digital Input and Output)全称为安全数字输入输出接口&#xff0c;在协议上和SPI类似是一种串行的硬件接口&#xff0c;通信的双方一个作为HOST&#xff0c;另一端是Device&#xff0c;所有的通信都是由HOST端发送命令开始的&#xff0c;Device端只…

SpringCloud Alibaba入门3之nacos服务搭建

在前一章的基础上开发:SpringCloud Alibaba入门之用户子模块开发_qinxun2008081的博客-CSDN博客 一、下载nacos-server 从https://github.com/alibaba/nacos/releasesopen in new window 下载nacos-server发行版。 二、启动nacos 进入%path%\nacos\bin文件夹,执行cmd命令st…

阿里组织变革新阶段:蓄力拉弓,一箭向前

自3月28日宣布“16N”分拆、5月18日宣布分业务启动独立融资或上市计划以来&#xff0c;阿里持续推动着这场史无前例的组织变革落地&#xff0c;谋求更高质量发展。 6月20日&#xff0c;阿里巴巴控股集团董事会主席兼CEO张勇通过全员信宣布&#xff0c;他将于今年9月10日卸任现…

[进阶]网络通信:端口和协议

端口 标记正在计算机设备上运行的应用程序的&#xff0c;被规定为一个 16位的二进制&#xff0c;范围是 0~65535。 分类 周知端口&#xff1a;0~1023&#xff0c;被预先定义的知名应用占用&#xff08;如&#xff1a;HTTP占用 80&#xff0c;FTP占用21&#xff09;注册端口&…

java中抽象类和抽象方法

文章目录 前言 一、抽象类和抽象方法是什么&#xff1f; 1.抽象类 2.抽象方法 二、使用方法 1.实操展示 2.注意事项 总结 前言 苹果这个具体的水果&#xff0c;它具有的属性为&#xff0c;红色&#xff1b;它具有的方法为&#xff0c;被啃。那么&#xff0c;水果&#…

system Verilog 验证测试平台编写指南——读书笔记(持续更新)

第一章 验证导论 1、基本测试平台的功能 测试平台的用途在于确定待测设计的正确性。包含下列步骤&#xff1a; &#xff08;1&#xff09;产生激励。 &#xff08;2&#xff09;把激励施加到DUT上. &#xff08;3&#xff09;捕捉响应。 &#xff08;4&#xff09;检验正…

【Visual Studio】开发 Qt 时右键没有自动添加 slots 槽的功能,使用 C++ 语言,配合 Qt 开发串口通信界面

知识不是单独的&#xff0c;一定是成体系的。更多我的个人总结和相关经验可查阅这个专栏&#xff1a;Visual Studio。 文章目录 Ref. 基于 Visual Studio 环境下使用 Qt&#xff0c;发现右键没有自动添加槽的功能&#xff0c;需要自己想办法。我看网上介绍了不止一种方法&#…

Micrometer实战

Micrometer 为基于 JVM 的应用程序的性能监测数据收集提供了一个通用的 API&#xff0c;支持多种度量指标类型&#xff0c;这些指标可以用于观察、警报以及对应用程序当前状态做出响应。 前言 可接入监控系统 监控系统的三个重要特征&#xff1a; 维度&#xff08;Dimensio…

事务的历史与SSI——PostgreSQL数据库技术峰会成都站分享

前言 PostgreSQL数据库技术峰会成都站 近期&#xff08;2023年6月17日&#xff09;&#xff0c;由中国开源软件推进联盟PG分会发起的“PostgreSQL数据库技术峰会成都站”圆满举行。我也有幸作为演讲嘉宾参加了此次峰会&#xff0c;收获很多。 &#xff08;分会回顾和所有pp…

Qt编写监控实时显示和取流回放工具(回放支持切换进度)

一、前言 现在各个监控大厂做的设备&#xff0c;基本上都会支持通过rtsp直接取流显示&#xff0c;而且做的比较好的还支持通过rtsp回放取流&#xff0c;基本上都会约定一个字符串的规则&#xff0c;每个厂家都是不一样的规则&#xff0c;比如回放对应的rtsp地址还要带上时间范…

Java8 List集合如何指定打印分隔符

目录 背景方法一&#xff1a;String.join&#xff08;推荐&#xff09;方法二&#xff1a;Collectors.joining总结 背景 无论是在学习还是日常的应用开发过程中&#xff0c;我们经常会需要使用分隔符将 List 集合打印出来。 如下所示&#xff1a; import java.util.Arrays;pub…

数据结构与算法基础(青岛大学-王卓)(5)

叮叮咚咚&#xff0c;新一期来袭&#xff0c;我还在吃桃子&#xff0c;吃桃子&#xff0c;吃桃子。。。串和python的字符串差不多,数组和广义表像是python的list 文章目录 串(string) - 字符串概念及术语串的类型定义存储结构&#xff08;同线性表&#xff09;串的模式匹配算法…

leetcode46. 全排列(回溯算法-java)

全排列 leetcode46. 全排列题目描述解题思路代码演示 回溯算法专题 leetcode46. 全排列 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/permutations 题目描述 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有…

关于平差中误差方程 v=Bx-l 的探讨

文章目录 Part.I IntroductionPart.II 误差方程的探讨Chap.I 符号表示Chap.II 误差方程的含义Chap.III 误差方程的其他形式Chap.IV 平差的大致流程 Part.III 误差方程的表示形式 Part.I Introduction 在平时阅读文献或者整理笔记时&#xff0c;经常会看到各种各样的有关误差方…

Git安装详细教程(win11)

Git安装详细教程&#xff08;win11&#xff09; 一、下载二、安装三、配置 一、下载 官网下载&#xff1a;点击下载 网盘下载&#xff1a;点击下载 二、安装 双击程序运行&#xff0c;点击next 选择安装路径&#xff0c;我安装在了D盘&#xff0c;如下图所示&#xff0c;…

Server - 测试 GPU 的显卡使用率与张量之间的关系

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131331049 NVIDIA A100 是一款基于 Ampere 架构的高性能 GPU&#xff0c;专为 AI、数据分析和高性能计算等应用场景设计。NVIDIA A100 具…