您当前的位置:网站首页>CSS>如何使用float实现文字环绕图片 找CSS教程就上ki4.cc (>^ω^<),float,文字,图片

如何使用float实现文字环绕图片 找CSS教程就上ki4.cc (>^ω^<),float,文字,图片

2020年05月12日 投稿作者: 围观人数:31

CSS之Rest(重置样式)推荐 找CSS教程就上ki4.cc (>^ω^<)

CSS Reset,意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset),本篇文章举了几个例子。

先来看一下效果图:

关于css选择器的介绍 找CSS教程就上ki4.cc (>^ω^<)

本文来自css快速入门栏目,文中为大家介绍了css选择器的相关知识,具有一定的参考价值,希望可以帮助到大家。css选择器有:1、标签选择器;2、类选择器;3、ID选择器。

具体代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width:100px;
            height:100px;
            float:left;
            margin-right:10px;
        }
    </style>
</head>
<body>
    <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1586421603&di=251ccdb6640827e0880fd5353d0ad580&src=http://a4.att.hudong.com/21/09/01200000026352136359091694357.jpg" alt="">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias corporis omnis quae sapiente fugit! Inventore laborum alias vitae similique ipsam dolorem quam consequuntur accusamus adipisci sint earum, quaerat officia rerum laudantium expedita nobis veritatis facilis fugiat a quo in repellendus facere est perferendis. Ut sequi eius voluptatem quae, ipsa ab et, corrupti at, in maxime numquam earum dicta tempore inventore consequatur saepe debitis! Iure assumenda molestiae vel quos eligendi excepturi sapiente quaerat voluptas. Fugit minus aliquid ipsa in quia iure dolor corrupti eum quaerat necessitatibus et perferendis possimus labore culpa quam qui eaque, ex asperiores beatae obcaecati dolorem voluptatibus suscipit laudantium. Accusantium, pariatur enim in rerum nostrum temporibus similique aliquid excepturi corrupti? Facere suscipit iste vero praesentium soluta aliquam veniam tempore nulla amet ratione. Voluptatem eius repellendus, placeat beatae mollitia assumenda aliquam exercitationem tenetur numquam iusto! Id iure esse officia eius, veritatis temporibus delectus porro iusto, voluptatum modi laboriosam nesciunt, vel aliquam pariatur magni nemo. Voluptatem, dolorum quae. Quo sequi blanditiis, asperiores facere, ullam mollitia libero voluptatum doloremque nobis, provident id quas autem corporis. Ducimus nihil sapiente quas iure nulla, beatae voluptate cum optio magni voluptatibus sed inventore ad, accusantium rerum similique iste animi earum magnam ipsa. Facilis earum debitis ratione fuga perferendis eveniet mollitia maxime deserunt esse. Asperiores saepe rerum, voluptatibus iusto exercitationem magni, incidunt fugiat earum qui laboriosam illum error porro distinctio consequatur dolore.</p>
</body>
</html>

推荐教程:css快速入门

以上就是如何使用float实现文字环绕图片的详细内容,更多请关注ki4导航其它相关文章!

CSS属性box-sizing详解 找CSS教程就上ki4.cc (>^ω^<)

在CSS中,你设置一个元素的width与height只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding,绘制到屏幕上时的盒子宽度和高度会加上设置的边框(border)和内边距(padding)值。

标签

版权说明
免责声明:本文文章内容由ki4导航网发布,但不代表本站的观点和立场,具体内容可自行甄别.