Question

我正在尝试创建的布局：Layout

我所拥有的当前小提琴：full page

正如您所看到的那样，该页面具有响应性，并且正如其现在所设想的那样。

我想了解如何根据图像中的方式设置此页面的样式。

当前图像容器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

不要使用自动保证金来解决你的问题

如何设置图像和侧边栏的样式

1 个答案: