“图文混排”的版本间的差异
来自CloudWiki
(创建页面,内容为“ <nowiki><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Head Line</title> <style type="text/css"> h1{ background:#678;…”) |
|||
第1行: | 第1行: | ||
+ | == 图文混排的原理 == | ||
+ | *图文混排的原理基本上有两点: | ||
+ | **第一,将图像设为块级元素; | ||
+ | **第二,将图像设为浮动。 | ||
+ | |||
+ | == 元素的显示方式 == | ||
+ | |||
+ | *display属性可指定元素的类型以决定元素的显示方式。 | ||
+ | *行内元素除了通过float浮动后可转换成块级元素外,也可通过display:block;将其设置为块级元素。 | ||
+ | *通过CSS“:hover”伪类或用JavaScript代码设置元素的display属性可实现动态隐藏元素为不可见或由不可见恢复为可见。 | ||
+ | inline 行内元素,在当前区域块内显示不换行(行内元素默认)<br/> | ||
+ | block 作为块级元素显示一个新段落(块级元素默认)<br/> | ||
+ | none 隐藏元素不显示,也不再占用页面空间,相当于该元素已不存在<br/> | ||
+ | list-itme 添加列表项的项目编号并另起一行显示在下一行—块级元素<br/> | ||
+ | inline-block 生成为行内块元素 <br/> | ||
+ | |||
+ | ==将图像设为块级元素== | ||
+ | *使用display:block将图像转换为块级元素 | ||
+ | *图像转换为块级元素之后就可以作为盒子来使用。 | ||
+ | |||
+ | ==将图像设置为浮动块元素== | ||
+ | *图像转换为盒子之后,就可以浮动 | ||
+ | *可以通过float将其设置为浮动的块元素,结合段落的浮动效果,可以实现图文混排。 | ||
<nowiki><html> | <nowiki><html> | ||
<head> | <head> |
2017年10月30日 (一) 07:23的版本
图文混排的原理
- 图文混排的原理基本上有两点:
- 第一,将图像设为块级元素;
- 第二,将图像设为浮动。
元素的显示方式
- display属性可指定元素的类型以决定元素的显示方式。
- 行内元素除了通过float浮动后可转换成块级元素外,也可通过display:block;将其设置为块级元素。
- 通过CSS“:hover”伪类或用JavaScript代码设置元素的display属性可实现动态隐藏元素为不可见或由不可见恢复为可见。
inline 行内元素,在当前区域块内显示不换行(行内元素默认)
block 作为块级元素显示一个新段落(块级元素默认)
none 隐藏元素不显示,也不再占用页面空间,相当于该元素已不存在
list-itme 添加列表项的项目编号并另起一行显示在下一行—块级元素
inline-block 生成为行内块元素
将图像设为块级元素
- 使用display:block将图像转换为块级元素
- 图像转换为块级元素之后就可以作为盒子来使用。
将图像设置为浮动块元素
- 图像转换为盒子之后,就可以浮动
- 可以通过float将其设置为浮动的块元素,结合段落的浮动效果,可以实现图文混排。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Head Line</title> <style type="text/css"> h1{ background:#678; color:white; text-align:center;} p{ font-family:Arial; font-size:10pt; line-height:1.5;} img{padding:5px; margin:10px 10px 10px 0;border:1px gray dashed; float:left;} </style> </head> <body> <h1>故乡的茶,满是思念的味道</h1> <img src="/i/eg_tulip.jpg"/> <p>这些年虽然一直在故乡的千里之外,但从来没有放弃喝老家茶的习惯。每次回老家时,我都要赶上产茶的时节,那样我会买回足够喝上一年的绿茶回来。我现在所居住地方的人们喜欢喝花茶,曾经也想尝试过入乡随俗,但怎么也喝不出故乡的味道。也曾经在很疲倦的时候试着喝一杯咖啡来解解乏,但它常常会太刺激我的胃,让我的胃疼痛不止,而且也很容易让我的身体上火。其实绿茶不仅有消食、提神、利尿、清火的功能,它还有助于美容,因为它具有抗氧化的功能。喝完的茶叶用器皿收集起来,晒过之后可以做夏天的凉枕,或者是用来培植花儿。</p> </body> </html>