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 ...
随机推荐
- Codeforces Round #427 (Div. 2) B. The number on the board
引子: A题过于简单导致不敢提交,拖拖拉拉10多分钟还是决定交,太冲动交错了CE一发,我就知道又要错过一次涨分的机会.... B题还是过了,根据题意目测数组大小开1e5,居然蒙对,感觉用vector更 ...
- maven添加仓库没有的jar包
mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=10.2.0.4.0 -Dpackaging= ...
- Java内存模型Cookbook
前言 指令重排 内存屏障 多处理器 指南 前言 这是一篇用于说明在JSR-133中制定的新Java内存模型(JMM)的非官方指南. 这篇指南提供了在最简单的背景下各种规则存在的原因,而不是这些规则在指 ...
- WebDriverAPI（4）
单击某个元素 采用元素id.click()方法即可 双击某个元素id.doubleClick 操作单选下拉列表 测试网页HTML代码 <html> <body> <sel ...
- 适配 iOS 11 & iPhone X 大全
1.升级iOS11后造成的变化 1. 1升级后,发现某个拥有tableView的界面错乱,组间距和contentInset错乱,因为iOS11中UIViewController的automatical ...
- easyui combobox下拉框复制后再禁用，点击不会出现下拉框
easyui combobox下拉框禁用,点击不会出现下拉框 需要做到,在给easyui combobox赋值后,再禁用easyui combobox 解决办法: $("#time-sele ...
- (转)Python标准库02 时间与日期 (time, datetime包)
原文:http://www.cnblogs.com/vamei/archive/2012/09/03/2669426.html https://www.liaoxuefeng.com/wiki/001 ...
- python-在定义函数时，不定长参数中，默认值参数不能放在必选参数前面
如果一个函数的参数中含有默认参数,则这个默认参数后的所有参数都必须是默认参数,否则会报错:SyntaxError: non-default argument follows default argum ...
- vue2.0实现购物车功能
购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...
- Python2.x 中文乱码问题
Python 文件中如果未指定编码,在执行过程会出现报错: #!/usr/bin/pythonprint "你好,世界"; 以上程序执行输出结果为: File "test ...