效果如下：

　　附上代码：

<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. mysql中date，datetime，timestamp数据类型区别

    (1)date表示日期,其范围为1000-01-01到9999-12-31 (2)datetime表示日期时间,其范围是1000-01-01 00:00:00到9999-12-31 23:59:59 ...

  2. Zookeeper原理分析之存储结构TxnLog

    Zookeeper事物日志文件用于记录事物操作,如添加,删除节点等等,都会在事务日志中记录一条记录.下面我们就详细分析一下txnLog事务日志文件. txnLog事务日志文件文件由三部分组成: 日志文 ...

  3. git小白使用教程（一）

    本文所涉及命令基本可以涵盖日常开发场景, 对于开发者平时很少使用的命令不再列举,这样不至于让刚刚使用git的小伙伴们看的脑袋大...如有特殊使用可以联系我单独回复. 首先通过一张图了解git的工作流程 ...

  4. 第八天，scrapy的几个小技巧

    一. 微博模拟登陆 1. 百度搜微博开放平台可满足爬取量不大的情况 2. 微博模拟登陆和下拉鼠标应对ajax加载 from selenium import webdriver import time ...

  5. redis升级注意事项

    新版本redis读取 旧版本redis的rdb , aof 使用新版本redis备份rdb , aof操作系统级别备份 rdb , aof重启redis测试 新版本redisrdb , aof 能否读 ...

  6. Spark之Scala学习

    1. Scala集合学习: http://blog.csdn.net/lyrebing/article/details/20362227 2. scala实现kmeans算法 http://www.t ...

  7. ubuntu16.04搭建hadoop集群环境

    1. 系统环境Oracle VM VirtualBoxUbuntu 16.04Hadoop 2.7.4Java 1.8.0_111 master:192.168.19.128slave1:192.16 ...

  8. 由一段代码谈前端js优化和编码规范(一) 分类： JavaScript 2015-03-21 12:43 668人阅读 评论(1) 收藏

    这段代码是撸主刚毕业那会写的,主要是实现一个左侧的导航条的折叠功能.当时实现的比较简陋,每次在导航条增加新的项目的时候,都要手动去修改js代码中写死的索引...确实是比较恼火的,后来就修改了一下,能够 ...

  9. 小程序api-01-abcdefg

    目录-abcdefg   wx.scanCode(OBJECT) 调起客户端扫码界面,扫码成功后返回对应的结果 wx.scanCode({ success: (res) => { console ...

  10. 图形学 shader教程推荐

    https://www.bilibili.com/video/av37119580  http://edu.manew.com/my/course/96 http://edu.manew.com/my ...