Web開発レシピ-3(写真中心のWebサイト作成)

#wrapper{ border: 5px solid red}
#wrapper>{ border: 5px solid green}
#wrapper>>*{ border: 5px solid blue}
ローダのWebブラウザの構成を理解します.

背景画像

を入れる必要がありますが、画像は現在のディレクトリではなく親ディレクトリにあります.
親ディレクトリ参照.../
body{background-image: url(../../images/bg.jpg); }このようにして背景画像を取得します.

background-size: cover;로다가 이미지가 반복되지 않고 전부 커버하도록 함

ヘッダIDについて下のクラスはアバターの画像です.
画像を円形に近づけます.
#header .avatar img{
border-radius: 30%
}
画像を囲む

枠線

を作成するには、画像ラベルを含むspanラベルを使用します.
#header .avatar {
border-radius: 30%;
display:inline-block;
}
まず、枠線と画像との距離を指定します.
display: block;画像に追加して塗りつぶす:0.5 rem;枠線に追加されます.1 remは16 pxを表す.
枠線の色と背景の色を白に設定します.完了したコード.
#header .avatar {
border-radius: 30%;
display:inline-block;
padding: 0.5rem;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.25);
}
#header .avatar img{
border-radius: 30%;
display: block;
}
今は修理の番です.
字の色は薄い白で、字の色が白いことを強調します.

강조 글 밑에 점선 추가.

Webページのフォントを追加します.
完了したコード
#header h1{
font-size: 2.5rem;
color: rgba(255, 255, 255, 0.5);
font-family: 'Hi Melody', cursive;
font-weight: 300;
}
#header h1 strong{
font-size: 3rem;
color: white;
border-bottom: 1px dotted white;
}

説明文

を作成します.
PhoneTelo Fontelloにアイコン画像を取りに行きます
電話電報文書を参考にする.
アイコンの背景
#header ul.icons li{
display: inline-block;
border-radius: 100%;
色
border: 1px solid rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.05);
サイズ
width: 1.5rem;
height: 1.5rem
ツールバーの
display: inline-flex;
justify-content: center;
align-content: center;
}
アイコン
#header ul.icons li a{
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
アイコンフォント
#header ul.icons li .label{
display: none;
}

アイコン

中央揃え
#header{ text-align: center; }

見出しのクリア

写真の内容を整理する。

コンテンツコードの設定

			<!-- Main -->
				<section id="main">
					<!-- Thumbnails -->
						<section class="thumbnails">
				</section>
			<!-- Footer -->
				<footer id="footer">
					</footer>
	

#main .thumbnails{
display: flex;
}
基本的な写真のソートに使用します.でもこれならサイトの大きさに関係なく写真だけで自分の大きさを変えていけば
#main .thumbnails>div{
flex-grow: 1;
}
しかしこれはdivの大きさを制御するので領域の大きさが大きくなり、画像の大きさを変えると、
#main .thumbnails img{
width:100%;
}
今少しデザインを変えて、cssは基本的にラベルの上で設計して、それを除去するには、cssリセットを行う必要があります.
https://meyerweb.com/eric/tools/css/reset/
reset.cssファイルを生成します.

#main .thumbnails{
    display: flex;
  }
  #main .thumbnails>div{
    flex-grow: 1;
    margin-right: 1rem;
    margin-left: 1rem;
  }
  #main .thumbnails img{
    width:100%;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #main .thumbnails h3{
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) ;

    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;

    padding: 0.5rem;
    text-align: center;

    background-color: rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1rem;
  }
  

結果

ネイル

画面全体ではなく、真ん中に線を描くだけです.
脚注に描かれているのではなく、奥の前に線が引かれています.

beforeはpseudoクラスです
http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/
①::before–実際のコンテンツの前に生成されたサブエレメント
#footer:before{content:“abc”}はを表す
キーabcは、要素の前に生成されます.
したがって、ここでは直線のプロパティを指定します.
禅法
margin: 0 auto;
利益に2つの値を入れると、1番が上下2番で左右の値になります.つまり真ん中に来ましょう

  #footer{
    text-align: center;
    color: rgba(255, 255, 255, 0.5);

    font-weight: 200;
    padding-bottom: 4rem;
    font-size: 0.6rem;
  }
  #footer:before{
    content: '';
    display: block;
    margin: 2rem auto;
    width: 10rem;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

フッターを使用します。

ウェブサイトが無限大ではなく一定の大きさであれば、拡張を停止します.
画面を含むパッケージについて
#wrapper{ border: 1px solid red; max-width: 68rem; }
68 remを超えると、写真は大きくならず、サイトの背景を増やすだけです.

でもこれじゃ内容が左に傾くだけ
margin: 5rem auto;これで内容が真ん中に集中します.
アイコン上に置くと色が変わる機能.
#header ul.icons li:hover{
border: 1px solid rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.2);
}

しあげ

画面が小さくなると、すべての写真が小さくなります.このときはすべての写真ではなく、一枚一枚の写真です.
@media(max-width:480px){
#main .thumbnails{
display: block;
}
}
メディアクエリーを使用して、480ピクセル以下のピクセル範囲で、写真が全画面表示(ソートなし)であることを確認します.

はんのうせっけい