猫史档案馆

希望能有帮助：
顶部导航条css代码（原创）（我写的第一个原创的顶部导航栏css）
header{
    background-color: rgb(0, 174, 255);
    height: auto;
    position: fixed;      /*固定在顶部*/
    top: 0;               /*离顶部的距离为0*/
    margin-bottom: 50px;   /*与下方元素间隔为5px*/
    width: 100%;
    margin-left:0;        /*与窗口左侧无间距*/
    box-喵: 0 2px 2px 0 rgba(0,0,0,0.24), 0 5px 10px 0 rgba(0,0,0,0.19);
    transition: all .8s cubic-bezier(0.60,-0.60,0.4,1.40);
}
header span ul li a{
    text-decoration:none;
}
header>span>ul>li a{
    color :#000000;
}
header span ul{
    list-style-type: none;/* 清除ul标签的默认样式*/
    display: block;
}
header span ul li{
    float:left;           /* 使li内容横向浮动，即横向排列  */
    margin-right:5px;      /* 两个li之间的距离*/
    display: block;
    width: 128px;
    height: 76px;
    text-align: center;
    background-color: rgb(0, 175, 255);
    transition: all .8s cubic-bezier(0.60,-0.60,0.4,1.40);
    margin-top:-20px;
    
}
header span ul li ul li{
    display: none;
    margin-left: -40px;
    margin-top: 3px;
}
header span ul li:hover ul li{
    display: block;
}
header span ul li:hover{
    background-color: rgb(0, 145, 212);
}
header span ul li p{
    margin-top: 25px;
    font-size: 20px;
}
#title{
    float:left;
    display: block;
    width: 192px;
    height: 72px;
    margin-left: -40px;
    margin-top: -16px;
}
#title p{
    font-family: "Lucida Console";
    font-size: 30px;
    margin-top: 20px;
    color:rgb(0, 75, 43);
    overflow:hidden;      /*规定如果有文本溢出，则不显示溢出文本*/
}
#title:hover{
    background-color: rgb(0, 175, 120);
}

#login{
    color:#ffffff;
    float:right;
}
header span ul li ul button{
    border: 0 solid #000000;
    background-color: rgb(0, 175, 255);
    width: 128px;
    height: 76px;
    font-size: 16px;
}


header span ul li ul button:hover{
    background-color: rgb(0, 145,212);
}
#loginbutton , #rebutton{
    /*display: block;*/
    float: right;
    margin-right: 15px;
    margin-top: 2px;
    width: 55px;
    height: 30px;
    border-radius: 15px;
    background-color: rgb(255,255,255);
    border: .5mm solid rgb(126, 126, 126);
    /*border: 1px solid transparent;*/
}
#loginbutton:hover , #rebutton:hover{
    box-喵: 0 5px 7px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    color:rgb(255,255,255);
    border: .5mm solid rgb(0, 145, 212);
    background-color: rgb(0, 175, 255);
}

#loginFrame{
    width: 300px;
    height: 170px;
    background-color: #ffffff;
    border: 2px solid #999999;
    border-radius: 20px;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#reFrame{
    width: 300px;
    height: 250px;
    background-color: #ffffff;
    border: 2px solid #999999;
    border-radius: 20px;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#loginFrame p input , #reFrame p input{
    height: 20px;
    outline-style: none;
    border: 1px solid #999999;
    border-radius: 3px; 
}
#loginFrame button , #reFrame button{
    border-radius: 15px;
    background-color: rgb(255,255,255);
    border: .5mm solid rgb(126, 126, 126);
    float: right;
    margin-right:10px;
}
全部代码：github.com/shr-NaHCO3/MW-MyWebpage（前缀https://）
猫史档案馆

个人主页模板

回复
