CSS分类：将带有边框的图像浮动于段落的右侧

CSS 代码均位于 HTML 的 head 部分，这样做的目的是为了利于演示例子本身。在实际的开发中，使用 CSS 最好的方式是引用外部样式表。
这里介绍CSS分类：将带有边框的图像浮动于段落的右侧

步骤/方法

  • 01

    在编辑器中输入以下代码： <html> <head> <style type="text/css"> img { float:right; border:1px dotted black; margin:0px 0px 15px 20px; } </style> </head> <body> <p>在下面的段落中，图像会浮动到右侧，并且添加了点状的边框。我们还为图像添加了边距，这样就可以把文本推离图像：上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px。</p> <p> <img src="/i/eg_cute.gif" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html>

  • 02

    运行结果为：

赞 (0)

相关推荐

  • 如何使图片浮动到段落的左边和居中显示

    简单的学习些代码,对我们以后的编辑内容将起到很大的方便. 操作方法 01 打开dreamweaver软件,新建一个新的html文件. 02 在body下方输入以下代码<p><img ...

  • css对div设置边框

    前端开发过程中,很多时候需要对一些标签进行边框的设置,那如何使用css设置边框样式呢?css提供了一个用于设置边框属性的border-style,可以通过border-style设置边框的线条样式. ...

  • 会声会影x2特效实例教程--带有边框的画中画效果

    创新的影片制作向导模式,只要三个步骤就可快速做出DV影片,即使是入门新手也可以在短时间内体验影片剪辑乐趣:同时操作简单.功能强大的会声会影编辑模式,从捕获.剪接.转场.特效.覆叠.字幕.配乐,到刻录, ...

  • css制作虚线边框

    让我们一起来学习一下css如何设置虚线边框吧. 操作方法 01 新建hmtl代码页面.如图: 02 在html代码页面上找到body标签,然后在body标签中添加一个div标签,并为这个div添加样式 ...

  • 最常用的CSS清除浮动代码

    在用CSS修饰页面样式的时候,浮动是非常普遍的,所以清除浮动也会经常的,为了减少冗余的代码,通常专业的写法是这样的: 操作方法 01 <div class="clearfix" ...

  • 清除float浮动的几种方法

    float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. float主要流行与 ...

  • indesign如何加边框（indesign怎么显示线框）

    indesign如何加边框（indesign怎么显示线框）

       indesign添加边框技巧教程:1.打开InDesign.其应用程序图标类似于黑色背景上的粉红色" Id".将显示InDesign启动窗口.2.点击开始.此选项卡在窗口的右 ...

  • 用美图秀秀最炫边框-打造最火爆的圣诞照片

    此外，在这圣诞来临之际，各种各样的圣诞素材很快就火爆起来，美图秀秀的海量圣诞素材肯定也会成为时尚潮人们自制圣诞贺卡的好帮手，大家不要错过啦。 先来秀一秀炫彩边框的不同用途： 用炫彩边框给宝宝照片做个漂 ...

  • 美图秀秀史上最炫边框:扮靓别样的圣诞照片

    免费国产图片处理软件“美图秀秀”又推出新功能啦!在这小小的宣传下，新版本的“炫彩边框”很好很强大，使用后很有大头贴的味道，既有圣诞气息又是一键特效，操作简单快捷，强烈推荐哦。此外，在这圣诞来临之际，各 ...