以下面的HTML5代码为例来学学习页面的百分比布局:
<div class="comic">
<img src="fate.png" alt="Fate">
<h1>Fate</h1>
</div>
<div class="comic">
<img src="hulk.png" alt="Hulk">
<h1>Hulk</h1>
</div>
<div class="comic">
<img src="superman.png" alt="Superman">
<h1>Superman</h1>
</div>
<div class="comic">
<img src="captain.png" alt="Captain">
<h1>Captain</h1>
</div>
<div class="comic">
<img src="wonder.png" alt="Wonder">
<h1>Wonder</h1>
</div>
<div class="comic">
<img src="ironman.png" alt="Ironman">
<h1>Ironman</h1>
</div>
最初的页面是这样的,竖直排列,不美观。
接下来,用CSS来美化这个页面:
*{ /* 全局的内外边距清零 */
margin: 0;
padding: 0;
}
body{ /*设定背景和字体*/
background: #f3f2ef;
font-family: sans-serif;
}
1、“ * ”号通配符将全局的内外边距都清零
2、 font-family :设置字体。
https://www.w3school.com.cn/cssref/pr_font_font-family.asp
.comic{
padding: 30px 0;
margin: 10px 4%;
width: 44%;
/* 上面设置保证 44x2 + 3x4 = 100%这样效果好看, 3是因为下面设置了marin-left=0 */
text-align: center; /* 设置元素文本对齐 */
float: left; /* 设置左浮动来形成排列效果 */
background: #e5e8e1;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
}
.comic:nth-child(even){ /* 设置奇数div元素左边距为 0 */
margin-left: 0;
}
.comic h1{ /*设置每张图片的标题 */
color: #666;
font-weight: normal;
font-size: 5vw;
}
.comic img{ /* 是图片以百分比动态显示 */
width: 20%;
}
1、width :设置了每个 comic 版块的宽度为 33.3%,即每排三个。
2、text-align :设置元素文本对齐方式。
https://www.w3school.com.cn/cssref/pr_text_text-align.asp
3、box-shadow:设置阴影效果。
4、font-size :设置h1元素的字体大小为 5vw,即等于屏幕宽度的1/20(5%)。当屏幕为400像素的时候,字体大小为20像素。
5、width : 在此是以百分比设置图片的宽度。与之相同的还有 height等。
https://www.w3school.com.cn/css/css_dimension.asp
6、margin :设置版块的外边距。
https://www.w3school.com.cn/cssref/pr_margin.asp
7、padding :设置版块的内边距。
https://www.w3school.com.cn/cssref/pr_padding.asp
8、.comic:nth-child(even): 伪类选择器。用来选择偶数个div元素(将even改为odd则选择奇数个元素).
最后的页面效果如下: