0

私はコーディングに苦労しているビジュアルデザイナーです。本題に切り込みます。以下に問題があります。

私が達成しようとしていること：

現在のジレンマを含む、目標 1 と目標 2 のスクリーンショットを以下にリンクします (私は初心者なので、まだスクリーンショットを含めることは許可されていません。

https://www.dropbox.com/s/libc4wp970xz3ms/Screenshot.png?dl=0

私が達成したかったのは、ナビゲーション バーを常に中央に配置することでした。ワイド (1300 ピクセル) にしました。白いコンテナーは小さくなり、その外側にあるものはすべて非表示に設定されます。

以下は私のコードです：

    <!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Example Page</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
        <div class ="main-container">
            <div class = "banner-container">
                <div class="cyan-banner"></div>
                <div class="green-banner"></div>
                <div class="magenta-banner"></div>
                <div class="orange-banner"></div>
            </div><!--end of .banner-container-->
        </div><!--end of .main-container-->
    </body>
</html>

@import 'normalize';
@import 'susy';
@import 'compass';

$susy : (
  columns: 12, 
  debug: (image: show),
  output: overlay
);

.main-container {
    @include clearfix;
    @include container(1200px);
    height: 100vh; // Forces wrap to full height.

  // Mobile
  @media (max-width: 419px) {
    @include show-grid(1);
  } 

  // Changing to a 4 column grid
  @media (min-width: 420px) {
    @include show-grid(4);
  }    

  // Changing to a 8 column grid
  @media (min-width: 841px) {
    @include show-grid(8);
  } 

  // Changing to a 12 column grid
  @media (min-width: 1200px) {
    @include show-grid(12);
  }
}

// Color Theme
$cyan: #148ec3; $magenta: #c9197a; $orange: #de8826; $green: #008a52; $gray: #a1a1a0;

body {
    background: #d2d2d2;
}

.main-container {
    background: white;
}

.banner-container {
    @include clearfix;
}

.banner-container > div {
    width: 1300px;
    position: fixed;
    top: 50px;
}

.cyan-banner {
    height: 60px;
    background: $cyan;
    z-index: 5;
}

.green-banner {
    height: 60px;
    background: $green;
    z-index: 4;
    @include transform(rotate(2deg));
}

.magenta-banner {
    height: 60px;
    background: $magenta;
    z-index: 3;
    @include transform(rotate(4deg));
}

.orange-banner {
    height: 60px;
    background: $orange;
    z-index: 2;
    @include transform(rotate(-2deg));
}

どんな助けや提案も大歓迎です。

フォーラムで回答と手がかりを探していますが、私のような問題を抱えているフォーラムが見つかりません。

ありがとうございました。

アンソニー

4

1 に答える 1

0

1 つのナビゲーションと、いくつかの回転および移動された (そして適切に配置された) 疑似要素を使用します。

html,
body {
  height: 100%;
}
.container {
  width: 80%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid black;
}
nav {
  height: 75px;
  background: steelblue;
  margin-top: 75px;
  position: relative;
}
nav:before {
  content: '';
  position: absolute;
  width: 150%;
  height: 100%;
  background: orange;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(-2deg);
  z-index: -1;
}
nav:after {
  content: '';
  position: absolute;
  width: 150%;
  height: 100%;
  background-image: linear-gradient(to bottom, magenta 0, magenta 25%, green 25%, green, 75%, magenta 75%, magenta);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(3deg);
  z-index: -1;
}
<div class="container">
  <nav></nav>
</div>

現時点では、「緑色」の領域は大きな画面サイズでのみ表示されますが、メディア クエリによって回転が増加する可能性があることに注意してください。あるいは、より洗練されたグラデーションで何かを行うことができるかもしれません。

于 2015-03-05T10:16:39.820 に答える