开始我的第一个项目（寻找批评，一般提示，讨厌）

时间：2018-06-10 16:39:30

标签： html css flexbox media-queries

这可能不是最好的地方，但我也会问 - 互联网上有类似的地方，比如Stack Overflow，这是一个更具针对性的设置我应该加入吗？

无论如何，这是我从头开始的第一个项目，在一些免费在线训练营的项目之外。

我希望得到一些批评，如果有任何不好的做法等等，我可以做得更好，以达到相同的结果......到目前为止它是真正基本的东西。

使用太多媒体查询不好的做法？

我遇到的一个问题是响应式设计。我不认为当它完成时菜单看起来就像现在在小屏幕上一样，（将不得不学习如何制作一个汉堡包菜单）但是我一直在玩这个，但我很难控制到什么时候flex项目包装。它现在已经设置好，所以当屏幕缩小时，下拉链接会移动到底部，但除非屏幕足够小以使项目“完全包裹”，否则它不会真正起作用。

此外，似乎使用“flex basis”和“flex grow”具有非常相似的效果。我用旧代码评论了代码部分，以显示我的意思。这个想法基本上不是所有菜单项都是相同的宽度等等......

任何建议都将受到赞赏。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: hsl(9, 41%, 19%);
  margin: 0;
  font-family: 'Bowlby One SC';
}

header {
  background-color: darkgoldenrod;
  color: hsl(9, 41%, 19%);
  margin: 0;
  padding-bottom: 0.5em;
  border-bottom: 3px solid rgb(112, 98, 98);
}

.top {
  display: flex;
  background-color: hsl(9, 41%, 19%);
  color: darkgoldenrod;
  padding: 0.2em;
  justify-content: start;
}

.top h1 {
  flex-basis: 85%;
  margin-left: 0.2em;
}

.social {
  font-size: 1.5em;
  padding: 0.5em;
}

input {
  width: 10%;
  min-width: 10%;
  transition: width 0.4s ease-in-out;
  background-color: darkgoldenrod;
  color: hsl(9, 41%, 19%);
  border: 2px solid rgb(112, 98, 98);
  border-radius: 1.3em;
  padding: 0.3em;
  font-family: "FontAwesome";
  font-weight: 800;
  font-size: 1em;
  margin: 0.2em;
}

input:focus {
  width: 25%;
  font-family: 'Bowlby One SC';
  padding-left: 1em;
}

nav {
  border-top: 3px solid rgb(112, 98, 98);
}

.container {
  width: 75%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

nav ul li {
  position: relative;
  list-style: none;
  margin-bottom: -0.5em;
}

logo {
  font-size: 2em;
  flex: 1 0 20%;
  /* flex-basis: 20%;*/
}

.wide {
  flex: 1 0 12.5%;
  align-self: end;
  /* flex-basis: 12.5%;*/
}

.main {
  flex: 1 0 7.5%
  /*flex-basis: 7.5%;*/
}


/*logo {
    flex: 3 0;
    font-size: 2em;
    padding-left: 0.5em;
}

.wide {
    flex: 2 1;
}

.main {
    flex: 1 1;
}*/

nav ul li a {
  display: block;
  text-align: center;
  font-size: 0.9em;
  text-decoration: none;
  color: hsl(9, 41%, 19%);
  padding: 1.2em;
  margin: 0;
}

nav ul li>a:hover {
  background: hsl(9, 41%, 19%);
  color: darkgoldenrod;
  opacity: 0;
  animation-name: dropanimate;
  animation-duration: 300ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes dropanimate {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sub-menu {
  background-color: rgba(112, 98, 98, 0.8);
  display: none;
  position: absolute;
  width: 100%;
  color: hsl(9, 41%, 19%);
  padding-bottom: 0.5em;
  text-align: center;
  border: 3px solid rgb(112, 98, 98);
}

.sub-menu a {
  display: block;
  padding: 0.5em;
}

.sub:hover>.sub-menu {
  display: block;
}


/*display block vs flex creates cool difference here */

@media screen and (max-width:768px) {
  nav {
    font-size: 0.8em;
  }
  logo {
    order: 1;
  }
  .wide {
    order: 4;
  }
  nav ul li {
    margin-bottom: -0.6em;
  }
  .main {
    order: 3;
  }
  .container {
    width: 100%;
  }
  .user-action {
    order: 2;
  }
  .social {
    font-size: 0.9em;
    align-self: center;
  }
  .top h1 {
    font-size: 1.2em;
    align-self: center;
  }
  input {
    width: 55%;
  }
  input:focus {
    width: 55%;
    font-family: 'Bowlby One SC';
    padding-left: 1em;
    font-size: 0.5em;
  }
}
<html>

<head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <title>Deadbeat Music</title>
  <meta charset="UTF-8">
</head>

<body>
  <header>
    <div class="top">
      <h1>Deadbeat</h1>

      <input type="text" id="search" class="fas fa-search" placeholder="&#xf002;" onfocus="this.placeholder=''" onblur="this.placeholder='&#xf002;'" />
      <i class="social fab fa-facebook-f"></i>
      <i class="social fas fa-envelope"></i>
      <i class="social fas fa-comments"></i>
    </div>
    <nav>
      <ul class="container">
        <!-- <li id="logo">Deadbeat</li>-->
        <li class="sub wide" id="mission"><a href="">Our Mission </a>
          <ul class="sub-menu">
            <li><a href="">About Us</a></li>
            <li><a href="">Contact Us</a></li>
            <li><a href="">Partner Up</a></li>
          </ul>
        </li>
        <li class="sub wide"><a href="">Profiles</a>
          <ul class="sub-menu" id="profiles">
            <li class="profile-types"><a href="">Bands</a></li>
            <li class="profile-types"><a href="">Labels</a></li>
            <li class="profile-types"><a href="">Promoters</a></li>
            <li class="profile-types"><a href="">Bloggers</a></li>
          </ul>
        </li>
        <li id="show" class="wide"><a href="">Book a Show</a></li>
        <li class="sub wide" id="record"><a href="">Make a Record</a>
          <ul class="sub-menu">
            <li><a href="">For Bands</a></li>
            <li><a href="">For Labels</a></li>
          </ul>
        </li>
        <li class="main"><a href="">Press</a></li>
        <li class="main"><a href="">Forum</a></li>
        <li class="main user-action"><a href="">Login</a></li>
        <li class="main user-action" id="sign-up"><a href="">Sign Up!</a></li>
      </ul>
    </nav>
  </header>
</body>


</html>

1 个答案:

答案 0 :(得分：1)

首先，我建议您查看User Experience Stack Exchange。

的声明：
现在我问你：你确定要从头开始创建自己的用户体验设计吗？这可能看起来像一个简单的问题，但是如果您没有完美的计划来做这件事可能会非常困难 - 可能会试用一些UX框架，例如Web或Bootstrap的Material Components？此外，我不建议创建一个专业的网站作为你的第一个项目，我想你应该先做一些实验。

好的，如果你仍然确定你正在做什么，这里有一些提示：

        
  • 与不占据整个页面的元素的宽度保持一致：不要将搜索框按比例缩小到页面大小
    •     
  • 如果你真的计划设计自己的用户体验，再一次，一致性是关键：总是使用相同类型的按钮，可能有一些微小的变化。例如，您可以为.btn（将应用于所有按钮的类）定义标准样式，但如果它们位于导航栏中，则将其高度设置为任意数量
    •     
  • 如果要从头开始设置预先存在的元素（例如input type="text"），则可能需要禁用默认样式（＆＃34;用户代理样式表＆＃34;在Chrome中）手动（例如通过在文本输入中指定outline: none）或在启用Webkit的浏览器上使用-webkit-appearance: none


我希望我对你有用（但主要是我希望我能理解你的问题）。再次，如果你继续创建自己的设计，UX堆栈交换可能是最好的地方。

的更新
如Sheshank S.所示，您应该使用更舒适的配色方案。您可能想看一下本指南;在我看来，最重要的部分是：

今天大多数设计精良的网站都使用大量的空白空间，以营造自由，宽敞和透气的感觉。

另外看看两性所喜欢的颜色（棕色和橙色都不受......）。

此外，如果你仍然坚持自己的用户体验设计，你可以考虑阅读William Lidwell的通用设计原则。

再次更新
我刚刚意识到如果一个mod看到了这个，他们肯定将转移到UX Stack Exchange。不管。

相关问题
最新问题