使用:after创建浮动图片效果
程序员文章站
2024-01-29 12:37:10
...
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动的图片</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.8 Georgia, serif;
}
#box {
width: 60%;
margin: 40px auto;
position: relative;
}
#logo {
position: absolute;
top: 0;
left: 50%;
margin-left: -125px;
}
#left,
#right {
width: 49%;
}
#left {
float: left;
}
#right {
float: right;
}
#left:before,
#right:before {
content: "";
width: 125px;
height: 250px;
}
#left:before {
float: right;
}
#right:before {
float: left;
}
</style>
</head>
<body>
<div id="box">
<img src="img/cat.png" id="logo">
<div id="left">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut
felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
<div id="right">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut
felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
</div>
</body>
</html>
效果:
上一篇: CSS浮动
推荐阅读
-
使用:after创建浮动图片效果
-
在twig中创建表单时指定使用bootstrap样式,但是显示的效果还是默认的效果,这是为什么?
-
使用js实现带有停顿效果的图片滚动(按钮控制)
-
jquery动画2.元素坐标动画效果(创建一个图片走廊)_jquery
-
jquery动画2.元素坐标动画效果(创建一个图片走廊)_jquery
-
PowerPoint2007中使用图片样式库为图片设置多种展现效果
-
PHP中使用Imagick实现各种图片效果实例,
-
jquery动画3.创建一个带遮罩效果的图片走廊_jquery
-
PowerPoint中使用强调效果强调某一张图片来引起观众注意
-
基于jquery创建的一个图片、视频缓冲的效果样式插件_jquery