我正在尝试制作页面,水平菜单下方的div需要如下:
Div1是具有蓝色背景的
Div2是一个红色背景(里面有黄色背景的元素)
Div3是具有绿色背景的
我需要div 1在左上角,div 2在右边,div 3在左下角,所以他们看起来是这样的:https://imgur.com/a/bp45n
HTML
<div class="top">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="navigation">
<div class="menu">
<input type="button" value="Option 1" />
<div class="submenu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="menu">
<input type="button" value="Option 2" />
<div class="submenu">
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</div>
<div class="menu">
<input type="button" value="Option 3" />
<div class="submenu">
<a href="#">Link 7</a>
<a href="#">Link 8</a>
<a href="#">Link 9</a>
</div>
</div>
<div class="menu">
<input type="button" value="Option 4" />
<div class="submenu">
<a href="#">Link 10</a>
<a href="#">Link 11</a>
<a href="#">Link 12</a>
</div>
</div>
<div class="menu">
<input type="button" value="Option 5" />
<div class="submenu">
<a href="#">Link 13</a>
<a href="#">Link 14</a>
<a href="#">Link 15</a>
</div>
</div>
</div>
<div class="topleft">
Korisni linkovi:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Orders</a></li>
</ul>
</div>
<div class="contentright">
News
<div class="news">
<pre>Neki tekst za neke novine,
detaljnije na linku ispod
</pre>
<a href="#">Detaljnije</a>
</div>
<div class="news">
<pre>Neki tekst za neke novine,
detaljnije na linku ispod
</pre>
<a href="#">Detaljnije</a>
</div>
<div class="news">
<pre>Neki tekst za neke novine,
detaljnije na linku ispod
</pre>
<a href="#">Detaljnije</a>
</div>
<div class="news">
<pre>Neki tekst za neke novine,
detaljnije na linku ispod
</pre>
<a href="#">Detaljnije</a>
</div>
<div class="news">
<pre>Neki tekst za neke novine,
detaljnije na linku ispod
</pre>
<a href="#">Detaljnije</a>
</div>
<div class="news">
<pre>Neki tekst za neke novine,
detaljnije na linku ispod
</pre>
<a href="#">Detaljnije</a>
</div>
</div>
<div class="bottomleft">
<pre>
Bio jednom jedan zeka
Bio jednom jedan zeka
Bio jednom jedan zeka
Bio jednom jedan zeka
Bio jednom jedan zeka
Bio jednom jedan zeka
</pre>
</div>
</body>
CSS
body
{
/*background-image:url("background.jpg");*/
}
.top
{
margin-top:5%;
color:white;
font-size:20px;
white-space:nowrap;
width: 80%;
text-align: center;
padding-bottom:5%;
}
.top .left
{
display:inline-block;
width: 40%;
}
.top .right
{
display:inline-block;
text-align:right;
width: 40%;
}
.navigation
{
display:inline;
margin-left:10%;
margin-right:10%;
text-align:center;
font-size:0;
}
.menu
{
display:inline-block;
position:relative;
font-size:15px;
border:5px solid black;
}
.menu input
{
height:50px;
width:200px;
background-color:black;
color: white;
letter-spacing:1px;
border: 1px solid black;
}
.menu:first-child
{
border-top-left-radius:20px;
}
.menu:last-child
{
border-top-right-radius:20px;
}
.menu:hover
{
border-color:gray;
}
.menu input:hover
{
background-color:gray;
color:black;
border-color:gray;
}
.menu:hover .submenu
{
display:block;
}
.submenu
{
display:none;
position:absolute;
text-align:center;
background-color:gray;
width:100%;
}
.submenu a
{
display:block;
color:black;
text-decoration:none;
text-align:center;
padding-bottom:6px;
padding-top:6px;
border:1px solid black;
width:100%;
}
.submenu a:hover
{
background-color:black;
color:white;
}
.submenu a:first-child
{
border-top:none;
}
.topleft
{
display: inline-block;
position:relative;
margin-left:10%;
margin-top:2%;
box-shadow:2px 5px 10px black;
color:white;
font-size:20px;
font-family:verdana;
background-color:blue;
}
.topleft ul
{
display:inline;
list-style-type:none;
margin:inherit;
}
.topleft li
{
padding:15px;
margin:inherit;
}
.topleft li a
{
color:white;
text-decoration:none;
}
.topleft li a:hover
{
background-color:gray;
}
.contentright
{
display:inline-block;
background-color:red;
margin-left:10%;
position:relative;
border:1px solid black;
}
.news
{
background-color:yellow;
display:inline-block;
border:1px solid black;
}
.bottomleft
{
background-color:green;
display: block;
margin-left:10%;
box-shadow:2px 5px 10px black;
width:155px;
}
这是jsfiddle链接
https://jsfiddle.net/Le6y0wx8/
请记住,我不允许使用浮动财产。