TypechoJoeTheme

代码屋

统计
登录
用户名
密码
/
注册
用户名
邮箱

代码屋

拼一个春夏秋冬|赢一个无悔人生
类目归类
Web

网页布局-菜单导航(第二章)

2020-11-03
/
0 评论
/
281 阅读
/
正在检测是否收录...
11/03

网页布局菜单


Css代码

body{
                
                margin: auto;/*设置主体边距*/
            }
             .header {/*定义头样式名*/
              background-color: #f1f1f1;/*背景颜色*/
              padding: 20px;/*边距*/
              text-align: center;/*居中*/
            }
            /* 导航条 */
            .topnav {
              overflow: hidden;
              background-color: #333;
            }
            /* 导航链接 */
            .topnav a {
              float: left;
              display: block;
              color: #f2f2f2;
              text-align: center;
              padding: 14px 16px;
              text-decoration: none;
            }
             
            /* 链接 - 修改颜色 */
            .topnav a:hover {
              background-color: #ddd;
              color: black;
            }

HTML代码

<div class="header">
      <h1>头部区域</h1>
    </div>
    <div class="topnav">
      <a href="https://daimawu.top">首页</a>
      <a href="https://daimawu.top">相册</a>
      <a href="https://daimawu.top">留言</a>
    </div>

效果图

菜单导航
朗读
赞 · 0
赞赏
感谢您的支持,我会继续努力哒!

三合一收款

下面三种方式都支持哦

微信
QQ
支付宝
打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦
版权属于:

代码屋

本文链接:

https://daimawu.top/Web/1-3-2.html(转载时请注明本文出处及文章链接)

评论 (0)