在 web 开发中,图混编是一种非常常见的布局方式。它可以让我们利用 css 中的一些特性来实现想要的各种布局效果。下面是几种常见的图混编布局效果和实现方法。首先是左图右文布局。这种布局方式可以让一张
<style> .left-img { float: left; margin-right: 20px; } </style> <p> <img class="left-img" src="example.jpg" alt="例图"> ... 文字内容 ... </p>
<style> .right-img { float: right; margin-left: 20px; } </style> <p> ... 文字内容 ... <img class="right-img" src="example.jpg" alt="例图"> </p>
<style> .content { display: flex; } .image { width: 50%; } .text { width: 50%; } </style> <div class="content"> <div class="image"> <img src="example.jpg" alt="例图"> </div> <div class="text"> ... 文字内容 ... </div> </div>
<style> .interaction { display: flex; } .image { flex: 1; opacity: 1; transition: opacity 0.3s ease-in-out; } .image:hover { opacity: 0.8; } .text { flex: 1; } </style> <div class="interaction"> <img class="image" src="example.jpg" alt="例图"> <div class="text"> ... 文字内容 ... </div> </div>
粉丝
0
关注
0
收藏
0