Web开发技术-----导航条

nüenüe280

已于 2024-07-10 21:19:08 修改

阅读量104

点赞数 3

文章标签：前端

于 2024-06-13 20:12:17 首次发布

本文链接：https://blog.csdn.net/weixin_62115318/article/details/139663293

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="daohangtiao.aspx.cs" Inherits="Login.daohangtiao" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>导航条</title>

    <style>
        *{
            list-style-type:none;
            padding:0;
            margin:0;
        }
        /*导航条样式*/
        nav{
            background-color:#ff9fc7;
            width:1200px; 
            margin:20px auto;
        }

        nav ul{
            display:flex;
            justify-content:center;
            align-items:center;
        }

        nav ul li{
            margin:0 10px;
        }

        nav ul li a{
            text-decoration:none;
            color:black;
            padding:15px;
            display:block;
            position:relative;
            transition:color 0.3s;
            
        }

        /*横线动画*/
        nav ul li a::after{
            content:'';
            position:absolute;
            width:0;
            height:2px;
            background-color:#ff1576;
            right:0;
            bottom:0;
            transition:width 0.3s ease;
        }

        /*鼠标悬停效果*/
        nav ul li a:hover{
            /*background-color:#d62f75;*/
            color:white;
            /*border-radius:5px;*/
        }

        nav ul lia a hover::after{
            width:100%;
            right:auto;
            left:0;
        }

        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center; /* 将body设为flex容器并居中其直接子元素 */
            min-height: 30vh; /* 确保body高度至少为视窗高度，有助于整体布局 */
            align-items: center; /* 如果希望垂直居中的话，可以添加此行 */
}
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <nav>
            <ul>
            <li><a href ="#">Home</a></li>
            <li><a href ="#">About</a></li>
            <li><a href ="#">News</a></li>
            <li><a href ="#">Products</a></li>
            <li><a href ="#">Services</a></li>
            <li><a href ="#">Clients</a></li>
            <li><a href ="#">Blog</a></li>
            <li><a href ="#">Link</a></li>
            </ul>
        </nav>
    </form>
</body>
</html>