老八生煎静态网页（html+css）

最新推荐文章于 2024-09-29 21:55:22 发布

海76

最新推荐文章于 2024-09-29 21:55:22 发布

阅读量296

点赞数 1

分类专栏：网页文章标签： vscode html css

本文链接：https://blog.csdn.net/weixin_56017875/article/details/119283053

版权

网页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：

部分html

 <!--  header 部分 -->
       <header id="header">
           <div class="header-con">
               <div class="header-logo">logo</div>
               <div class="nav">
                   <ul>
                       <li><a href="#header" id="nav-col">首页</a></li>
                       <li><a href="#op">老八食谱</a></li>
                       <li><a href="#op2">老八每日推荐</a></li>
                       <li><a href="#op3">联系老八</a></li>
                       <li><a href="#op4">老八在哪</a></li>
                       <li class="box"><a href="#" id="nav-box">Good</a>
                           <div class="nav-box-x">
                               <a href="#">证明是个</a>
                               <a href="#">下拉菜单</a>
                               <a href="#">而已！</a>
                           </div>
                    </li>
                   </ul>
               </div>
           </div>
       </header>
       <!--  header 部分  END-->

部分css

/* header  begin*/
#header {
    display: flex;
    align-items: center;
    height: 90px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background: #3ad3e7;
}

.header-con {
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    text-align: center;
    margin-left: 200px;
}

.header-logo {
    float: left;
    padding-right: 20%;
}

.nav ul {
    display: flex;
    gap: 65px;
    align-items: center;
    justify-content: flex-end;
    font-size: 18px;
}

.nav ul li a {
    text-decoration: none;
    color: #000000;
}
#nav-col{
    color: red;
}
#nav-col:hover{
    border-bottom: 2px solid #000000;
}
#nav-box{
    background: red;
    border-radius: 7px;
    color: white;
}
.nav ul li a:hover{
    color: rgb(231, 217, 86);
}
/* header end */

源码

链接：https://pan.baidu.com/s/1gm96mD7QENirobxkHN8vWQ
提取码：1v91