css当当网首页代码效果图

当当网是国内著名的综合性电商平台之一，首页的设计和排版一直备受关注和赞誉。其优美的界面和舒适的体验背后，离不开CSS的精细运用。下面是当当网首页部分代码及效果图：

.header {
  height: 70px;
  background-color: #e4393c;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 80px;
  height: 50px;
  margin-left: 20px;
}
.header-nav {
  display: flex;
  margin-right: 20px;
}
.header-nav a {
  color: #fff;
  font-size: 16px;
  padding: 0 20px;
}
.header-nav a:hover {
  color: #f9ba6d;
}
.ad {
  position: relative;
  width: 100%;
  height: 250px;
}
.ad img {
  width: 100%;
  height: 100%;
}
.ad .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0.5);
  text-align: center;
  color: #fff;
  font-size: 26px;
  line-height: 250px;
}
.ad .mask:hover {
  background-color: rgba(0,0);
}

以上代码实现了当当网首页头部和广告的布局和样式。头部部分使用了flex布局，使logo和导航菜单分别靠左和靠右，并且居中对齐。导航菜单鼠标经过时，颜色会变化。广告位实现了鼠标悬停时遮罩显示、字体颜色改变等效果。

当当网的设计风格一直走的是简洁大方的路线，在CSS代码的运用上也很讲究细节。这不仅体现了设计师精益求精的态度，也是当当网得以在激烈的电商竞争中始终处于领先地位的一项重要原因。