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 ...
随机推荐
- Elasticsearch地理位置总结
更多内容请参考 : https://www.felayman.com 翻译版本:https://es.xiaoleilu.com/310_Geopoints/00_Intro.html 官方原文:ht ...
- DOM操作复选框
DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后,足球.篮球.游泳和唱歌均被选取.取消"全选/全不选"复选框之后,被选中的所有都变成未选中 ...
- 如何取消mysql授权并删除用户
如何查看授权的所有用户SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user;撤销已经赋 ...
- photoshop切图介绍 && photoshop下载与破解
第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...
- android开发 gradle 总结
gradle结构: MyApp ├── build.gradle ├── settings.gradle └── app └── build.gradle 1. setting.gradle解析 当你 ...
- Vundle，Vim 的 Bundle(转)
长久以来,我管理 Vim 配置的方式都非常原始—— zip 打包,然后发到邮箱上.偶尔会发生忘记备份,或者配置混淆的状况,不过由于懒筋发作,竟然这个方案就这么用了两年. 终有一天,我觉得这个方法太笨了 ...
- 使用Second Copy同步ftp服务器的差异文件
公司一直用自主开发的一个同步工具来进行数据库文件异机备份的,但无奈太不稳定,三天两头出现服务挂死的问题,特别是最近这1个月,几天就1次. 问题现象都是服务一直在运行,但没有复制文件到备份机上,而且备份 ...
- 解析ASP.NET Mvc开发之EF延迟加载 分类： ASP.NET 2014-01-04 01:29 4017人阅读 评论(1) 收藏
目录: 从明源动力到创新工场这一路走来 解析ASP.NET WebForm和Mvc开发的区别 解析ASP.NET 和Mvc开发之查询数据实例 ----------------------------- ...
- 如何用 纯C++（ndk)开发安卓应用 ？
视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 如何安装安卓的开发环境以及怎么设置ndk的环境变量等在前边的文 ...
- Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in E:\\PHP\\wamp\\www\\lsr\\lsr.php on line 42
类似于这样的错误: 其实大多数的情况下,都是SQL语句书写错了,特别是这种情况: select * from order; 应该写成: select * from `order`;(那不是单引号,而是 ...