效果如下：

　　附上代码：

<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. 了解Kafka

    Kafka简介 Kafka是一种分布式的,基于发布/订阅的消息系统.主要设计目标如下: 以时间复杂度为O(1)的方式提供消息持久化能力,即使对TB级以上数据也能保证常数时间复杂度的访问性能 高吞吐率. ...

  2. cas单点登陆系统-casServer搭建

    最近工作比较忙,空闲的时间在搞单点登陆系统,自己写了一套SSO在GitHub上,过程走通了.通过这个例子,自己熟悉了流程,而且破天荒的使用了抽象设计模式,并且熟悉了cookies和session的使用 ...

  3. 云链接 接口不允许 情况 解决方法 mysql Host is not allowed to connect to this MySQL server解决方法

    在装有MySQL的机器上登录MySQL mysql -u root -p密码 执行use mysql; 执行update user set host = '%' where user = 'root' ...

  4. crop和resize操作区别

    crop:对图像进行剪切 resize:对图像进行伸缩 实践代码 import cv2 bb2d = [30, 30, 72 ,42] image = cv2.imread('car.png') pt ...

  5. leetcode 114. 二叉树展开为链表(Flatten Binary Tree to Linked List)

    目录 题目描述: 示例: 解法: 题目描述: 给定一个二叉树,原地将它展开为链表. 示例: 给定二叉树 1 / \ 2 5 / \ \ 3 4 6 将其展开为: 1 \ 2 \ 3 \ 4 \ 5 \ ...

  6. Centos6.7安装Pycharm及升级JDK

    首先到pycharm官网下载pycharm压缩包 wget https://www.jetbrains.com/pycharm/download/download-thanks.html?platfo ...

  7. (转)使用 DB2 HADR 选择用于灾难恢复的 SUPERASYNC 模式

    使用 DB2 HADR 选择用于灾难恢复的 SUPERASYNC 模式 Vishnu G 和 Hemant Singh2013 年 6 月 25 日发布 WeiboGoogle+用电子邮件发送本页面 ...

  8. Java之集合(十)EnumMap

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7371744.html 1.前言 本章介绍Map体系中的EnumMap,该类是专门针对枚举类设计的一个集合类.集合 ...

  9. android的几种“通知”方式简单实现（Notification&NotificationManager）

    关于通知Notification相信大家都不陌生了,平时上QQ的时候有消息来了或者有收到了短信,手机顶部就会显示有新消息什么的,就类似这种.今天就稍微记录下几种Notification的用法.3.0以 ...

  10. Ubuntu-16.04 R 安装及Jupyter notebook 配置

    1. R 安装 通常在Terminal下直接apt-get 即可,在16.10下可以get到R-3.3.1,目前最新好像是 R-3.4.2,可以去官方网站下载源码编译 (https://www.r-p ...