二级导航栏+轮播图

最新推荐文章于 2023-12-31 18:23:37 发布
最新推荐文章于 2023-12-31 18:23:37 发布
阅读量386 收藏 11
点赞数 9
文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54401521/article/details/135129236
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style type="text/css">

        *{

            margin: 0px; padding: 0px; box-sizing: border-box;

        }

        #menu{

            width: 1300px;

            height: 800px;

            margin: 0 auto;

        }

        #head{

            width: 1300px;

            height: 100px;

            text-align: center;

            font-size: 30px;

            color: red;

        }

        #nav{

            width: 1300px;

            height: 200px;

            z-index:9999;

            position:relative;

        }

        #ul1 li{

            width: 325px;

            height: 50px;

            float: left;

            display: inline;

            list-style: none;

        }

        #ul2 li{

            width: 325px;

            height: 50px;

            list-style: none;

            text-align: center;

        }

        #ul1 a{

            width: 100%;

            margin: 0;

            text-align: center;

            font-size: 25px;

            text-decoration: none;

            display: block;

            line-height: 50px;

            background: gray;

        }

        #ul1 a:hover{

            background: red;

        }

        #ul2 a:hover{

            background: blue;

        }

        #ul2 a{

            width: 100%;

            margin: 0;

            text-align: center;

            font-size: 22px;

            text-decoration: none;

            display: block;

            line-height: 40px;

            background: white;

        }

        #ul2{

            visibility: hidden;

        }

        #ul1 li:hover #ul2{

            visibility: visible;

        }

        .imgBox{

            width: 1300px;

            height: 400px;

            margin: 0 auto;

            position: relative;

            text-align: center;

            z-index:0;

        }

        .box{

            list-style: none;

        }

        .box li img{

            width: 1300px;

            height: 320px;

            margin: 0 auto;

        }

        .img1{

            display: block;

        }

        .img2,.img3,.img4{

            display: none;

        }

        #circlebutton{

            position: absolute;

            bottom: 20px;

            left: 500px;

            text-align: center;

            list-style: none;

        }

        #circlebutton li{

            float: left;

            margin-left: 20px;

        }

        #circlebutton li div{

            width: 20px;

            height: 20px;

            background: #dddddd;

            border-radius: 10px;

            text-align: center;

            vertical-align: middle;

            cursor: pointer;

        }

       #foot{

        width: 1300px;

        height: 200px;

        text-align: center;

        background: white;

       }

       

    </style>

</head>

<body>

    <div id="menu">

        <div id="head">

            <h1 class="logo">商丘<span>大学</span></h1>

        </div>

        <div id="nav">

            <ul id="ul1">

                <li><a href="">学院概况</a>

                    <ul id="ul2">

                        <li><a href="">学校章程</a></li>

                        <li><a href="">学校领导</a></li>

                        <li><a href="">师校园文化</a></li>

                    </ul>

                </li>

                <li><a href="">学术研究</a>

                    <ul id="ul2">

                        <li><a href="">研讨会</a></li>

                        <li><a href="">研学交流</a></li>

                        <li><a href="">科研活动</a></li>

                    </ul>

                </li>

                <li><a href="">人才培养</a>

                    <ul id="ul2">

                        <li><a href="">本科教育</a></li>

                        <li><a href="">硕士培养</a></li>

                        <li><a href="">博士培养</a></li>

                    </ul>

                </li>

                <li><a href="">登录</a></li>

            </ul>

        </div>

        <div class="imgbox">

            <ul class="box">

                <li><img class="img-slide img1" src="images/1.jpg"></li>

                <li><img class="img-slide img2" src="images/2.jpg"></li>

                <li><img class="img-slide img3" src="images/3.jpg"></li>

                <li><img class="img-slide img4" src="images/4.jpg"></li>

            </ul>

        </div>

        <ul id="circlebutton">

            <li><div class="divEle" style="background: pink;">1</div></li>

            <li><div class="divEle">2</div></li>

            <li><div class="divEle">3</div></li>

            <li><div class="divEle">4</div></li>

            <li><div class="divEle">5</div></li>

        </ul>

        <script>

            var index=0;

            var divCon=document.getElementsByClassName("divEle");//获取所有圆点

            var imgEle=document.getElementsByClassName("img-slide");//获取所有图像

            function autochangeImg(){

                index++;

                changeImg();

            }

            var change1=setInterval(autochangeImg,3000);

           function changeImg(){

            if(index>=imgEle.length){

                index=0;

            }

            for(var i=0;i<imgEle.length;i++){

                imgEle[i].style.display='none';

                divCon[i].style.background="#dddddd";

   

            }

            imgEle[index].style.display='block';

            divCon[index].style.background='#ff0000';

           }

        </script>

    </div>

    <div id="foot">

        <div id="a">

          <span>地址:河南省商丘市</span><br>

        </div>

        <span>网站设计制作</span>

        <span>党委宣传部</span>

        <br>

        <span>2023 © 商丘大学 版权所有 网站:www.sqdx.com</span>

        </div>

  </div>

</body>

</html>

大少爷的枪
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue - [完整源码] 实现分类菜单 + 轮播图组合布局效果，类似左侧菜单与右侧轮播图连接在一起的效果（当鼠标移入菜单时，侧边出现子菜单列表）常见于商城系统，示例代码注释详细开箱即用！
王佳斌
04-20 2530
vue左侧菜单分类盖在右侧轮播图之上的效果，vue css实现分类菜单+轮播图合在一起效果，vue仿小米商城的导航及轮播图拼在一起的效果，vue nuxt 左侧分类菜单右侧轮播图的组合布局，css 实现左边菜单分类右边轮播图，vue css 左侧分类导航菜单和右侧图片轮播滚动布局代码，vue css实现带二级菜单的图片轮播动画，vue css如何实现垂直菜单,鼠标移入后出现二级菜单，vue有没有左侧是垂直菜单(鼠标移入后出现二级菜单)右侧是图片轮播图带左右箭头，vue css 左侧菜单分类与右侧轮播图盖在一
Android底部导航栏加图片轮播功能实现
11-30
Android底部导航栏加图片轮播功能实现 ， Android底部导航栏加图片轮播功能实现 ，Android底部导航栏加图片轮播功能实现
网站导航条+轮播图
m0_64081550的博客
01-06 1432
css <style> * {margin: 0;padding: 0;} ul {list-style: none;} a {text-decoration: none; color:#333;} .clearfix::after { content: ''; display: block; clear:both; } body { overflow: auto; font-size:14px; } header { width: 100%; height: 55px;
二级菜单结合图片轮播小Demo
08-07
该资源适合刚接触前端开发的小伙伴来参考，用最基本的js ,div和css的基础知识实现了一个图片轮播与二级菜单相结合的小Demo.
JS实现轮播图特效（带二级导航）
qq_35382207的博客
08-17 476
按照国际惯例先放效果图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class...
HTML/CSS/JS实现二级菜单导航+轮播图
轻风起自远东
02-05 1万+
学习了HTML、CSS和JavaScript后，总得做点东西练练手，于是干脆跟着效果做了个类似于慕课网的轮播效果，配上一个二级菜单导航，具体效果如下： 首先来说说这个项目中用的比较多的知识点： CSS定位——绝对定位和相对定位的搭配使用，用的非常多 JavaScript——实现三秒换图、按下按钮换图、按下小圆点换图、鼠标移动到主菜单上即显示二级菜单等功能 div块标签 首先是整个页面
二级导航栏被轮播图遮挡问题
loneless_stars的博客
06-30 1830
二级导航栏被轮播图遮挡问题
html中轮播把导航栏挡住了,导航栏的二级菜单下拉的时候怎样设置才能置于别的div之上？？...
weixin_32480781的博客
06-09 1754
//轮播图片//JavaScriptDocumentwindow.onload=function(){varcontainer=document.getElementById('container');varlist=document.getElementById('list');varbuttons=document.getElementById('buttons'...
纯JS实现带二级菜单的图片轮播动画
04-16
解压密码：RJ4587 之前我们分享过很多基于jQuery的图片轮播动画，确实用jQuery插件可以非常方便的实现图片滑块和轮播，但是如果...它采用纯JS代码实现，并且功能上也比较强大，左侧带有二级菜单栏，还是比较实用的。
html 轮播图+二级菜单制作
LL__Sunny的博客
12-05 4458
1.html 轮播图+二级菜单制作 2.用z-index属性解决二级菜单被图片遮盖
JavaScript实现轮播特效 + 二级菜单效果（代码）
10-01
JavaScript实现轮播特效 + 二级菜单效果（代码），资源整全。 - Lux_Sun CSDN Blog：https://blog.csdn.net/Dream_Weave
pc端-轮播图 和 二级菜单
李小狮
03-21 668
本篇目录轮播图加二级菜单 轮播图加二级菜单 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: ...
导航菜单和轮播图互动控制html页面源码
mazai5080的博客
05-08 948
本源码编码：10157，需要的朋友，点击下面的链接后，搜索10157，即可获取。
【HTML+CSS+jQuery】实现轮播图详细代码及详解（带左右切换和分页）
TechnicalXiaobai的博客
07-16 3313
创建了图片对应的圆点导航按钮，并为每个按钮绑定了点击事件，点击按钮时通过。事件来在鼠标悬停在轮播容器上时停止自动轮播，离开时重新开始自动轮播。方法，在图片列表的首尾分别插入了复制的图片，实现无缝轮播的效果。创建了左右切换按钮，并为其绑定了点击事件，通过点击按钮来切换图片。实现自动轮播功能，每隔3000毫秒（3秒）切换到下一张图片。函数来处理图片的动画滑动，实现了无缝轮播的效果。函数来切换图片，并高亮显示对应的按钮。来实现左右切换和图片对应的圆点导航。容器来包裹轮播图片，使用。在图片初始化时，使用了。
web网页设计—— 指环王：护戒使者(13页) 电影网页设计 在线电影制作 个人设计web前端大作业
最新发布
wx___BJ050106的博客
12-31 402
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2092
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
网页轮播图制作（html+css+js）
热门推荐
qq_53767416的博客
10-03 2万+
运用html+css+js实现网络轮播图效果
纯css实现导航栏滚动
睡觉不打呼噜的博客
06-15 1381
效果图 描述一下： 我们在做导航栏时，导航项有很多，父容器容不了会导航换行显示，很不好。 写js计算父容器总宽度要容得下所有导航项又不会(假设不会)，怎么处理。 用css解决，往下看： 大容器div：设置横向超出滚动 纵向超出隐藏 有默认滚动条不好看也隐藏算了 导航容器ul：不设宽度，设置内容超出不换行 导航项li：设置display:inline-block; 结构如下： <div id="div"> <ul> <li>导航1</li>
CSS实现导航栏底部动态滚动条效果
weixin_30861459的博客
08-13 795
预习了CSS3部分的新知识，想着在不使用JS的情况下实现导航栏滚动条效果，如下： 实现滚动条效果，其实就是在<li></li>标签中让<span>元素的宽度由0变化到100%，代码很简单，如下所示： CSS样式部分： <style> ul.nav{background-color: whitesmoke;}...
水平导航栏及轮播图网页设计
06-09
5. 可扩展性：考虑到网站的扩展性，导航栏应该可以容纳更多的选项，可以考虑设计下拉菜单或二级导航。 轮播图设计： 1. 吸引眼球：轮播图是网站首页的重要元素之一，需要设计出吸引人眼球的图片和文案。 2. 布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值