效果如下：

　　附上代码：

<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. Github只下载某一目录的文件

    比如要下载: https://github.com/xubo245/SparkLearning/tree/master/docs 将“tree/master”改成“trunk https://gith ...

  2. 从Windows下引导安装ubuntu

    Ubuntu引导安装 首先是安装前的准备工作 1.需要安装的 ubuntu系统的ISO镜像. 2.easyBCD引导软件 3.所在的Windows系统(本人win7下安装) 4.DiskGenius( ...

  3. Spring Security构建Rest服务-0701-个性化用户认证流程

    上一篇说了用户认证的基本流程,但是上一篇当访问一个受保护的服务后,如果未认证会调到默认的登录页面,这样是不行的,而且认证成功后,就直接访问了那个服务,如果想要做认证成功后做一些操作,还需要自定义. 个 ...

  4. Spring 小知识点

    一.引入配置文件的方式: 方式一: <context:property-placeholder location="classpath:jdbc.properties,classpat ...

  5. 工具类APP

    应用名称 工具S 英文名称 未填写 应用描述 工具类APP 英文描述 未填写 应用官网 this 应用图标  

  6. apache的rewrite规则来实现URL末尾是否带斜杠

    1.url: http://www.test.com/user/ 跟:http://www.test.com/user 这两个URL对于用户来说应该是一样的,但从编程的角度来说,它们可以不相同 但我们 ...

  7. "setItem@[native code] logging run flush"

    safari 中出现 "setItem@[native code] logging run flush" 此问题出现在 6s plus ios系统为10.2 时, safari打开 ...

  8. Ubuntu18---VMware虚拟机中Ubuntu18.04系统，开机输入密码后无响应黑屏

    系统崩坏了,重装过几次,这次决定不充装了. 搜索大神解决方案后,了解到是图形界面程序损坏,可能是在更新内核或者安装软件的时候,把与xorg相关的文件给清除了. 解决方案如下: 1.登录系统进入,黑屏后 ...

  9. MVC下拉框Html.DropDownList 和DropDownListFor 的常用方法

    一.非强类型:Controller:ViewData["AreId"] = from a in Table                               select ...

  10. c#基础学习(0628)之使用进程打开指定的文件、模拟磁盘打开文件

    使用进程打开指定的文件 模拟磁盘打开文件 class Program { static void Main(string[] args) { while(true) { Console.WriteLi ...