“图文混排”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
 
（未显示同一用户的7个中间版本）
第1行： 第1行：
−
== 图文混排的原理 ==
+
== 图像的并排排列 ==
−
*图文混排的原理基本上有两点：
+
*由于img元素为行内元素，因此，不同图像可以在同一行里并排排列。
−
**第一，将图像设为块级元素；
+
*[[文件:w3-27.png]]
−
**第二，将图像设为浮动。
+
*试一试：在 上编辑以下代码：
 +
*源代码:
 +
<nowiki><html>
 +
 
 +
<body>
 +
 
 +
<p>
 +
两幅图像：
 +
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=256777305,4083788414&fm=27&gp=0.jpg"  height="128" />
 +
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=80712792,2764415328&fm=27&gp=0.jpg"  height="128" />
 +
</p>
 +
 
 +
<p>
 +
一幅动画图像：
 +
<img src="/i/eg_cute.gif" width="50" height="50" />
 +
</p>
 +
 
 +
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
  
−
== 元素的显示方式 ==
+
</body>
 +
</html></nowiki>
  
−
*display属性可指定元素的类型以决定元素的显示方式。
 
−
*行内元素除了通过float浮动后可转换成块级元素外，也可通过display:block;将其设置为块级元素。
 
−
*通过CSS“:hover”伪类或用JavaScript代码设置元素的display属性可实现动态隐藏元素为不可见或由不可见恢复为可见。
 
−
inline      行内元素，在当前区域块内显示不换行（行内元素默认）<br/>
 
−
block      作为块级元素显示一个新段落（块级元素默认）<br/>
 
−
none      隐藏元素不显示，也不再占用页面空间，相当于该元素已不存在<br/>
 
−
list-itme    添加列表项的项目编号并另起一行显示在下一行—块级元素<br/>
 
−
inline-block 生成为行内块元素 <br/>
 
  
−
==将图像设为块级元素==
+
== 图文混排的原理 ==
−
*使用display:block将图像转换为块级元素
+
*可以通过float将图像设置为浮动的块元素，结合段落的浮动效果，就可以实现图文混排。
−
*图像转换为块级元素之后就可以作为盒子来使用。
+
*设置方法：float:left;或float:right;
  
−
==将图像设置为浮动块元素==
+
=== 图像在文字左边===
−
*图像转换为盒子之后，就可以浮动
+
*给img设置属性  float:left
−
*可以通过float将其设置为浮动的块元素，结合段落的浮动效果，可以实现图文混排。
+
*[[文件:w3-20.png]]
 +
*试一试：在[http://www.w3school.com.cn/tiy/t.asp?f=csse_float W3C实例]中实验以下代码：
 
  <nowiki><html>
 
  <nowiki><html>
 
<head>
 
<head>
第39行： 第50行：
 
</body>
 
</body>
 
</html></nowiki>
 
</html></nowiki>
 +
=== 图像在文字右边===
 +
*给img设置属性  float:right
 +
*[[文件:w3-29.png]]
 +
*试一试：在[http://www.w3school.com.cn/tiy/t.asp?f=csse_float W3C实例]中实验以下代码：
 +
<nowiki><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:right;}
 +
</style>
 +
</head>
 +
<body>
 +
  <h1>故乡的茶，满是思念的味道</h1>
 +
  <img src="/i/eg_tulip.jpg"/>
 +
  <p>这些年虽然一直在故乡的千里之外，但从来没有放弃喝老家茶的习惯。每次回老家时，我都要赶上产茶的时节，那样我会买回足够喝上一年的绿茶回来。我现在所居住地方的人们喜欢喝花茶，曾经也想尝试过入乡随俗，但怎么也喝不出故乡的味道。也曾经在很疲倦的时候试着喝一杯咖啡来解解乏，但它常常会太刺激我的胃，让我的胃疼痛不止，而且也很容易让我的身体上火。其实绿茶不仅有消食、提神、利尿、清火的功能，它还有助于美容，因为它具有抗氧化的功能。喝完的茶叶用器皿收集起来，晒过之后可以做夏天的凉枕，或者是用来培植花儿。</p>
 +
</body>
 +
</html></nowiki>
 +
 +
返回 [[网页设计与开发]]

2019年11月5日 (二) 14:34的最新版本

图像的并排排列

  • 由于img元素为行内元素，因此，不同图像可以在同一行里并排排列。
  • W3-27.png
  • 试一试：在 上编辑以下代码：
  • 源代码:
<html>

<body>

<p>
两幅图像：
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=256777305,4083788414&fm=27&gp=0.jpg"  height="128" />
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=80712792,2764415328&fm=27&gp=0.jpg"  height="128" />
</p>

<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>

<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>

</body>
</html>


图文混排的原理

  • 可以通过float将图像设置为浮动的块元素，结合段落的浮动效果，就可以实现图文混排。
  • 设置方法：float:left;或float:right;

图像在文字左边

  • 给img设置属性 float:left
  • W3-20.png
  • 试一试：在W3C实例中实验以下代码：
<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>

图像在文字右边

  • 给img设置属性 float:right
  • W3-29.png
  • 试一试：在W3C实例中实验以下代码：
<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:right;}
</style>
</head>
<body>
  <h1>故乡的茶，满是思念的味道</h1>
  <img src="/i/eg_tulip.jpg"/>
  <p>这些年虽然一直在故乡的千里之外，但从来没有放弃喝老家茶的习惯。每次回老家时，我都要赶上产茶的时节，那样我会买回足够喝上一年的绿茶回来。我现在所居住地方的人们喜欢喝花茶，曾经也想尝试过入乡随俗，但怎么也喝不出故乡的味道。也曾经在很疲倦的时候试着喝一杯咖啡来解解乏，但它常常会太刺激我的胃，让我的胃疼痛不止，而且也很容易让我的身体上火。其实绿茶不仅有消食、提神、利尿、清火的功能，它还有助于美容，因为它具有抗氧化的功能。喝完的茶叶用器皿收集起来，晒过之后可以做夏天的凉枕，或者是用来培植花儿。</p>
</body>
</html>

返回 网页设计与开发

取自“http://www.openbrains.net/mediawiki/index.php?title=图文混排&oldid=14670”