Создать кликабельные картинки по периметру блока

@MixOnly1 · Регистрация: 07.10.2016

Author24 — интернет-сервис помощи студентам

Всем доброе время суток

. У меня загвоздка. Есть задача: Создать на страничке картинки, которые располагались бы по периметру, они должны быть кликабельны, с сылками и прочее. Проблем у меня только в том как расположить их ровно по 10 штук на верху, внизу, справа и слева

. Центр оставить фоном, но тоже кликабельным. Что то на подобии того что на картинке которую я прикрепил

. Каким кодом это можно сделать в html или css

. Помогите кто знает, я думаю это не очень сложная задача...)

@mrtoxas · 07.10.2016, 21:17

CSS

body,
html {
  height: 100%;
}
.wrapper {
  height: 100%;
  width: 100%;
}
.block {
  border: 1px solid black;
  box-sizing: border-box;
}
.left {
  height: 100%;
  width: 9.09090909%;
  float: left;
}
.left .block {
  height: 9.09090909%;
}
.left .block:nth-child(odd) {
  background-color: #ccc;
}
.top,
.bottom {
  height: 9.09090909%;
}
.top .block,
.bottom .block {
  height: 100%;
  float: left;
  width: 9.09090909%;
}
.top .block:nth-child(even),
.bottom .block:nth-child(even) {
  background-color: #ccc;
}
.center {
  margin-left: 9.09090909%;
  height: 81.81818182%;
  width: 81.81818182%;
}
.center .block {
  height: 100%;
  background-color: #eee;
}
.right {
  height: 100%;
  width: 9.09090909%;
  float: right;
}
.right .block {
  height: 9.09090909%;
}
.right .block:nth-child(odd) {
  background-color: #ccc;
}

HTML5

<div class="wrapper">
  <div class="left">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="right">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="top">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="center">
    <div class="block"></div>
  </div>
  <div class="bottom">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

Результат

Less:

CSS

@cellcount:11;
 
body,
html {
  height: 100%;
}
 
.wrapper {
  height: 100%;
  width: 100%;
}
 
.block {
  border: 1px solid black;
  box-sizing: border-box;
}
 
.left {
  height: 100%;
  width: calc(100%/@cellcount);
  float: left;
  .block {
    height: calc(100%/@cellcount);
    &:nth-child(odd) {
      background-color: #ccc;
    }
  }
}
.top,
.bottom {
  height: calc(100%/@cellcount);
  .block {
    height: 100%;
    float: left;
    width: calc(100%/@cellcount);
    &:nth-child(even) {
      background-color: #ccc;
    }
  }
}
.center {
  margin-left: calc(100%/@cellcount);
  height: calc(100%-100%/@cellcount*2);
  width: calc(100%-100%/@cellcount*2);
  .block {
    height: 100%;
    background-color: #eee;
  }
}
.right {
  height: 100%;
  width: calc(100%/@cellcount);
  float: right;
  .block {
    height: calc(100%/@cellcount);
    &:nth-child(odd) {
      background-color: #ccc;
    }
  }
}

@MixOnly1 · 08.10.2016, 09:21 **[ТС]**

Спасибо волшебник)

@MixOnly1 0 / 0 / 0 Регистрация: 07.10.2016 Сообщений: 2
		1
	Создать кликабельные картинки по периметру блока 07.10.2016, 17:33. Показов 1770. Ответов 2 Метки css, html, проблема (Все метки) Всем доброе время суток. У меня загвоздка. Есть задача: Создать на страничке картинки, которые располагались бы по периметру, они должны быть кликабельны, с сылками и прочее. Проблем у меня только в том как расположить их ровно по 10 штук на верху, внизу, справа и слева. Центр оставить фоном, но тоже кликабельным. Что то на подобии того что на картинке которую я прикрепил. Каким кодом это можно сделать в html или css. Помогите кто знает, я думаю это не очень сложная задача...) Миниатюры 0

@MixOnly1 0 / 0 / 0 Регистрация: 07.10.2016 Сообщений: 2
	08.10.2016, 09:21 [ТС]	3
	Спасибо волшебник) 0

Создать кликабельные картинки по периметру блока

Решение