效果如下:

  附上代码:

<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. Codeforces Round #427 (Div. 2) B. The number on the board

    引子: A题过于简单导致不敢提交,拖拖拉拉10多分钟还是决定交,太冲动交错了CE一发,我就知道又要错过一次涨分的机会.... B题还是过了,根据题意目测数组大小开1e5,居然蒙对,感觉用vector更 ...

  2. maven添加仓库没有的jar包

    mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=10.2.0.4.0 -Dpackaging= ...

  3. Java内存模型Cookbook

    前言 指令重排 内存屏障 多处理器 指南 前言 这是一篇用于说明在JSR-133中制定的新Java内存模型(JMM)的非官方指南. 这篇指南提供了在最简单的背景下各种规则存在的原因,而不是这些规则在指 ...

  4. WebDriverAPI(4)

    单击某个元素 采用元素id.click()方法即可 双击某个元素id.doubleClick 操作单选下拉列表 测试网页HTML代码 <html> <body> <sel ...

  5. 适配 iOS 11 & iPhone X 大全

    1.升级iOS11后造成的变化 1. 1升级后,发现某个拥有tableView的界面错乱,组间距和contentInset错乱,因为iOS11中UIViewController的automatical ...

  6. easyui combobox下拉框复制后再禁用,点击不会出现下拉框

    easyui combobox下拉框禁用,点击不会出现下拉框 需要做到,在给easyui combobox赋值后,再禁用easyui combobox 解决办法: $("#time-sele ...

  7. (转)Python标准库02 时间与日期 (time, datetime包)

    原文:http://www.cnblogs.com/vamei/archive/2012/09/03/2669426.html https://www.liaoxuefeng.com/wiki/001 ...

  8. python-在定义函数时,不定长参数中,默认值参数不能放在必选参数前面

    如果一个函数的参数中含有默认参数,则这个默认参数后的所有参数都必须是默认参数,否则会报错:SyntaxError: non-default argument follows default argum ...

  9. vue2.0实现购物车功能

    购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...

  10. Python2.x 中文乱码问题

    Python 文件中如果未指定编码,在执行过程会出现报错: #!/usr/bin/pythonprint "你好,世界"; 以上程序执行输出结果为: File "test ...