如何样式图像和侧栏

Question

我要创建的布局：布局

我拥有的当前小提琴：完整页面

您可以看到该页面响应迅速，并且按照它的假设方式工作。

我想了解如何以图像中绘制的方式对此页面进行样式。

当前图像容器CSS（基本上用6张图像或3张图像重复。当涉及3个图像显示时，一个图像占据了容器的50％，而另外两个则占据了25％。）

.aestheticsDisplay {
margin: 0 auto;
}
.imageGrid {
margin: 20px 0 0 0;
padding: 0;
list-style: ;
display: inline;
text-align: center;
float:none;
}
.imageGrid:after {
    clear: both;
}
.imageGrid:after, .aestheticsBox:before {
    display: table;
}
.imageGrid li {
    width: 400px;
    height: 400px;
    display: inline-grid;
    margin: 20px;
  float: none;
}
.aestheticsBox {
    width: 100%;
    height: 100%;
     position: inherit;
     cursor: pointer;
border-radius: 10px;
-webkit-transition: 0.3s ease-in-out,
-webkit-transform 0.3s ease-in-out;
-moz-transition:  0.3s ease-in-out,
-moz-transform 0.3s ease-in-out;
transition: all 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.aestheticsBox:hover {
transform: scale(1.05);
}
.displayImg-1 {
background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)),
url("../imgs/nick_1.jpg");
}
.displayImg-2 {
background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)),
url("../imgs/nick_1.jpg");
}
.displayImg-3 {
background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)),
url("../imgs/nick_1.jpg");
}
.displayImg-4 {
background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)),
url("../imgs/nick_1.jpg");
}
.displayImg-5 {
background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)),
url("../imgs/nick_1.jpg");
}
.displayImg-6 {
background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)),
url("../imgs/nick_1.jpg");
}

至于导航器

.nav-container {
/* flex-basis: 30%; */
padding-top: 500px;
}

.navigation {
   width: 150px;
   }

.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mainmenu a {
  display: block;
  background-color: #fff;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

.mainmenu a:hover {
    background-color: #rainbow;
}


.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

.submenu a {
  background-color: #fff;
}

.submenu a:hover {
  background-color: #fff;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

所有帮助都非常感谢。

Answer 1

不要在保证金中使用自动，它将解决您的问题