Web实训第二次

最新推荐文章于 2023-06-02 14:05:55 发布

是在为难我胖虎

最新推荐文章于 2023-06-02 14:05:55 发布

阅读量155

点赞数

文章标签：作业

本文链接：https://blog.csdn.net/weixin_44781460/article/details/88768261

版权

主要内容：导航栏（变换菜单，多级菜单）
复习js，html，还有css
2，jQuery基础：就是js框架，简单易用，代码最少。
作业要求：
导航栏
方法一：div方法的实现
完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

a{

color: #FFFF99;

text-decoration: none;

}

a:hover{

color: #FFFFFF;

text-decoration: underline;

}

#top{

padding: 10px 10px 0;

font-size: 12px;

font-weight: bold;

margin: 1px 0 0;

list-style: none;

border-bottom: 8px solid #DCE6F4;

overflow: hidden;

background-color: #33b5e5;

}

.top-nav{

float: left;

margin-right: 1px;

background-color: #333333;

position: relative;

width: 80px;

height: 20px;

text-align: center;

line-height: 20px;

}

.top-nav span{

position: absolute;

visibility: hidden;

}

.top-nav:hover span{

line-height: 20px;

background: #DDDDDD;

color: #666666;

display: block;

width: 80px;

text-align: center;

padding-top: 2px;

visibility: visible;

top:0;

left: 0;

color:#FFFFFF;

background:#DC4E1B;

}

</style>

</head>

<body>

<div id="top">

<div class="top-nav"><a href="123">首页<span class="span">Home</span></a></div>

<div class="top-nav"><a href="123">课堂大厅<span class="span">Course</span></a></div>

<div class="top-nav"><a href="123">学习中心<span class="span">Learn</span></a></div>

<div class="top-nav"><a href="123">关于我们<span class="span">About</span></a></div>

</body>

<html>

方法二：ul li方法的实现完整代码：

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
    <meta charset="UTF-8">
    
    <title>变换菜单</title>
    
    </head>

<style type="text/css">

a{

color: #FFFF99;

text-decoration: none;

}

a:hover{

color: #FFFFFF;

text-decoration: underline;

}

.top-nav{

padding: 10px 10px 0;

font-size: 12px;

font-weight: bold;

margin: 1px 0 0 0;

list-style: none;

border-bottom: 8px solid #DCE6F4;

overflow: hidden;

background-color: #33b5e5;

}

.top-nav li{

float: left;

margin-right: 1px;

}

.top-nav li a{

position: relative;

z-index: 0;

line-height: 20px;

text-decoration: none;

background: #DDDDDD;

color: #666666;

display: block;

width: 80px;

text-align: center;

}

.top-nav li a span{

position: absolute;

visibility: hidden;

}

.top-nav li a:hover span{

line-height: 20px;

text-decoration: none;

background: #DDDDDD;

color: #666666;

display: block;

width: 80px;

text-align: center;

padding-top: 2px;

visibility: visible;

top:0;

left: 0;

color:#FFFFFF;

background:#DC4E1B;

}

</style>

<body>

<div id="top">

<ul class="top-nav">

<li class="top-nav"><a href="#">首页<span>Home</span></a></li>

<li class="top-nav"><a href="#">课堂大厅<span>Course</span></a></li>

<li class="top-nav"><a href="#">学习中心<span>Learn</span></a></li>

<li class="top-nav"><a href="#">关于我们<span>About</span></a></li>

</ul>

</div>

</body>

</html>

首页Home
课堂大厅Course
学习中心Learn
关于我们About

效果图：在这里插入图片描述

是在为难我胖虎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web实训第二次

主要内容：导航栏（变换菜单，多级菜单）复习js，html，还有css2，jQuery基础：就是js框架，简单易用，代码最少。作业要求：导航栏方法一：div方法的实现完整代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Ti...
复制链接

扫一扫