HTML:1分钟实现简单网站导航栏

hello,大家好,我是wangzirui32,今天我们来学习如何实现简单网站首页。
开始学习吧!

网站首页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wangzirui32的首页</title>
    <!-- CSS层叠样式表导入 -->
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
  <header><!-- header标签一般用于网站导航栏  -->
      <div class="logo">
          <!-- 网站LOGO导入 -->
          <!-- logo根据你的需要选择路径 -->
          <img src="img/logo.bmp"/>
      </div>
      <ul>
          <!-- href链接自己添加修改 -->
          <li><a href="">首页</a></li>
          <li><a href="">产品</a></li>
          <li><a href="">论坛</a></li>
          <li><a href="">选购</a></li>
          <li><a href="">登录</a></li>
      </ul>
  </header>
</body>
</html>

html代码好了,现在得编写亿下CSS样式表了。

CSS样式表代码

为了你能更好的理解,我添加了亿些注释:

header {
    
    
    background-color: cyan; /* 背景颜色cyan */
    height: 70px;  /* 宽度为80px */
    display: flex; /* 将元素放置在容器中心 */
}

header ul li {
    
    
    float:left; /* li标签靠左 */
    color:#fff; /* 颜色设置 */
    margin:5px 10px; /* 5px是每2个li标签的距离  10px是li标签离logo的距离 */
    list-style: none; /* 取消li标签的圆点 */
}

效果展示

效果展示:(可能有亿点丑,但也真不戳)展示


好了,这就是今天的全部内容,喜欢的可以点个赞和收藏,再见!

猜你喜欢

转载自blog.csdn.net/wangzirui32/article/details/115283946
今日推荐