简单易懂的标签栏

最新推荐文章于 2024-10-29 14:54:04 发布

weixin_62480477

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量695

点赞数

分类专栏：标签栏 JavaScript 文章标签： css html5

本文链接：https://blog.csdn.net/weixin_62480477/article/details/123873217

版权

JavaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

标签栏

1 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
   <body>
       <script>
               var userName = prompt("请输入用户名");
               var passWord = prompt("请输入密码");
               if(userName =='admin' && passWord =='123456'){
                   alert('登录成功')
               }
               else{

                   alert('用户名或密码输入错误')
               }
           </script>
       <ul>
       <li><a href="猜数字游戏.html">猜数字游戏</a></li>
       <li><a href="圆.html">计算圆的周长与面积</a></li>
       <li><a href="计算油价.html">计算油价</a></li>
       <li><a href="计算年龄.html">计算年龄</a></li>
       </ul>
       <div class="footer">
       <p>Copyright © 计算机三班;吕秋旭作品
       <br>建议使用IE9以上的浏览器
       </p>
       </div>
   </body>
</html>

css部分

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
background-color: #555;
color: white;
}
.footer {
width: 100%;
height: 70px;
background-color: #A9A9A9;
text-align: center;
}

.footer p {
padding-top: 20px;
}