javascript - 尝试创建一个小型网站，对 html 不熟悉。 div 有问题

标签 javascript html css

我刚开始使用 html 并下载我认为是简单模板的内容。现在我一直在尝试添加下拉菜单并在与注册/登录相对应的右侧添加 2 个元素。我尝试创建新的 div，ul 的...但它似乎从来没有排队或元素丢失。

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu>ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu {
  width: auto;
  border-bottom: 3px solid #47c9af;
  font-family: Raleway, sans-serif;
  line-height: 1;
}

#cssmenu ul {
  background: #ffffff;
}

#cssmenu>ul>li {
  float: left;
}

#cssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#cssmenu.align-right>ul>li {
  float: right;
}

#cssmenu.align-right>ul>li>a {
  margin-right: 0;
  margin-left: -4px;
}

#cssmenu>ul>li>a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}

#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a,
#cssmenu>ul>li>a:hover {
  color: #ffffff;
}

#cssmenu>ul>li>a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}

#cssmenu>ul>li.active>a:after,
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li>a:hover:after {
  background: #47c9af;
}

@import url(http://fonts.googleapis.com/css?family=Raleway);
#logincssmenu,
#logincssmenu ul,
#logincssmenu ul li,
#logincssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#logincssmenu:after,
#logincssmenu>ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#logincssmenu {
  width: auto;
  border-bottom: 3px solid #47c9af;
  font-family: Raleway, sans-serif;
  line-height: 1;
}

#logincssmenu ul {
  background: #ffffff;
}

#logincssmenu>ul>li {
  float: right;
}

#logincssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#logincssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#logincssmenu.align-right>ul>li {
  float: right;
}

#logincssmenu.align-right>ul>li>a {
  margin-right: 0;
  margin-left: -4px;
}

#logincssmenu>ul>li>a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}

#logincssmenu>ul>li.active>a,
#logincssmenu>ul>li:hover>a,
#logincssmenu>ul>li>a:hover {
  color: #ffffff;
}

#logincssmenu>ul>li>a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}

#logincssmenu>ul>li.active>a:after,
#logincssmenu>ul>li:hover>a:after,
#logincssmenu>ul>li>a:hover:after {
  background: #47c9af;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  font-size: 15px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #47c9af;
  display: block;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: rotateX(2deg);
  transform-origin: bottom;
  color: #ffffff;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
<!doctype html>
<html lang=''>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/loginstyle.css">
  <link rel="stylesheet" href="css/dropdownstyle.css">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <title>CSS MenuMaker</title>
</head>

<body>

  <div id='cssmenu'>
    <ul>
      <li class='active'><a href='#'>Home</a></li>
      <li><a href='#'>Products</a></li>
      <li><a href='#'>Company</a></li>
      <li><a href='#'>Contact</a></li>
      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
      <div id='logincssmenu'>
        <ul>
          <li><a href='#'>Login</a></li>
        </ul>
      </div>
    </ul>
  </div>
</body>
<html>

我还尝试通过复制粘贴原始 styles.css 中的一些代码来模仿下拉按钮的样式，但效果不佳。我几天前才开始，但我不明白为什么有时它会消失并取消分配。 这是原始模板。 http://cssmenumaker.com/menu/flat-tabbed-menu

最佳答案

把这个放在第一个。我认为应该这样做。

    <ul>
       <li class='active'><a href='#'>Home</a></li>
       <li><a href='#'>Products</a></li>
       <li><a href='#'>Company</a></li>
       <li><a href='#'>Contact</a></li>
        <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
        <div id='logincssmenu'>
    <li><a href='#'>Login</a></li>
</div>

建议:如果您是 html&css 的新手，请尝试制作一些简单的教程。不要下载模板，因为您不会理解发生了什么。

关于javascript - 尝试创建一个小型网站，对 html 不熟悉。 div 有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49600564/

上一篇：css - Angular 5 嵌套动态子类别无法正常工作

下一篇：javascript - 如何即时更改外部 CSS

相关文章：

html - CSS:连字符:自动(如果无法自动换行)

javascript - 如何使用存储在变量中的键动态获取对象的值

javascript - AngularJS Material mdDialog 并在模板中显示局部变量

javascript - 使用 Greasemonkey 将 html 内容添加到页面的基本方法？

javascript - 未硬编码到 HTML 中的 Python Web 抓取数据

javascript - JavaScript 下拉菜单功能的问题

javascript - 如何使用javascript分隔主组数组中的每个子组

css - html 有序列表属性 "start"和 "type"在外部 css 中不起作用

html - MSIE 中按钮大小的不难看的调整

html - 完全适合文本，没有间距

©2024 IT工具网  联系我们