Div布局定位

时间：2016-10-12 13:20:15

标签： javascript jquery html layout

我正在尝试完成以下布局：

Target Layout

我想要一个有四个方形链接的居中大脑。如果您将鼠标悬停在导航按钮的右侧，则应显示左右两侧的“宝丽来”。因此，如果您将鼠标悬停在图片中的第一个上方，则应显示第一个偏光镜左上角。

我尝试了以下div结构：

.html,
body {
  height: 100%;
}
.title {
  font-family: lato;
}
.main-content {
  width: 100%;
  float: left;
  background-color: #fefdf9;
  height: 100%;
}
.container {
  height: 100%;
  width: 100%;
  margin: 0px auto;
}
.page {
  width: 100%;
  float: left;
  padding: 0px 0px 0px 0px;
}
.top-left {
  background-color: #fefdf9;
  width: 35%;
  float: left;
  padding: 0px 0px 0px 0px;
  min-height: 1px;
}
.top-middle {
  background-color: #fefdf9;
  width: 30%;
  float: left;
  padding: 0px 0px 0px 0px;
}
.top-right {
  background-color: #fefdf9;
  width: 35%;
  float: left;
  padding: 0px 0px 0px 0px;
  min-height: 1px;
}
.content {
  width: 100%;
  float: left;
  height: auto;
  padding-top: 8px;
}
.footer {
  background-color: #383838;
  text-align: center;
  float: left;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  margin: auto;
}
.FooterText {
  FONT-SIZE: 26px;
  FONT-FAMILY: "Lato Bold";
  color: rgb(255, 79, 78);
}
.header {
  width: 40%;
  float: left;
  max-height: 60px;
}
.header-top {
  width: 100%;
  float: left;
  line-height: 0;
  font-family: "Lato Thin";
}
.header-bot {
  width: 100%;
  height: 4%;
  display: inline;
  font-family: "Lato Black";
  font-size: 30px;
  margin-top: -5px;
}
.Left {
  width: 37%;
  min-height: 1px;
  float: left;
  white-space: nowrap;
}
.left > div {
  height: 50px;
  width: 100px;
  background: #555;
  display: inline-block;
  margin: 10px;
}
.Middle {
  width: 26%;
  float: left;
  margin: auto;
  height: 580px;
}
.Right {
  width: 37%;
  min-height: 1px;
  float: left;
}
#h1 {
  margin: 0px;
  padding: 0px;
}
img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: crisp-edges;
}
#Willkommenstext {
  font-size: 18px;
  text-align: justify;
}
.News {
  position: relative;
  width: 40%;
  padding-left: 20%
}
.News img {
  border: 10px solid #fff;
  height: 100%;
  overflow: hidden;
  max-height: 100%;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
  -moz-box-shadow: 3px 3px 3px #777;
  box-shadow: 3px 3px 3px #777;
}
.News p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  left: 60px;
  font: 400 18px/1'Lato', cursive;
  color: #888;
}
.Kontakt {
  position: relative;
  width: 40%;
  padding-left: 25%;
  margin-top: -15%;
}
.Kontakt img {
  border: 10px solid #fff;
  height: 100%;
  overflow: hidden;
  max-height: 100%;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
  -moz-box-shadow: 3px 3px 3px #777;
  box-shadow: 3px 3px 3px #777;
}
.Kontakt p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  left: 60px;
  font: 400 18px/1'Lato', cursive;
  color: #888;
}
.Kalender {
  position: relative;
  width: 40%;
  padding-left: 10%
}
.Kalender img {
  border: 10px solid #fff;
  height: 100%;
  overflow: hidden;
  max-height: 100%;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
  -moz-box-shadow: 3px 3px 3px #777;
  box-shadow: 3px 3px 3px #777;
}
.Kalender p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  left: 60px;
  font: 400 18px/1'Lato', cursive;
  color: #888;
}
.Anfahrt {
  position: relative;
  width: 40%;
  padding-left: 5%;
  margin-top: -15%;
}
.Anfahrt img {
  border: 10px solid #fff;
  height: 100%;
  overflow: hidden;
  max-height: 100%;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
  -moz-box-shadow: 3px 3px 3px #777;
  box-shadow: 3px 3px 3px #777;
}
.Anfahrt p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  left: 60px;
  font: 400 18px/1'Lato', cursive;
  color: #888;
}
.left1 {
  width: 10%;
  background-color: white;
  min-height: 1px;
}
.left2 {
  width: 10%;
  background-color: white;
  min-height: 1px;
}
body {
  background: #F1F1F1;
  padding: 0;
  margin: 0;
  font-size: small;
}
ul.square-menu {
  font-size: 0;
  list-style-type: none;
  list-style: none;
  padding: 0;
  font-family: "Kavoon", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 400px;
  margin: 40px auto;
}
ul.square-menu li {
  float: left;
  margin: 0px;
}
ul.square-menu li a {
  display: block;
  text-decoration: none;
  padding: 80px 60px;
  color: white;
  font-weight: normal;
  font-size: 150%;
  width: 60px;
  height: 20px;
  text-align: center;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.1s ease-in;
  -ms-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
ul.square-menu li a.slink-x {
  background-image: url(../images/NavLeftUp.gif);
  background-repeat: no;
  background-size: 100%;
}
ul.square-menu li a.slink-y {
  background-image: url(../images/NavRightUp.gif);
  background-repeat: no;
  background-size: 100%;
}
ul.square-menu li a.slink-z {
  background-image: url(../images/NavLeftDown.gif);
  background-repeat: no;
  background-size: 100%;
}
ul.square-menu li a.slink-a {
  background-image: url(../images/NavRightDown.gif);
  background-repeat: no;
  background-size: 100%;
}
ul.square-menu li a:hover {
  font-size: 26px;
  a -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  -moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link href="css/styles.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="main-content">
    <div class="container">
      <div class="page">

        <div class="top-left">
        </div>

        <div class="top-middle">
          <div class="header">

            <div class="header-top" style="display=" inline="">
              <h1>Test Header</h1>
            </div>

            <div class="header-bot">
              <h2>Test Underline</h2>
            </div>
          </div>
        </div>

        <div class="top-right">
        </div>

      </div>


      <div class="content">
        <div class="Left">

          <div class="News">
            <p>News</p>
            <img src="./images/news.jpg">
          </div>

          <div class="Kontakt">
            <p>News 2</p>
            <img src="./images/news.jpg">
          </div>

        </div>

        <div class="Middle">

          <ul class="square-menu">
            <li>
              <a href="#" class="slink-x">Home</a>

            </li>
            <li>
              <a href="#" class="slink-y">About</a>
            </li>
            <li>
              <a href="#" class="slink-z">News</a>
            </li>
            <li>
              <a href="#" class="slink-a">Contact</a>
            </li>
            <br style="clear:both;" />
          </ul>


          <table id="Willkommenstext" width="420" border="0" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula. Proin arcu velit, euismod a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula.
                  Proin arcu velit, euismod a.</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="Right">
          <div class="Kalender">
            <p>Kalender</p>
            <img src="./images/news.jpg">
          </div>

          <div class="Anfahrt">
            <p>Anfahrt</p>
            <img src="./images/news.jpg">
          </div>

        </div>
        <div class="footer">

          <table width="50%" align="center">
            <tbody>
              <tr>
                <td>BildLogo</td>
                <td>Impressum</td>
                <td>About</td>
                <td>Kontakt</td>
              </tr>
            </tbody>
          </table>

        </div>
      </div>
</body>

</html>

结果如下：

enter image description here

我是一个绝对的初学者并设法达到这一点，所以我不会停止^^据我所知，我不能用css和悬停来改变盒子的可见性，因为我的div不是嵌套的。

我偶然发现了javascript和jquery，但这看起来有点太复杂，无法在不学习语言的情况下使用它。

有没有办法改变div结构，所以我可以用css隐藏宝丽来？

我非常感谢这个问题的解决方案，我几天后就被困住了。如果除了java / jquery之外别无其他方式，我也会采用它：D

非常感谢我的朋友们！ ：）

0 个答案:

没有答案
相关问题
最新问题