效果如下：

　　附上代码：

<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. iOS —— GCD 详解

    一.什么是GCD Grand Central Dispatch (强大的中枢调度器) ,是异步执行任务的技术之一.纯C语言,有很多强大的函数. 二.GCD的优势 (1)GCD是苹果公司为多核并行运算提 ...

  2. 【xsy1122】 路径 点分治+trie

    题目大意:给你一棵n个点的树,树边上有边权,对于每一个点,你要求出经过该点的所有的路径中,路径异或和最大的值. 数据范围:$n≤10^5$,边权$≤10^9$. 我们考虑枚举每一条路径,显然这个是会T ...

  3. Visual Studio 中的 Office 和 SharePoint 开发

    MSDN Library 开发工具和语言  Visual Studio 中的 Office 和 SharePoint 开发 https://msdn.microsoft.com/zh-cn/libra ...

  4. Mac下使用zsh不执行/etc/profile文件

    Mac下使用了zsh会不执行/etc/profile文件,当然,如果用原始的是会执行. 转而执行的是这两个文件,每次登陆都会执行: ~/.zshrc与/etc/zshenv与/etc/zshrc 所以 ...

  5. (转)十分钟了结MySQL information_schema

    十分钟了结MySQL information_schema  原文:http://www.cnblogs.com/shengdimaya/p/6920677.html information_sche ...

  6. centos7上安装redis

    关闭防火墙:systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止firewall开机启 ...

  7. HTML BODY 背景图片

    内嵌: background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景 ...

  8. java学习-java.lang一Number类

    java.lang包是java语言中被用于编程的基本包.编写的程序基本上都要用到这个包内的常用类. 包含了基本数据类型包装类(Boolean,Number,Character,Void)以及常用类型类 ...

  9. 理解Linux内核之中断控制

    乍一看下边的Linux内核代码,貌似L3389有bug,于是我就绕有兴趣地阅读了一下local_irq_save/local_irq_restore的源代码. /* linux-4.14.12/mm/ ...

  10. Memcached理解笔记3---Memcached使用总结

    为了将N个前端数据同步,通过Memcached完成数据打通,但带来了一些新问题: 使用iBatis整合了Memcached,iBatis针对每台server生成了唯一标识,导致同一份数据sql会产生不 ...