これまでのところ単純なサイトがありますが、2つの問題があります。サイトが高解像度テレビで上がる可能性があり、それらをうまくスケーリングしたいので、私はパーセンテージですべてを行いました。スケーリングは画像で機能しますが、idは、ナビゲーションバーの背景とテキストをスケーリングして、小さく見えないようにすることも好みます。
2番目の問題は、サイトが押しつぶされると、下の画像がナビゲーションバーを覆い、ナビゲーションバー要素の下に流れないことです。スマートフォンに適した拡張性があるため、この機能が気に入っています。
これがhtmlです：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="headish.css">
<title>New Site</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img src="images/logo.png" alt="logo" />
<ul>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Biographies">Biographies</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Careers">Careers</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
<div id="maincont">
<img src="images/second.png" alt="image">
</div>
</div>
</div>
</body>
</html>
これがcssです：
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
position: relative;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
text-align: center;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
padding-left: 10%;
}
#maincont img{
border-radius: 7%;
width: 30%;
}