2

彼は、アプリケーションの標準テンプレートに取り組んでいます。私は CSS が苦手で、優れたレスポンシブ デザインを作成することに頭を悩ませています。

これが私の考えです：

ここに画像の説明を入力

これがどのように機能するかです：

デモ

いくつかのJavaスクリプトを使用すると、おそらくこれを実行できますが、CSSでこれが可能であれば、それは素晴らしいことです. 私の質問は、HTML と CSS だけでデザインを作成するにはどうすればよいかということです。

楽しみの前にjsFiddle：

jsフィドル

私のCSS：

body{
    font-family:"Trebuchet MS",sans-serif;
    padding:0px;
    margin:0px;
}

#content{
    min-height: 100%;
    width: 100%;
    position: absolute;
    background-color: #5adc23;
}

input[type="button"]{
    border:2px outset rgb(166, 166, 166);
    display:inline-block;
}

input[type="button"]:hover{
    border:2px inset rgb(166, 166, 166);
    display:inline-block;
    cursor: pointer;
}

#mainbar{
    height: 31px;
    background-color: rgb(109, 164, 227);
    background-image: -webkit-linear-gradient(0deg, rgb(39, 162, 207) 1%, rgb(63, 181, 224) 36%, rgb(63, 181, 224) 64%, rgb(39, 162, 207) 100%);
}

    #mainbar_border{
        height: 100%;
        border-bottom:1px solid rgb(0, 0, 0);
        color: rgb(255, 255, 255); 
        font-family: 'Courier New', serif; 
        font-size: 21px; 
    }

#mainmenu{
    width: 40px;
    height: 96%;
    min-height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
}

    #mainmenu_border{
        height: 99%;
        padding: 4px;
        padding-top: 46px;
        padding-bottom: 19px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
    }

        #mainmenu_item_container{
            list-style-type:none;
        }

#content_app{
    float: left;
    width: 88%;
    height: 96%;
}

    #content_app_border{
        height: 99%;
        padding: 4px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-width: 1px;
        border-right-style: solid;
    }

私のhtml：

<div id='content' class='invoer'>    
    <div id='mainbar'>
        <div id='mainbar_border'>
            Mainbar
        </div>
    </div>
    <div id='mainmenu'>
        <div id='mainmenu_border'>
            <ul id='mainmenu_item_container'>
                <li><input type='button' value='Load content' title='load some more shit to test the resposive design' id='btn' action='loadmoreshit' /></li>
                <li>button</li>
                <li>button</li>
            </ul>
        </div>
    </div>
    <div id='content_app'>
        <div id='content_app_border'>
            content
            <br>
                <br>
                    <br>
         </div>
     </div>
</div>
4

4 に答える 4

2

CSS フレームワーク lite のtwitter.github.io/bootstrap、foundation.zurb.com、またはgumbyframework.comを使用できます。

この方法では、すべてをゼロから構築する必要はありません。レスポンシブな足場、フォーム、テーブル、ボタン、メニューなど、最初から多くのスタイルを設定できます。

初心者として、優れた優れたものに基づいて構築し、そこから学ぶ方が簡単な場合があります.

于 2013-04-22T13:53:09.747 に答える
0

デザインをレスポンシブにする簡単な方法は、メディア クエリを使用することです。
これには、html と css のみが必要です。独自のメディア クエリを修正するか、事前に作成されたレスポンシブ フレームワークを使用できます。Twitterのブートストラップなど。

CSS3 のメディア クエリはデバイスの機能を調べ、それらを使用してあらゆる種類のものを確認できます。例:

- (ブラウザー ウィンドウの)
幅と高さ - デバイスの幅と高さ
- 向き – たとえば、携帯電話は横向きか縦向きか?
- 解像度

次に、これらの機能に従って html のスタイルを設定できます。

于 2013-04-22T13:56:37.383 に答える