直播带货源码，CSS 3之图文混排效果

直播带货源码，CSS 3之图文混排效果

1. 设置图片与文字间距

用 padding 属性能设计图片和文字之间的距离，即文字与图片之间在一定间距；

padding 属性主要用来在一个声明中设置所有内边距属性，即能设置元素所有内边距的宽度，或设置各边上内边距的宽度；

注意： 不允许指定负边距值；

语法格式如下所示：

 


padding:padding-top |padding-right |padding-bottom |padding-left
 

​

参数说明：

 

padding-top：设置距离顶部内边距；

padding-right ：设置距离右边内边距；

padding-bottom ：设置距离底部内边距；

padding-left ：设置距离左部内边距；

例子 1：

 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字环绕</title>
<style>
img{max-width: 250px;
float: left;
padding-top:15px ;
padding-right: 55px;
padding-bottom: 15px;
}
</style>
</head>
<body>
<p>花开再美，怎如初见？
<img src="3.jpg"/>
 
</p>
</body>
</html>
 

 

 2. 文字环绕效果

使用 float 属性能实现文字环绕效果；

float 属性主要定义元素在哪个方向浮动；

一般应用于图像，使文本环绕在图像周围，也能定义其他元素浮动；

浮动元素会生成一个块级框，不论它本身是何种元素；若浮动元素非替换元素，则要指定一个明确的值；否则，他们尽可能地窄；

语法格式如下所示：

 


float:none |left |right
 

 

例子 2：

 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字环绕</title>
<style>
img{
max-width: 185px;
float: left;
}
</style>
</head>
<body>
<p>花开再美，怎如初见？
<img src="3.jpg"/>
  
</p>
</body>
</html>

 

 以上就是直播带货源码，CSS 3之图文混排效果， 更多内容欢迎关注之后的文章

 

posted @ 2022-11-21 14:14  云豹科技-苏凌霄  阅读(129)  评论(0)    收藏  举报