Question

我无法控制我的CSS，我已将自己编辑成一个圆圈，坦白说我现在已经迷失了。

/*----------------HTML Start---------------------*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<link href="Master Elements/css/ppgd_logo" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="Master Elements/ppgd_logo.css">

</head>
<div id="topdiv">
  <div id="container">

    <input type="checkbox" id="menuToggle">
    <label for="menuToggle" class="menu-icon">&#9776;</label>

    <nav class="menu">
      <ul>
        <li><a href="#">PORTFOLIO</a>
        </li>
        <li><a href="#">RESUME</a>
        </li>
        <li><a href="#">CONTACT</a>
        </li>
      </ul>
    </nav>

    <div class="brand">
      <span class="name">Phil <span>Padilla</span></span>
      <span class="title">Graphic <span>Design</span></span>
    </div>

  </div>
</div>

<body>
</body>
</html>

/*----------------HTML End---------------------*/


/*----------------CSS Start---------------------*/
@charset "UTF-8";
/* CSS Document */

<style>

body {
  background: #fff;
  margin: 140px 0px 0px 0px;
  font-family: 'Open Sans', sans-serif;
}
/*--------HEADER Start----------*/

div#topdiv {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  color: #0F0;
  background: #FFF;
  opacity: 0.9;
  padding: 0px 0px 0px 0px;
  z-index: 99;
  height: 58px;
  box-shadow: 0px 0px 5px 0px rgba(138, 136, 138, 1);
  z-index: 99;
}
div#menucontainer {
  height: 58px;
  float: right;
  margin-right: 10px;
  padding: 0px;
  display: block;
  border:1px solid #666;
}
div#container {
  max-width: 942px;
  min-width: 320px;
  margin: 0 auto;
  padding: 0px;
  position: relative;
  height: 0px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/*--------LOGO Start----------*/

.brand {
  font-size: 22px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: #F60;
  line-height: 0.8;
  text-transform: uppercase;
  margin: 10px;
  float: left;
}
.name {
  display: block;
  float: left;
}
.name span {
  display: block;
  margin-left: 0px;
  margin-top: 2px;
}
.title {
  margin-left: -44px;
  color: #666;
}
.title span {
  display: block;
  margin-left: 96px;
  margin-top: 2px;
}
/*--------LOGO End----------*/

/*--------MENU Start----------*/

* {
  padding: 0;
  margin: 0;
}
body {
  font-family: Open Sans;
}
a {
  text-decoration: none;
  color: #666;
}
li {
  list-style-type: none;
}
nav {
  text-align: center;
  float: right;
  padding: 15px;
  display: block;
  border-bottom: 1px;
  height: 19px;
  margin-top: 5px;
  margin-right: 10px;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  letter-spacing: 0.125em;
  color: #666;
  line-height: 100%;
}
nav:hover {
  float: right;
  display: block;
  height: 19px;
  margin-top: 5px;
  margin-right: 10px;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  letter-spacing: 0.125em;
  color: #666;
  cursor: pointer;
  line-height: 20%;
  border-bottom-style: solid;
  border-bottom-color: #666;
}
nope {
  position: absolute;
  width: 260px;
  height: 100%;
  background: none;
}
div#SAVE {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px #666;
  transition: background-color 500ms ease-out 1s;
}
}
/*--------MENU End----------*/

/*--------HEADER End----------*/

/*--------FOOTER Start----------*/

div#footer {
  height: 30px;
  bottom: 0px;
  width: 100%;
  background: #666;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  box-shadow: 0px -1px 5px 0px rgba(138, 136, 138, 1);
  color: #FFF;
}
/*--------FOOTER End----------*/

* {
  padding: 0;
  margin: 0;
}
body {
  font-family: 'Open Sans' sans-serif;
}
a {
  text-decoration: none;
  color: #666;
  font-size: 14px;
}
li {
  list-style-type: none;
}
header {
  width: 100%;
  height: 50px;
  margin: auto;
  border-bottom: 1px solid #EEE;
  background: #FFF;
  z-index: 99;
}
.container {
  max-width: 942px;
  min-width: 320px;
  margin: 0 auto;
  padding: 0px;
  position: relative;
  height: 0px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

nav {
  width: 100%;
  text-align: center;
}
nav ul {
  line-height: 50px;
}
nav li {
  display: inline-block;
}
nav a {
  padding: 10px;
  color: #FFF;
}
nav a:hover {
  background: #666;
  color: #FCFCFC;
  border-radius: 0px;
}
/*--------------------------------------------------*/

.menu {
  width: 100%;
  height: 35px;
  background: #666;
  position: absolute;
  top: -100px;
  z-index: -1;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
}
.menu-icon {
  float: right;
  padding: 12px 15px;
  color: #666;
  background: #FFF;
  border-radius: 5px;
  margin: 5px 5px 0 0;
  cursor: pointer;
  z-index: 99;
  border: thin solid #666;
}
.menu-icon:hover {
  color: #F60;
}
#menuToggle {
  display: none;
}
#menuToggle:checked ~ .menu {
  position: absolute;
  top: 54px;
  width:100%;
}
.content {
  width: 100%;
  margin: auto;
  position: absolute;
  top: 20px;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
}
/*--------------------------------------------------*/

@media screen and (max-width: 480px) {
  nav li {
    display: block;
  }
  nav a {
    display: block;
    border-bottom: 1px solid #666;
    padding: 0;
  }
  nav a:hover {
    border-radius: 0;
  }
  .menu {
    height: auto;
    top: -370px;
  }
  #menuToggle:checked ~ .content {
    position: absolute;
    top: 0;
  }
/*----------------CSS End---------------------*/

为什么我的菜单显示宽度：100％;点击桌面大小？我想我需要从我的.container div中取出它，但是对于如何/我可以改变它以使它这样做感到困惑？菜单内容不以移动设备为中心，因此css（我的技能水平）让我很困惑......
选择菜单后，悬停效果不稳定，我对它们失去了完全控制权。只需要它们干净并且＃666。

3.当我减小浏览器窗口的宽度时，设计和布局是响应式的，但是当我在手机上播放代码并进行测试时，我得到了最小化的桌面版本？这是为什么？

Answer 1

要阻止悬停效果变得不稳定，只是不要更改与尺寸相关的任何内容（如果你想让它们移动，只需将颜色更改为＃666和边距）

Answer 2

问题1： 你是对的，因为菜单div被包装在容器内部，我只能填充100％的父元素。你应该重新编写你的html，这样每个需要居中的项目都有自己的包装div。像这样几乎......

/* USE A CSS RESET IN YOUR PAGE THIS IS JUST AN EXAMPLE */

html, nav, ul{
margin: 0;
padding: 0;
}

.wrap-center{
width:1000px;
margin: auto;
background: green;
}
nav {
width:100%;
background: blue;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline-block;
}
nav ul li a{
color: white;
font-size: 20px;
}
</style>

<body>  //START HTML HERE

<div class="wrap-center">
  <h1>My header logo</h1>
  <p>some text</p>
</div>
<nav>
  <ul class="wrap-center">
    <li><a href="links">Some navigation links</a></li>
    <li><a href="links">Some navigation links</a></li>
    <li><a href="links">Some navigation links</a></li>
  </ul>
</nav>  
<div class="wrap-center">
  <h2>Some other text</h2>
  <p>Some other tag</p>
</div>


</body>

问题2： 你有很多样式可以覆盖上面明确说明的样式。它真的很难读。例如你的导航：悬停有你不需要的高度和边距，这使你的菜单动画高度。如果你像我上面说的那样重写html。你可以使用浮点数清除以前使用边距和偏移量来完成的元素。

问题3： 使用此元标记将视口宽度设置为设备窗口。这将解决您在移动设备上遇到的显示问题。

<meta name="viewport" content="width=device-width, initial-scale=1">

你可以在cssTricks

上仔细阅读

如果我是你，我会重写两个文件，让它们变得更干净。

无法控制我的导航a：hover CSS菜单

2 个答案: