私が作成しようとしているもの
HTML5とCSS3のみを使用して、3つの円の水平方向の行。それぞれが異なる画像の上にあり、別の画像と1つのテキストが含まれています。
私が試したこと
div内にdivを追加し、高さと幅を指定するだけでこれを作成しようとしましたが、機能しませんでした。非常に単純なことを複雑にしすぎているか、非常に明白なことを忘れているように感じます。これを行う最も簡単な方法は何ですか？
メモ 気楽に！私はたった2ヶ月間自己学習しようとしています。
HTML
<div class="circlewrapper">
<div class="sector" id="read">
<img src="images/test1.jpg" class="image1" height="165" width="165" />
<div class="round" id="reading">
<img src="images/book.jpg" class="image2" height="20" width="20" />
<p id="readread">Read</p>
</div>
</div>
<div class="sector" id="listen">
<img src="images/test2.jpg" class="image1" height="165" width="165" />
<div class="round" id="listening">
<img src="images/book.jpg" class="image2" height="20" width="20" />
<p id="listlist">Listen</p>
</div>
</div>
<div class="sector" id="watch">
<img src="images/test3.jpg" class="image1" height="165" width="165" />
<div class="round" id="watching">
<img src="images/book.jpg" class="image2" height="20" width="20" />
<p id="watchwatch">Watch</p>
</div>
</div>
</div>
CSS
.circlewrapper {
width: 800px;
height: 270px;
padding: 0px;
margin: 0px auto 0px auto;}
.sector {
width: 250px;
height: 250px;
padding: 0px;
margin: 8px;
display: inline;}
.round {
height: 165px;
width: 165px;
padding: 0px;
margin: 0px auto 0px auto;
background-color: blue;
border-radius: 165px;
-moz-border-radius: 165px;
-webkit-border-radius: 165px;
z-index: 10;}
p {
text-align: center;
color: white;}
.image1 {
margin: 0px auto 0px auto;
padding: 0px;
z-index: 5;}
.image2 {
margin: 0px auto 0px auto;
padding: 0px;}