<!doctype html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.border {
width: 100%;
background-color: yellow;
}
.header {
height: 100px;
position: fixed;
top: 0;
}
.menu {
height: 100px;
background-color: #0FF;
margin-top: 100px;
}
.select {
background-color: #0AF;
height: 100px;
width=100%;
}
.content {
height: 1000px;
margin-bottom: 100px;
}
.leftbord {
width: 15%;
float: left;
background-color: #FF3EFF;
height: 100%;
}
.homepage-main {
background-color: #0FF;
float: left;
width: 85%;
height: 100%;
}
.footer {
height: 100px;
position: fixed;
bottom: 0px;
}
.menu ul li {
float: left;
width: 10%;
height: 80px;
list-style-type: none;
margin: 5px;
border-width: 2px;
border- style:solid;
text-align: center;
}
.warthunder-icon {
background-image: url("image/warthunder-icon.jpg");
background-repeat: no-repeat;
width: 100%;
background-color: #fff;
background-position: center;
}
.usa-flag {
background-image: url("image/usa-flag.jpg");
background-size: cover;
}
.menu-botton {
display: block;
text-indent: -9999px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="header border">header</div>
<div class="menu">
<ul>
<li class="warthunder-icon"><a class="menu-botton" href="homepage.html">homepage</a></li>
<li class="usa-flag"><a class="menu-botton" href="usa.html">usa</a></li>
<li class="greman-flag"><a class="menu-botton" href="greman.html">greman</a></li>
<li class="ussr-flag"><a class="menu-botton" href="ussr.html">ussr</a></li>
<li class="britain-flag"><a class="menu-botton" href="britain.html">britain</a></li>
<li class="japan-flag"><a class="menu-botton" href="japan.html">japan</a></li>
<li class="ltalia-flag"><a class="menu-botton" href="ltalia.html">ltalia</a></li>
<li class="france-flag"><a class="menu-botton" href="france.html">france</a></li>
</ul>
</div>
<div class="select">select</div>
<div class="content">
<div class="leftbord">left</div>
<div class="homepage-main">main</div>
</div>
<div class="footer border">footer</div>
</body>
</html>
創作內容
homepage
war thunder (12)