ヘッダーと旗をつくる方法


この記事では、伝統的なアプローチだけでなく、Flexboxアプローチを使用して、あなたのウェブサイトのCSSで簡単なヘッダーを設計する方法を学びます.
HTML
<section class="header">
    <h1>Company Name</h1>
    <p>Company Mission Statement goes here</p>
    <a class="btn-bgstroke">Call To Action</a>
</section>
上記のHTMLコードには、クラス名ヘッダーを持つセクションコンテナがあり、それぞれH 1、P、およびAの3つの子があります.
かなりまっすぐ前方!

CSS
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900);

h1,
p,
a{
  margin: 0;
  padding: 0;
  font-family: 'Lato';
}

h1 {
  font-size: 2.8em;
  padding: 10px 0;
  font-weight: 800;
}

p {
  font-size: 1.1em;
  font-weight: 100;
  letter-spacing: 5px;
}

.header {
  width: 100%;
  padding:60px 0;
  text-align: center;
  background: #33cccc;
  color: white;
}


.btn-bgstroke {
  font-size: 20px;
  display: inline-block;
  border: 1px solid white;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 300;
  margin-top: 30px; 
}

.btn-bgstroke:hover {
  background-color: white;
  color: #33cccc;
}
あなたが見ることができるように、CSSはかなりまっすぐ前方です.
私はテキストalignを使用しました:センター規則に.内部要素を水平にするヘッダークラス.
垂直に要素を中心にするために、私はトップと底のパドルを与えました.ヘッダクラスも同様です.
内側の要素の内容が成長するにつれて外側容器が垂直に成長できるように、これは固定高さを与えるよりも優れています.