首页使用html和css编辑一个静态网页

使用html和css编辑一个静态网页

时间: 2024-03-07 18:48:44 浏览: 121

好的，下面是一个简单的例子，实现一个包含标题、图像和文本的静态网页。 HTML代码： ``` <!DOCTYPE html> <html> <head> <title>静态网页</title> <style> body { font-family: Arial, sans-serif; font-size: 16px; color: #333; margin: 0; padding: 0; } header { background-color: #333; padding: 20px; color: #fff; text-align: center; } img { display: block; margin: 0 auto; max-width: 100%; height: auto; } section { padding: 20px; text-align: justify; } </style> </head> <body> <header> <h1>我的静态网页</h1> </header> <section> <img src="https://via.placeholder.com/500x300" alt="图片"> <p>这是一段文本，可以在这里写一些关于你静态网页的介绍。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac ex euismod, interdum nulla sed, pulvinar lectus. Integer suscipit sem eget lorem hendrerit, vel consequat erat auctor. Cras eleifend ipsum vitae consequat consequat. Praesent vel lorem non massa luctus porttitor. Nullam a semper lorem. Donec auctor, nunc quis molestie semper, ex quam viverra quam, ut ornare felis enim in metus. Sed at velit at ante semper sagittis. Vestibulum ac congue purus, eu feugiat ipsum. Donec vitae ante nec elit ultricies lobortis.</p> </section> </body> </html> ``` CSS代码：在`<style>`标签中添加以下样式： - `body`：设置全局字体、字号和颜色，并将页面的边距和内边距都设为0。 - `header`：设置页面头部的背景颜色、内边距和文字颜色，并将文字居中对齐。 - `img`：设置图片的样式，使其居中显示、自适应宽度和高度。 - `section`：设置页面主体部分的内边距和文本对齐方式。完成后，将以上代码保存为一个HTML文件，然后在浏览器中打开这个文件即可看到效果。

阅读全文