时间戳

首页 > 解决方案 > 这段代码有问题吗？我是 html 和 css 的新手

html - 这段代码有问题吗？我是 html 和 css 的新手

问题描述

我不确定这段代码是以最短和最有效的方式编写的。请帮助我..我怎样才能以最短的方式写作？我怎样才能提高自己？

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

body {
background: #fff;
font-family: Arial;
}

a {
text-decoration: none;
color: #333;
}

nav {background-color: #f7f7f7;
width: 100%;
display: block;
}

nav ul {
list-style-type: none;
}

nav ul li {
display: inline-block;
position: relative;
}

nav ul:not(.sub-menu) > li {
padding: 15px;
}

nav ul:not(.sub-menu) > li + li {
margin-left: 20px;
}

nav ul li.has-children:hover ul.sub-menu {display: block;
}

nav ul.sub-menu {
position: absolute;
display: none;
white-space: nowrap;
/* Her bir liste öğesinin tek bir satır olması için. */
top: 100%;
}

nav ul.sub-menu li {
display: block;
}

nav ul.sub-menu li a {
display: block;
padding: 12px 20px 12px 10px;
background-color: #f7f7f7;
border-with: 0 1px 1px 1px;
border-color: #eee;
border-style: solid;
}

nav ul.sub-menu li a:hover {background-color: #eee;}

nav ul.sub-menu li + li a {
border-top: 0;
}

标签： htmlcss

解决方案

那么代码本身很短。您可以注意几点，从长远来看，这将对您有所帮助。

  1. 尽量减少使用>和+。因为这些都严格绑定到 DOM 的结构。如果 DOM 发生变化，样式可能会损坏>或+可能会损坏。

  2. 最小化层次结构。nav ul li可以替换为nav li。层次越少，DOM 绘制就越快。

  3. 您应该做的更多是将css分成两部分。

    • 第 1 部分：所有元素级 css（我们称之为 normalize.css）和
    • 第 2 部分：所有基于类的 css（我们称之为styles.css）。

Normalize.css现在具有 html 元素的全局样式，这在整个网页中都很常见。

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

body {
  background: #fff;
  font-family: Arial;
}

a {
  text-decoration: none;
  color: #333;
}

nav {
  background-color: #f7f7f7;
  width: 100%;
  display: block;
}

nav ul {
  list-style-type: none;
}

nav li { // note that the `ul` is removed
  display: inline-block;
  position: relative;
}

style.css现在包含所有基于类的 css，它们独立于其在 DOM 中的位置。

.menu-item { // add a class `menu-item` to the immediate UL items in the <nav/>
  padding: 15px;
  margin-left: 20px;
}

.menu-item:first-child {// remove margin-left from the first-child
  margin-left: 0;
}

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

.sub-menu { // removing the unnecessary qualifiers. `.sub-menu` is enough
  position: absolute;
  display: none;
  white-space: nowrap;
  top: 100%;
}

.sub-menu-item { // add class `sub-menu-item` to the <li> of `.sub-menu`
  display: block;
}

.sub-menu-item a { // you can further go ahead to add a special class to the `<a/>` inside `.sub-menu-item`
  display: block;
  padding: 12px 20px 12px 10px;
  background-color: #f7f7f7;
  border-with: 0 1px 1px 1px;
  border-color: #eee;
  border-style: solid;
}

.sub-menu-item a:hover {
  background-color: #eee;
}

nav ul.sub-menu li + li a { // similarly you can remove the `+` with `:first-child` or the suitable.
  border-top: 0;
}

推荐阅读