[英]Styling a home page image layout - target div or img?
我僅使用圖像內容而不是文本來設置主頁樣式。
當我設置圖像布局的樣式時,應該僅在div類中完成此操作(例如,ceiling>還是我需要為每個img類設置樣式(.ceiling> a> img)
只是有意識的,我將深入探討這里的樣式,何時可以將其設置在頂級div中。
<div class="category4block">
<div class="ceiling"><a href="http://example.com/ceiling"><img src="http://example.com/image/data/Home Page /Ceiling.jpg" /></a></div>
<div class="wall"><a href="http://example.com/wall"><img src="http://example.com/image/data/Home Page /Wall.jpg" /></a></div>
<div class="island"><a href="http://example.com/island"><img src="http://example.com/image/data/Home Page /Island.jpg" /></a></div>
<div class="downwall"><a href="http://example.com/downwall"><img src="http://example.com/image/data/Home Page /Downwall.jpg" /></a></div>
</div>
.category4block {
width: 100%;
margin-left: -10px;
clear:both;
}
.ceiling {
float: left;
width: 23%;
margin-left: 5px;
margin-bottom: 20px;
}
.ceiling > a > img {
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}
.wall {
float: left;
width: 23%;
margin-left: 22px;
margin-bottom: 20px;
}
.wall > a > img{
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}
.island {
float: left;
width: 23%;
margin-left: 22px;
margin-bottom: 20px;
}
.island > a > img{
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}
.downwall {
float: left;
width: 23%;
margin-left: 22px;
margin-bottom: 20px;
}
.downwall > a > img{
border-style: solid;
border-width: 10px;
max-height: 240px;
max-width: 100%;
width: 100%;
}
您可以僅設置“包裝器”的樣式,即:.ceiling,.wall,.island,.downwall
.ceiling{float: left; width: 23%; margin-left: 5px; margin-bottom: 20px;}
.wall, .island, .downwall{float: left; width: 23%; margin-left: 22px; margin-bottom: 20px;}
那么您可以為圖像指定一個具有樣式的特定類,例如:image
<img class="image" src="YOUR_IMAGE_SOURCE" />
<img class="image" src="YOUR_IMAGE_SOURCE" />
<img class="image" src="YOUR_IMAGE_SOURCE" />
<img class="image" src="YOUR_IMAGE_SOURCE" />
.image{border-style: solid; border-width: 10px; max-height: 240px; width: 100%;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.