首页html加css做一个网页含图片和文字

html加css做一个网页含图片和文字

时间: 2023-12-14 10:02:21 浏览: 198

好的，我可以给你一个简单的示例。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>我的网页</title> <style> img { max-width: 100%; height: auto; } </style> </head> <body> <header> <h1>欢迎来到我的网页</h1> </header> <main> <p>这是我的第一个网页，里面有一张图片和一些文字。</p> <img src="https://picsum.photos/400/300" alt="一张图片"> <p>这是一段文字，可以随便写。</p> </main> <footer> <p>版权所有 © 我的网站</p> </footer> </body> </html> ``` CSS代码： ```css img { max-width: 100%; height: auto; } ``` 这个网页包含一个头部、主体和尾部。头部包含一个标题，主体包含一段文字和一张图片，尾部包含版权信息。图片是使用`<img>`标签添加的，`src`属性指定图片的URL，`alt`属性是图片的替代文本，如果图片无法加载，就会显示替代文本。CSS样式中，`max-width: 100%`可以使得图片的宽度不超过容器的宽度，而`height: auto`会自动根据图片的宽度等比例缩放高度。你可以将HTML和CSS代码复制到文件中，然后保存为`.html`文件，在浏览器中打开查看效果。

阅读全文