私は現在、ハンドヘルド デバイスからアクセスしたときに適切に見えるように、レスポンシブ Web デザイン手法を使用して Web サイトのスタイルを設定しています。要素の配置に Bootstrap を使用し、ナビゲーション バーやフッターなどのスタイル設定にいくつかのカスタム CSS を使用しました。Web を縮小するときにフッターが他の要素とオーバーラップし続けるという事実を除いて、ほとんどの要素にはナビゲーション バーが正常に機能します。ページを縦に。以下のコードを見てください。どんな助けでも大歓迎です。ありがとう。
html
{
margin: 1%;
padding: 0;
}
html, body
{
height: 95%;
}
#body
{
height: 82%;
}
header, footer, nav, section
{
display: block;
}
footer
{
width: 100%;
list-style: inline-block;
position: static;
white-space: nowrap;
border-radius: 4px;
padding-top: 2px;
padding-left: 5px;
vertical-align: baseline;
}
footer p
{
padding: 0.2em;
color: White;
}
#image
{
padding: 0.2em;
}
.nav
{
position: relative;
margin: 20px 0;
width: 100%;
border-radius: 4px;
}
.nav ul
{
margin: 0;
padding: 0;
}
.nav li
{
margin: 10px 5px 10px 0;
padding: 0;
display: inline-block;
list-style: none;
}
.nav a
{
padding: 3px 12px;
text-decoration: none;
color: white;
line-height: 100%;
}
.nav a:hover
{
border: 1px solid #acdd4a;
font-weight: normal;
color: #ffffff;
text-decoration: none;
}
.nav a:active
{
border: 1px solid #acdd4a;
font-weight: normal;
color: #ffffff;
}
.nav .current a
{
border: 1px solid #acdd4a;
color: #fff;
border-radius: 5px;
}
以下は私のマークアップです
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<div class="row-fluid">
<div class="span2">
<p>
Title of webpage
</p>
</div>
<div class="span8">
</div>
<div id="image" class="span2">
</div>
</div>
</header>
<nav class="nav">
<ul>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li><a href="#">Admin</a></li>
<li>@Html.ActionLink("Help", "Contact", "Home")</li>
</ul>
</nav>
<div class="row-fluid" id="body">
<section>
@RenderBody()
</section>
</div>
<footer>
<div class="row-fluid">
<div class="span4">
<p>@User.Identity.Name</p>
</div>
<div class="span5">
</div>
<div class="span3">
<p>
© @DateTime.Now.Year</p>
</div>
</div>
</footer>
</body>
</html>