html5简单网页作业
时间: 2023-05-30 13:06:59 浏览: 51
<!DOCTYPE html>
<html>
<head>
<title>简单网页作业</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #2c3e50;
text-align: center;
}
p {
margin: 0 20px;
line-height: 1.5;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.image {
display: block;
margin: 20px auto;
max-width: 100%;
height: auto;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>欢迎来到我的网页</h1>
<img class="image" src="https://via.placeholder.com/800x400" alt="占位图">
<p>这是一个简单的网页作业,用于展示HTML和CSS的基本用法。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac lorem id nisl malesuada venenatis. Nam eget orci euismod, faucibus quam vel, condimentum mi. Ut id nisi id ipsum sollicitudin commodo vel vel leo. Nullam ut tristique tellus. Morbi semper, mauris in fringilla cursus, lacus odio malesuada mi, vel luctus lorem enim a nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Nulla vehicula, massa a pulvinar vulputate, sapien elit cursus ante, vel faucibus elit diam id nunc. Sed tincidunt bibendum orci, in faucibus enim feugiat vel. Sed quis mattis augue. Praesent ac eros ut metus efficitur aliquet. Donec auctor urna varius purus facilisis, eu porta ante faucibus. Integer efficitur dolor vel nibh laoreet, ut commodo elit faucibus. Duis lobortis quam vel velit molestie, ac posuere dui vestibulum. Fusce auctor, nisl eget porttitor fringilla, nisl mi convallis magna, eu tincidunt nisl nibh a ex. Donec rhoncus urna in neque pharetra, eu bibendum arcu commodo.</p>
<a class="button" href="#">点击这里</a>
</div>
</body>
</html>