背景图像和文本水平导航栏

【问题标题】：background image and text horizontal nav bar背景图像和文本水平导航栏
【发布时间】：2015-04-25 02:30:54
【问题描述】：

我是一个对 CSS3 比较陌生的学生。我正在尝试使用块级别的背景图像图标和文本链接正确设置水平导航栏的样式，并且它们也是内联的。另外，我也在尝试对悬停状态做同样的事情。

这是我目前所坚持的链接：

http://visionsic.github.io/DSW_II/test.html 

#aside_sect_mm {
  margin: 0px;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  max-height: 60px;
  margin-top: 0%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  max-height: 100px;
  max-width: 704px;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: relative;
  padding: 6.5% 0% 0% 0%;
  max-height: 60px;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 60px;
  max-width: 60px;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 40px 40px;
  display: block;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  position: relative;
  display: block;
  text-align: center;
  max-height: 60px;
  max-width: 60px;
  text-decoration: none;
  color: #F6EF1B;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
  position: relative;
  max-height: 60px;
  max-width: 60px;
  display: block;
  background-color: #F6EF1B;
  background-repeat: no-repeat;
  background-position: 0%;
  text-decoration: none;
  line-height: 2.5em;
  color: #004E27;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

更新：

Ashwani 更正了导航栏的位置，谢谢先生！ 现在，我只是试图通过允许可点击的悬停链接区域填充每个按钮区域的整个块来实现相同的状态。悬停宽度是正确的，但背景图像位于链接文本的中心。我希望它像正常的“向上”状态一样定位。

这是更新后的示例：

http://visionsic.github.io/DSW_II/test.html

#aside_sect_mm {
  margin: 0px;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  height: 100%;
  margin-top: 0%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: relative;
  padding: 6.5% 0% 0% 0%;
  height: 100%;
  width: 100%;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 100%;
  max-width: 140.8px;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 40px 40px;
  display: block;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  clear: left;
  position: relative;
  display: block;
  max-height: 60px;
  text-decoration: none;
  color: #F6EF1B;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
  position: relative;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-color: #F6EF1B;
  background-position: 50% 50%;
  background-size: 40px 40px;
  text-decoration: none;
  line-height: 1.1em;
  color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

【问题讨论】：

  • 有什么问题？你想达到什么目的？

标签： html css


【解决方案1】： 
**you can simply use the following structure for link tag**
#aside_sect_mm nav ul li a{
    position: relative;
    display: block;
    max-height: 60px;
    /*max-width: 60px; -- remove max width*/
    /*margin: 0 auto --- if you want to use max width so you should use margin o auto*/
    text-decoration: none;
    color: #F6EF1B;
}
#aside_sect_mm nav ul li a:hover{
    background-color: #f6ef1b;
    background-position: 0 center;
    background-repeat: no-repeat;
    color: #004e27;
    display: block;
    line-height: 2.5em;
    max-height: 60px;
    /*max-width: 60px; remove max-width*/
    position: relative;
    text-decoration: none;
}

【讨论】：

  • 我肯定会为您的回复投票！我需要获得更多的声誉才能这样做。这个css过渡效果太棒了！非常感谢！！！！
  • 我正在尝试实现悬停状态以翻转相反的颜色。但是，您将导航按钮的位置固定为正确，就像您现在拥有它们一样。我想看到悬停是相反的颜色；悬停时颜色翻转。可点击区域应覆盖按钮的整个 BLOCK 区域。
【解决方案2】： 
<style type="text/css">
*{
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
}
#aside_sect_mm {
    background: url("http://visionsic.github.io/DSW_II/img/mm_main_tab_c.jpg") no-repeat center center / cover;
    height: 318px;
    margin: 0;
    /*margin: 0 auto;*/ /*use this line if you want to align page horizontal  center*/
    max-width: 704px;
    position: relative;
}
#aside_sect_mm nav {
    display: block;
    position: relative;
    text-align: center;
    top: 100%;
    width: 100%;
}
#aside_sect_mm nav::after {
    clear: both;
    content: " ";
    display: table;
}
#aside_sect_mm nav ul {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    list-style: none;
}
#aside_sect_mm .icon {
    background-color: #004e27;
    float: left;
    font-family: "Gill Sans","Gill Sans MT","Myriad Pro","DejaVu Sans Condensed",Helvetica,Arial,sans-serif;
    overflow: auto;
    text-align: center;
    width: 20%;
}
#aside_sect_mm .icon a{
    background-position: 50% 10%;
    background-repeat: no-repeat;
    background-size: 100px 40px;
    display: block;
    padding: 50px 0 5px 0;
    color: #fce011;
    font-weight: normal;
    text-decoration: none;
}
#aside_sect_mm .icon.bio_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/bio_ore_ylw.svg");
    background-position: 62% 10%;
}
#aside_sect_mm .icon.stat_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/stats_ore_ylw.svg");
}
#aside_sect_mm .icon.img_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/img_ore_ylw.svg");
}
#aside_sect_mm .icon.vid_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/vids_ore_ylw.svg");
}
#aside_sect_mm .icon.fut_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/fut_ore_ylw.svg");
}
#aside_sect_mm .icon.bio_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/bio_ore_grn.svg");
}
#aside_sect_mm .icon.stat_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/stats_ore_grn.svg");
}
#aside_sect_mm .icon.img_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/img_ore_grn.svg");
}
#aside_sect_mm .icon.vid_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/vids_ore_grn.svg");
}
#aside_sect_mm .icon.fut_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/fut_ore_grn.svg");
}
#aside_sect_mm .icon:hover a {
    background-color: #f6ef1b;
    color: #004e27;
    -moz-transition: background-color 1s ease 0s;
  -webkit-transition: background-color 1s ease 0s;
          transition: background-color 1s ease 0s;
}
</style> 
<section id="aside_sect_mm">
    <nav>
        <ul>
            <li class="bio_icon icon"><a href="#bio">Bio</a></li>
            <li class="stat_icon icon"><a href="#stats">Stats</a></li>
            <li class="img_icon icon"><a href="#images">Images</a></li>
            <li class="vid_icon icon"><a href="#videos">Videos</a></li>
            <li class="fut_icon icon"><a href="#future">Future</a></li>
        </ul>
    </nav>
</section>

【讨论】：

  • 虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
  • 感谢您建议我在这里使用 html/css 代码而不是链接。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-07-22
  • 2023-04-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-02
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode