私はウェブページのデザインにかなり慣れておらず、YouTubeを閲覧していたウェブサイトのレイアウトについて学びました。このビデオに出くわし、vloggerが彼のお気に入りのウェブサイトのデザイントップ5について説明しています。
ある時1:44
、彼は1ページのデザインについて話し始め、SplitSecndについて話します。私は彼らの背景がデザインされている方法が好きです。
div
要素に異なる背景画像または色を与える方法を知っていますが、類似した背景を作成したり、背景を複製したりする方法を知りたいですか?彼らの背景には画像と三角形が切り取られており、新しいセクションが始まります:)
それについての助けをいただければ幸いです。いくつかのサンプルコードで説明をいただければ幸いです:)
<!DOCTYPE html>
<html>
<title> Lot of Divs </title>
<style>
body{
margin: 0;
padding: 0;
}
.content{
width: 1280px;
height: 800px;
font-family: "Courier New",monospaced;
font-size: 18px;
color: white;
}
#div1{
background-image: url("../img/mentalist-1.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
#div2{
background-image: url("../img/prisonbreak-1.jpg");
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
p{
text-align: justify;
}
</style>
<body>
<div class = "content" id="div1">
<p>
An infamous 'psychic' abandons his public persona, outing himself as a fake, to focus on his work as a consultant
for the California Bureau of Investigation in order to find "Red John," the madman who killed his wife and daughter.
</p>
</div>
<div class = "content" id="div2">
<p>
Structural Engineer Michael Scofield turns himself in to the Fox River Penitentiary in order to break out his brother Lincoln Burrows,
who is on death row for the murder of the Vice President's brother.
But Lincoln was set up by some of the Company (an agency formed by corrupt government officials) guys,
headed by General Jonathan Krantz. Michael breaks out from Fox River with his brother Lincoln and other convicts
</p>
</div>
</body>
</html>
私が達成しようとしていることは次のとおりです。