首页将图文部分分为三个部分

将图文部分分为三个部分

时间: 2024-04-21 12:24:12 浏览: 8

要将图文部分分为三个部分，你可以在`<div class="content-block">`内添加两个额外的`<div>`元素，然后在每个`<div>`元素中分别放置图片和文本内容。以下是修改后的示例代码： ```html <body>  <ul> <li><a class="active" href="#home">首页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">大唐不夜城</a></li> <li><a href="#about">展点信息</a></li> <li class="login"><a href="#">登录</a></li> </ul>  <div class="slideshow-container"> <div class="mySlides"> <img src="../images/01.jpg" alt="" id="pic"> </div> <a class="prev">❮</a> <a class="next">❯</a> </div>  <div class="content-block"> <div class="content-section"> <img src="your-image1.jpg" alt="Your Image 1"> <h2>Your Title 1</h2> <p>Your Content 1</p> </div> <div class="content-section"> <img src="your-image2.jpg" alt="Your Image 2"> <h2>Your Title 2</h2> <p>Your Content 2</p> </div> <div class="content-section"> <img src="your-image3.jpg" alt="Your Image 3"> <h2>Your Title 3</h2> <p>Your Content 3</p> </div> </div> </body> ``` 你可以根据需要自定义每个图文区块的样式，例如使用CSS来设置宽度、高度、布局等。通过在`<div class="content-block">`中添加多个`<div class="content-section">`，你可以将图文区块分为三个独立的部分，并在每个部分中放置不同的图片和文本内容。