在线亚洲视频网站www色,2020中文字字幕在线不卡

技術(shù)頻道 - html技術(shù)

[3示例]如何用CSS實現(xiàn)文本環(huán)繞圖像

作者:admin 時間:2022-9-9 17:44:50 瀏覽:

將文本包裹在圖像周圍對于任何類型的網(wǎng)站都非常有吸引力。通過使用 HTML 和 CSS 將圖像與文本包裹起來是可能的，并且有很多方法可以做到這一點，因為任何圖像的形狀都不是恒定的。在 HTML 中，我們可以將圖像對齊到文本的右側(cè)、左側(cè)或中心。在 CSS 中，除此之外，我們還可以將圖像插入圓形或矩形等，并可以在其周圍環(huán)繞文本。

以下示例說明了上述方法。

示例 1 - 圖像浮動：

在此示例中，圖像浮動在屏幕右側(cè)，文本環(huán)繞圖像。我們在這里不需要 shape-outside 屬性，因為形狀圖像是通常的（正方形）。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 20px;
  text-align: center;
}

h1 {
  color: green;
}

img {
  float: left;
  margin: 5px;
}

p {
  text-align: justify;
  font-size: 25px;
}
</style>
</head>
<body>
<h1>WebKaka.com</h1>
<b>
提供良好的問題解決方案
</b>
<div class="square">
  <div>
    <img src="1.png" >
  </div>
  <p>
有多少次你在尋找時感到沮喪
獲取編程/算法的良好集合
/面試問題？你期望什么？什么
你明白了嗎？創(chuàng)建此門戶的目的是：
提供良好的書面、深思熟慮和良好的
解釋選定問題的解決方案。
IIT最喜歡解決編程問題
有效的方法。除了極客，他還有
作為軟件開發(fā)人員與DE Shaw公司合作
吉特·諾伊達擔(dān)任助理教授。它是
學(xué)習(xí)編程的好平臺。它是
教育網(wǎng)站。為招聘做準(zhǔn)備
驅(qū)動基于產(chǎn)品的公司，如微軟，
亞馬遜、Adobe等提供免費在線廣告
準(zhǔn)備課程。
  </p>
</div>
</body>
</html>

輸出

示例 2 - 使用 shape-outside：

在本示例中，我們將包裝不同形狀的圖像，這里我們將使用 CSS shape-outside 屬性以獲得更好的觀看體驗。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 20px;
  text-align:center;
}
h1 {
  color: green;
}

/* div作為圖像設(shè)計 */
.round {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  float: left;
  font-weight: bold;
  /* 根據(jù)圖片改變形狀 */
  shape-outside: circle();
  background-color: Green;
  color: white;
}

article{
  padding-top: 75px;
  display: inline-block;
}

p {
  text-align: justify;
  font-size: 22px;
}
</style>
</head>

<body>
<h1>WebKaka.com</h1>
<b>
提供良好的問題解決方案
</b>
<div class="round">
<article>WebKaka</article>
</div>
<p>
有多少次你在尋找時感到沮喪
獲取編程/算法的良好集合
/面試問題？你期望什么？什么
你明白了嗎？創(chuàng)建此門戶的目的是：
提供良好的書面、深思熟慮和良好的
解釋選定問題的解決方案。
IIT最喜歡解決編程問題
有效的方法。除了極客，他還有
作為軟件開發(fā)人員與DE Shaw公司合作
吉特·諾伊達擔(dān)任助理教授。它是
學(xué)習(xí)編程的好平臺。它是
教育網(wǎng)站。為招聘做準(zhǔn)備
驅(qū)動基于產(chǎn)品的公司，如微軟，
亞馬遜、Adobe等提供免費在線廣告
準(zhǔn)備課程。
</p>
</body>
</html>

輸出

示例3 - 使用表格標(biāo)簽：

使用它，我們將創(chuàng)建一個表格，在表格的一列中，我們將把圖像放入另一列，無論要插入什么信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="color: green; text-align: center;">
WebKaka.com
</h1>
<h3 style="color: black; text-align: center;">
提供良好的問題解決方案
</h3>
<br>
<table cellspacing="10">
<tr>
<td>
<img src="1.png" >
</td>
<td> 
<p>
有多少次你在尋找時感到沮喪
獲取編程/算法的良好集合
/面試問題？你期望什么？什么
你明白了嗎？創(chuàng)建此門戶的目的是：
提供良好的書面、深思熟慮和良好的
解釋選定問題的解決方案。
IIT最喜歡解決編程問題
有效的方法。除了極客，他還有
作為軟件開發(fā)人員與DE Shaw公司合作
吉特·諾伊達擔(dān)任助理教授。它是
學(xué)習(xí)編程的好平臺。它是
教育網(wǎng)站。為招聘做準(zhǔn)備
驅(qū)動基于產(chǎn)品的公司，如微軟，
亞馬遜、Adobe等提供免費在線廣告
準(zhǔn)備課程。
</p>
</td>
</tr>
</table>
</body>
</html>