07-简易版新浪导航栏(盒子模型)

Myth丶恋晨 2022-09-12 13:54 137阅读 0赞

1.布局一个大盒子  
2.设置盒子的大小,边框,行内距,内容

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>新浪导航栏</title>
        <style>
          /* 布局一个大盒子 */
          .nav {
          
            /* 设置边框 */
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            height: 41px;
            background-color: #fcfcfc;
            /* 为了字体居中,设置行高和盒子高度一样 */
            line-height: 41px;
          }
          .nav a {
          
            text-decoration: none;
            /* 行内元素没有高,转变成行内块元素 */
            display: inline-block;
            /* 这里行内距设置左右就可以了,但是复合书写必须给上下行内距设置一个值 */
            padding: 0 20px;
            height: 41px;
            font-size: 14px;
            color: #4c4c4c;
          }
          .nav a:hover {
          
            background-color: #eee;
            color: #ff8500;
          }
        </style>
      </head>
      <body>
        <div class="nav">
          <a href="#">设置首页</a>
          <a href="#">手机新浪网</a>
          <a href="#">移动客户端</a>
          <a href="#">
            <select>
              <option>登陆</option>
              <option>QQ登陆</option>
              <option>手机号码登陆</option>
              <option>微信登陆</option>
            </select></a
          >
          <a href="#">微博</a>
        </div>
      </body>
    </html>

![在这里插入图片描述][14ddfba158c74cd5beb21f16321452fa.jpg_pic_center]

[14ddfba158c74cd5beb21f16321452fa.jpg_pic_center]: /images/20220828/5c618422ad99417488e9f4bb3cd6a452.png