ヘッダーと旗をつくる方法
4992 ワード
この記事では、伝統的なアプローチだけでなく、Flexboxアプローチを使用して、あなたのウェブサイトのCSSで簡単なヘッダーを設計する方法を学びます.
HTML
かなりまっすぐ前方!
CSS
私はテキストalignを使用しました:センター規則に.内部要素を水平にするヘッダークラス.
垂直に要素を中心にするために、私はトップと底のパドルを与えました.ヘッダクラスも同様です.
内側の要素の内容が成長するにつれて外側容器が垂直に成長できるように、これは固定高さを与えるよりも優れています.
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を使用しました:センター規則に.内部要素を水平にするヘッダークラス.
垂直に要素を中心にするために、私はトップと底のパドルを与えました.ヘッダクラスも同様です.
内側の要素の内容が成長するにつれて外側容器が垂直に成長できるように、これは固定高さを与えるよりも優れています.
Reference
この問題について(ヘッダーと旗をつくる方法), 我々は、より多くの情報をここで見つけました https://dev.to/hirajatamil/how-to-create-a-header-banner-in-html-css-29kテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol