效果如下：

　　附上代码：

<html>

    <head>

        <title>World</title>

        <style type="text/css">

            #imgtest {

                border:1px dashed orange;

                width:400px;

                height:300px;

            }

            #image11 {

                /* float:left; */

                float:right;

            }

            #test11 {

                color:blue;

            }

        </style>

    </head>

    <body>

        <div id="imgtest">

            <div id="image11"><img src="a.jpg"  width="250" height="200"/></div>

            <div id="test11">愿有岁月可回首，且以深情共白头！愿有岁月可回首，且以深情共白头！愿有岁月可回首，且以深情共白头！愿有岁月可回首，且以深情共白头！愿有岁月可回首，且以深情共白头！愿有岁月可回首，且以深情共白头！愿有岁月可回首，且以深情共白头！愿有岁月可回首，且以深情共白头！愿有岁月可回首，且以深情共白头！愿有岁月可回首，且以深情共白头！

            </div>

        </div>

    </body>

</html>

　　效果如下：

　　附上代码：

<html>

    <head>

        <title>World</title>

        <style type="text/css">

            #test11 {

                color:blue;

                position:absolute;

                top:190px;

                left:120px;

            }

        </style>

    </head>

    <body>

        <div id="image11"><img src="a.jpg"  width="250" height="200"/></div>

        <div id="test11">鸣人雏田</div>

    </body>

</html>

css-图文案例的更多相关文章

  1. Css Secret 案例全套

    Css Secret 案例全套 github地址 案例地址 该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户体验.结构与布局.过渡与动画等.去年买 ...

  2. Css Secret 案例Demo全套

    Css Secret 案例全套 github地址 案例地址 去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户 ...

  3. CSS典型案例实践

    CSS案例实践 一.层布局:定位元素重叠 在CSS中可以通过z-index属性来确定定位元素的层叠等级.需要注意的是: z-index属性只有在元素的position属性取值为relative.abs ...

  4. javaWeb css图文混排

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. css 09-CSS案例讲解：博雅互动

    09-CSS案例讲解:博雅互动 #前言 CSS已经学了一些基础内容了,我们来讲解一个小案例吧.以博雅互动的官网首页举例. #版心 首页的版心如下: 这里我们要普及一个概念,叫"版心" ...

  6. DIV+CSS 图文混排的图片居中办法

    不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. <div>图文混排 <br> ...

  7. CSS样式案例(2)-制作一个简单的登录界面

    首先来张完工的效果图. 一.html文件如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  8. CSS样式案例(1)-文字的排版

    本篇介绍的是小窗文字内容的排版,通过该篇文章可以让小伙伴们熟悉以下几个知识点: word-space.overflow.text-overflow. 最终的展示效果如下: 参考步骤: 1. 建立htm ...

  9. HTML+CSS图文排版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  10. React Transition css动画案例解析

    实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...

随机推荐

  1. RF射频技术的原理

    [摘要]射频技术(RF)是Radio Frequency的缩写.较常见的应用有无线射频识别(Radio Frequency Identification,RFID),常称为感应式电子晶片或近接卡.感应 ...

  2. Android之自定义控件

    开发自定义控件的步骤: 1.了解View的工作原理  2. 编写继承自View的子类 3. 为自定义View类增加属性  4. 绘制控件  5. 响应用户消息  6 .自定义回调函数    一.Vie ...

  3. postgresql-数据库网络地址存储探索

    问题背景 数据库审核过程中发现有存储ip的字段类型为varchar(50).想到postgresql有专门的存储ip类型.然而存在即合理.所以主要对比varchar和inet存储ip的不同. 网络地址 ...

  4. JavaScript里的Date 对象属性及对象方法－－实现简单的日历

    上网搜索"js 日历插件"就会出来各种效果的功能丰富的日历插件,很多都可以下载源码,然后根据各自的需求对源码进行修改就可以直接用了. 但今天讲的不是如何使用这些插件,而是讲如何实现 ...

  5. Java抽象工厂模式

    Java抽象工厂模式 基本定义 抽象工厂模式是所有形态的工厂模式中最为抽象和最其一般性的.抽象工厂模式可以向客户端提供一个接口,使得客户端在不必指定产品的具体类型的情况下,能够创建多个产品族的产品对象 ...

  6. JavaScript 函数定义方法

    JavaScript 函数定义方法. 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立 ...

  7. 快速搭建gulp项目实战

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大 ...

  8. centos下kubernetes+flannel部署（旧）

    更合理的部署方式参见<Centos下Kubernetes+Flannel部署(新)> 一.准备工作 1. 三台centos主机 k8s(即kubernetes,下同)master: 10. ...

  9. ActiveMQ开发注意要点

    目录1.如何保证消息的成功处理2.避免消息队列的并发3.消息有效期的管理4.过期消息,处理失败的消息如何处理 1.保证消息的成功处理消息发送成功后,接收端接收到了消息.然后进行处理,但是可能由于某种原 ...

  10. ruby冒泡算法删除店铺下的重复评论

    Shop.each do |shop| if !shop.comments.blank? n = shop.comments.length for i in 0..n-1 for j in i+1.. ...