2

リビングソーシャルと同じ設定のウェブページとそのログインページを取得しようとしています。基本的に、中央に大きなdivがあり、その中に他のものが含まれています。

彼らのCSSを見ると、彼らは多くのグリッドベースのデザインを使用していることがわかります

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,    
.grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16
{
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}

私はCSSにまったく慣れておらず、自分で物事を簡単にするためのフレームワークの助けを探しています。

質問

  • リビングソーシャルもCSSフレームワークを使用していますか？
  • 私がlivingsocialのようなWebテンプレートを取得しようとしている場合、どのフレームワークが私の最善の策ですか？ブループリントCSSを見ましたが、デモページは私が望むものとはまったく異なります。
  • 今日、私はセマンティックグリッドcssシステム（http://semantic.gs/）に出くわしましたが、リビングソーシャルのようなスケルトンを作成するためにどのように/何をする必要があるのか​​理解できません。
  • フレームワークの使用方法に関する優れたチュートリアルがあれば、非常に役立ちます。
4

3 に答える 3

2

質問への回答:

  • リビングソーシャルもCSSフレームワークを使用していますか? :

それのように思えます。.grid_xものは、グリッドベースのフレームワークで見つけられるものであり、その中にはたくさんあります。

  • Livingsocial のような Web テンプレートを取得しようとしている場合、どのフレームワークが最善の策ですか? ブループリント CSS を見ましたが、そのデモ ページは私が望むものとはまったく異なります

フレームワークに飛び込む前に、まず CSS の基本を学びましょう。フレームワークが何を行い、どのフレームワークがニーズに合っているかを知ることは常に良いことです。フレームワークが必要な言語の基本を知らなければ、それはわかりません。グーグルで検索すると膨大な量の CSS チュートリアルが得られますが、私はこのサイトが特に気に入っています: http://css-tricks.com/

  • 今日、私はセマンティック グリッド css システム (http://semantic.gs/) に出くわしましたが、やはり社会生活のようなスケルトンを作成するためにどのように/何をする必要があるかわかりません。

繰り返しますが、CSS の基本を学びます。フレームワークまたはグリッドから始めると、すべてが明確になります。

  • フレームワークの使用方法に関する優れたチュートリアルは、非常に役立ちます。

別の提案をしてもよろしいですか？フレームワークとしてhttp://compass-style.org/を使用します。比較的簡単に Web サイトを作成するためのすべての基本ツールがあり、タイポグラフィ、div の配置、アイコン スプライト、およびグリッドを適切に作成するためのヘルパーもホストされています。さらに、CSS が持つクロスブラウザーの問題はすべて既に説明されています。

チュートリアルはここにあります: http://compass-style.org/help/

于 2011-08-23T22:14:48.660 に答える
0

float:left と float:right を使用して 2 つの div を並べて配置しているようです。

あなたが持っているなら;

<div style="float:left">Left div</div>
<div style="float:right">Right div</div>

それらは隣り合って表示されます。

これらの 2 つの div 内に、他の div などの他のコンテンツを配置します。

別の div を追加するたびに、css を使用して配置する必要があります。

.div1 { margin-top:20px; padding-left:30px }

それが LivingSocial のようにコンテンツを配置する方法です。

それらをすべて配置するのは少し難しいかもしれませんが、完了したら、画面上でアイテムを移動してコンテンツを追跡するのは非常に簡単です.

これが役立つことを願っています

編集

CSS の世界に本当に関わりたくない場合は、http://themeforest.net/を見て、購入できるテーマがあるかどうかを確認してください。

于 2011-08-23T22:10:08.213 に答える
0

Semantic は非常に良い方法だと思います。レスポンシブでもあるため、サイトを HTML5 をサポートするデバイスでさまざまなモバイル デバイスの画面幅に対応させたい場合は、Semantic についてもう少しよく知ることをお勧めします。

レスポンシブ Web デザインについて詳しくは、http: //www.alistapart.com/articles/responsive-web-design/をご覧ください。

セマンティックについて覚えておくべきことの 1 つは、それが LessCSS の実装であることです。LessCSS の詳細については、こちらを参照してください: http://lesscss.org/ LessCSS は、Web サイトのスタイル設定への扉を開きます。価値がある。

また、今日 SmashingMagazine に投稿されたこの記事を見て ください: http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/あなたの質問。

Smashing Magazine の RSS フィードを購読することを強くお勧めします。これは、Web 開発の最新のトレンドとテクニックを学ぶのに最適です。

最後に、セマンティックを学習するための最善の策は、ダウンロードして実行し、分析することです。デモが付属している必要があります。また、 http://semantic.gs/のページの少し下にあるチュートリアル セクションもあります。

于 2011-08-23T22:18:18.490 に答える