HTML+CSS 实现顶部导航栏菜单制作

导航栏的制作:

技术要求:

  • CSS
  • HTML各类标签

实现目的:

制作导航栏菜单

代码分析:

  • 基本样式清除
  • 无序列原点删除
  • 下划线删除
  • 文字默认居中
  • a标签设置块级元素
  • 伪类选择器对a状态修饰

分步实现:

分三栏布局:使用浮动

logo一栏;选择栏一栏;搜索栏一栏

logo部分:

img标签,导入图片,a标签超链接 ,img导入图片,防止图片失真width和height设置一个就可以了

<div class="logo">
              <a href="#">
                  <img src="D:惠州客家面.jpg"/>

是不是感觉不够美观,我们使用CSS试试看吧!

CSS代码:

删除a标签下划线,删除li无序列原点,在一行上显示。

.header{
    width: 100%;
    height: 100px;
    background-color: rgb(207, 238, 238);
    position: relative;
}

.container{
    width: 1226px;
    height: 20px;
    margin: 0 auto;
}

.header .logo{
    float: left;
    margin-top: 25px;
}

.logo a{
    display: block;
    width: 150px;
    height: 150px;
}

.header .list{
    float: left;
    width: 820px;
    height: 88px;
    padding: 12px 0 0 30px;
}

clearfix::after{
    content: '';
    clear: both;
    display: block;
}

a{
    text-decoration: none;
}

.header li{
    float: left;
    list-style: none;
}

.list li{
    padding: 28px 10px 38px ;
    display: block;
    color: rgb(68, 57, 5);
}

 .search{
    float: right;
    width: 296px;
    margin-top: 10px;
    position: absolute;
    top: 28px;
    right: 53px;
}
.search form{
    height: 50px;
    width: 296px;
} 

 .content1{
     display: block;
    width: 223px;
    height: 48px;
    border: 1px solid #e0e0e0;
    padding: 0 10px;
    float:right;
    
}

.search1{
    width: 49px;
    height: 49px;
    float: right;
} 

.list li:hover{
    color: rgb(168, 81, 81);
    font-size: larger;
}

使用外部式引入:

<link rel="stylesheet" href="惠州客家面.css">

最后梳理一下:

创建一个HTML文件,输入以下代码

<!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">
  <link rel="stylesheet" href="惠州客家面.css">
  <title>惠州客家面</title>
</head>
<body>
  <div class="header">
      <div class="container" clearfix>
          <div class="logo">
              <a href="#">
                  <img src="D:惠州客家面.jpg"/>

鼠标动一下图标,字体可以变大哦。

制作攻略:

  • 把logo的位置换成你图片的位置,alt属性是网页图片展示不出来时的字。
  • “li”标签里的a属性超链接想要链接的网页,“li”标签里面的文字换成你想要的的文字
  • 背景颜色在CSS中**.header中的background-color:**进行修改,变成你想要的的颜色。
  • 对于“li”标签中字体的特效,在CSS中**.list li:hover**进行修改。

变色:

.header{
  width: 100%;
  height: 100px;
  background-color: rgb(207, 238, 238);
  position: relative;
}

标签特效:

.list li:hover{
  color: rgb(168, 81, 81);
  font-size: larger;
}

到此这篇关于HTML+CSS 实现顶部导航栏菜单制作的文章就介绍到这了,更多相关HTML CSS 顶部导航栏菜单内容请搜索179885.Com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持179885.Com!

猜你在找的HTML+CSS 实现顶部导航栏菜单制作相关文章

本文主要介绍了Html5大屏数据可视化开发,可视化可以对统计的数据一目了然,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文主要介绍了html css3不拉伸图片显示效果,类似淘宝,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
项目有图表方面的需求,其中有做卫星定位的图形,需要制作极坐标来显示当前北半球或南半球的卫星分布情况,本文主要介绍了CSS极坐标的实例代码,分享给大家,感兴趣的可以
最近才自学了html和css,今天正好做个金字塔实例,可以清楚的看出图标数据,需要的朋友们下面随着小编来一起学习学习吧
最近在学习html+css,于是整理了一下思路,写了一个小demo,本文主要介绍了html+css实现文字折叠特效实例,感兴趣的小伙伴们可以参考一下
本文通过代码给大家讲解HTML+VUE分页实现炫酷物联网大屏功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
生活中我们所见到的大部分图形都可以用css实现,本文介绍了HTML+CSS制作心跳特效的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这些年的演变让朋克变成了紧随时代的代名词,本文实现html+css实现赛博朋克风格按钮 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但是一直表单无法居中,在网上找了各种例子之后,终于成功,今天就来介绍一下,感兴趣的可以了解一下
CSS filter属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染。本文给大家分享CSS filter 有什么神奇用途,感兴趣的朋友跟
本文将给大家介绍使用 CSS prefers-* 规范提升网站的可访问性与健壮性的相关知识,在css媒体查询中新增的几个特征功能,本文也给大家详细介绍,需求的大佬可以参考下
本文通过代码给大家介绍css背景和边框标签的一些知识,通过相关属性设置背景颜色,背景图像,对css背景与边框的相关知识感兴趣的朋友一起看看吧