css-图文案例
效果如下：
附上代码：
<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-图文案例的更多相关文章
- Css Secret 案例全套
Css Secret 案例全套 github地址 案例地址 该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户体验.结构与布局.过渡与动画等.去年买 ...
- Css Secret 案例Demo全套
Css Secret 案例全套 github地址 案例地址 去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户 ...
- CSS典型案例实践
CSS案例实践 一.层布局:定位元素重叠 在CSS中可以通过z-index属性来确定定位元素的层叠等级.需要注意的是: z-index属性只有在元素的position属性取值为relative.abs ...
- javaWeb css图文混排
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css 09-CSS案例讲解：博雅互动
09-CSS案例讲解:博雅互动 #前言 CSS已经学了一些基础内容了,我们来讲解一个小案例吧.以博雅互动的官网首页举例. #版心 首页的版心如下: 这里我们要普及一个概念,叫"版心" ...
- DIV+CSS 图文混排的图片居中办法
不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. <div>图文混排 <br> ...
- CSS样式案例(2)-制作一个简单的登录界面
首先来张完工的效果图. 一.html文件如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- CSS样式案例(1)-文字的排版
本篇介绍的是小窗文字内容的排版,通过该篇文章可以让小伙伴们熟悉以下几个知识点: word-space.overflow.text-overflow. 最终的展示效果如下: 参考步骤: 1. 建立htm ...
- HTML+CSS图文排版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- React Transition css动画案例解析
实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...
随机推荐
- php中strpos()函数
1,strpos()函数 mixed strops(]) 返回needle在haystack中首次出现的数字位置,从0开始查找,区分大小写. 参数:haystack,在该字符串中进行查找. needl ...
- 解决input和button错位（不齐）问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java之集合(三)ArrayList
转载请注明源出处:http://www.cnblogs.com/lighten/p/7291339.html 1.前言 本章介绍List中最常用的一个类--ArrayList.在第一章中已经介绍了Li ...
- 【Gitbook】实用配置及插件介绍
前言 实际效果可以查看这里 github地址 配置 title 设置书本的标题 "title" : "Gitbook Use" author 作者的相关信息 & ...
- thymeleaf的常见问题汇总
thymeleaf的常见问题汇总 1.thymeleaf th:href 多个参数传递格式 th:href="@{/Controller/update(param1=1,param2=${p ...
- win7安装docker报错：error during connect: Get http ..... the system cannot find the file specified
因为是win7 所以使用了官方网站的dockertoolbox 安装一路顺利,结果启动就报上面的错误, 因为安装包附带安装了virtualbox 上面的错误后来排查出来是 virtualboox的问题 ...
- Android_问卷调查
这个是一个简单的问卷调查,对于我这样的初学者可能会绞尽脑汁想尽办法,去实现一个看起来特别简单的功能,我这个是用Intent传参的办法,来实现将前边的调查来进行统计,并记录,之后将这些信息显示到最后一个 ...
- C/C++ -- Gui编程 -- Qt库的使用 -- Qt窗体的类型状态布局
-----工程WindowTest----- 1.-----窗体类型type.cpp----- #include <QtGui> int main(int argc, char * arg ...
- linux更改文件权限
chown –Rh cheat:cheat /home/cheat/task/Cheat
- 16-hadoop-mapreduce简介
mapreduce是hadoop的核心组件, 设计理念是移动计算而不是移动数据, mapreduce的思想是'分而治之', 将复杂的任务分解成几个简单的任务去执行 1, 数据和计算规模大大减少 2, ...