1

ここに画像の説明を入力してください

ここに私の問題がありますどうすれば私のヘッダーをより良く見せることができますか

以下はコーディングです...!!

1 Index.php

<div class="header">
<div class="headerFont"><a href="index.php">Yo! Yo! Honey Singh..!!</a>
</div>
<div class="Login">
<form>
Email :<input type="text">
Password :<input type="password">
<input type="submit" value="Login" >
<input type="button" value="register">
</form>
</div>
</div>

2 Web-Style.css

.header{
 top:0;
left:0;
padding:10px;
background:#00688B;
width:100%;
height:footer-<length>;
box-shadow:2px 2x 5px #08298A;
border:1px solid black;
text-shadow:2px 2px black;
}

.header a{
 color:white;
}

.headerFont{
font-family:MATURA MT  ;
font-size:22px;
display:table-cell;
}

.Login{
display:block;
position:absolute;
top:15px;
right:50px;
}

3 Mobile-Style.css

.header {
 width: auto;
}

今、私はウェブサイトのようなボタンを取得する方法を知る必要があります[PIC]-> http://i.stack.imgur.com/vlx09.png モバイルではボタンを表示できますが、PCではボタンを表示できません.. ?? ？

4

2 に答える 2

1
  1. ウェブサイトのモバイル版で必要なボタンを作成します。
  2. ボタンを非表示にするCSSを追加します（例：display：none）。
  3. メディアクエリでCSSを使用して、モバイルデバイスにボタンを表示します。

詳細はこちら：

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

于 2012-12-29T16:43:52.260 に答える
-1

これは、JavaScriptを使用し、要求元のブラウザーのタイプを確認することで実行できます。

次のようなJavaScriptを使用して、モバイルブラウザのリクエストを検出できます。

if ((screen.width < 480) || (screen.height < 480)) {
    location.replace('/mobile/');
   /*Get buggon element by id and show it else hide it*/
  }

または、次のjavascriptを使用してモバイルブラウザを移動止めし、ボタンを非表示にすることもできます。

https://github.com/miohtama/detectmobile.js

于 2012-12-29T11:05:14.633 に答える