使用html和css写一些带有盒子模型的贵州旅游网页,要求图片在一边文字内在一边,
时间: 2023-06-14 18:08:05 浏览: 73
好的,以下是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>贵州旅游</title>
<style type="text/css">
.container {
width: 800px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.image {
float: left;
margin-right: 20px;
}
.text {
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<img src="https://via.placeholder.com/300x200" alt="贵州旅游图片" class="image">
<div class="text">
<h2>贵州旅游</h2>
<p>贵州是一个美丽的省份,拥有壮丽的山川、秀丽的水乡和丰富的民族文化。在这里,你可以登高远望,俯瞰群山;或者漫步小镇,感受宁静的生活。不管你是来旅游还是来度假,贵州都能满足你的需求。</p>
</div>
</div>
</body>
</html>
```
解释:
- `container` 类是一个容器,用来包含图片和文字。设置了宽度、边框、内边距和盒子模型。
- `image` 类是图片的样式,设置了浮动和右边距。
- `text` 类是文字的样式,设置了溢出隐藏,使得文字不会被图片遮挡。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)