图文混排
图文混排是制作精美页面必须使用的技术,通过将适当的图像与文字有效地排列在一起,可以大大丰富版面内容。图文混排的结构没有统一标准,一般做法是把图像和文本信息同时封装在一个包含元素内,再嵌入其他布局元素或修饰元素。
实现一个图文混合单元模块
1. HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>图文混排挡</title>
<style>
.article{
border: 1px solid hsl(0,80%,90%);
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
position: relative;
background-color: black;
width:210px;
height:230px;
}
h2{
font-size: 14px;
color: #FFFFFF;
background-color: red;
position: absolute;
top: 18px;
right: 0;
text-align: center;
width: 60px;
height: 18px;
}
h3{
font-size: 85%;
color: #FFFFFF;
text-align: center;
}
p{
font-size: 10px;
text-indent: 25px;
margin-top: 0;
color: #FFFFFF;
}
</style>
</head>
<body>
<article id="content">
<div class="article">
<h2>7月</h2>
<div id="photo"><a href="#"><img src="images/sara.jpg" alt=""></a></div>
<h3>萨拉一一年度最热的女人</h3>
<p>萨拉一一年度最热的女人,没有你不能做到的。</p>
</div>
</article>
</body>
</html>