css布局文字段落内嵌图片效果代码

代码语言:html

所属分类:布局界面

代码描述:css布局文字段落内嵌图片效果代码

代码标签: css 布局 文字 段落 内嵌 图片

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
body{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f2f2f2;
}
.container{
  height:400px;
  width:775px;
}
img{
  float: right;
  width: 600px;
  shape-outside: url( //repo.bfw.wiki/bfwrepo/threemodel/chiris/shark.svg);
  shape-margin:8px;
  margin-right: -225px;
  margin-bottom: 0;
  margin-left:8px;
}
p{
  color:#332d1d;
  text-align:justify;
  font-family:sans-serif;
  letter-spacing:.45px;
  font-size:10px;
  line-height:9px;
  max-width:675px;
}
@media screen and (max-width: 1000px) {
  .container{
    transform:scale(.57);
  }
}
</style>


  
  
</head>

<body translate="no">
  <div class='container'>
  
  <img class='img1' src="//repo.bfw.wiki/bfwrepo/threemodel/chiris/shark.svg" />  <p>Rubber ducky, the unsung hero of bubble baths, floats triumphantly like a tiny, yellow battleship of joy, quacking silently as it surveys the soapy abyss. Its beady black eyes hold secrets of bathtime lore, and its squeak? Oh, that squeak is the anthem of chaos itself, a symphony of playful absurdity. It bobs up and down, defying gravity and logic, a plastic enigma in a frothy sea, daring you to question its purpose. Is it just a toy? Or a philosopher disguised as bathroom decor? Some say rubber duckies are spies from the aquatic underworld, plotting to overthrow soap dishes everywhere. Others believe they’re interdimensional beings, slipping between realms to bring whimsy to the mundane. All hail the rubber ducky, a deity of delightful nonsense, ruler of tubs, pools, and puddles alikeRubber ducky, the unsung hero of bubble baths, floats triumphantly like a tiny, yellow battleship of joy, quacking silently as it surveys the soapy abyss. Its beady black eyes hold secrets of bathtime lore, and its squeak? Oh, that squeak is the anthem of chaos itself, a sym.........完整代码请登录后点击上方下载按钮下载查看

网友评论0