帮我用网页写一个包含有导航栏、背景色、有图片、选项框、超链接、css样式的代码素材
时间: 2023-10-06 22:14:06 浏览: 184
以下是一个简单的网页代码示例,包含导航栏、背景色、图片、选项框、超链接和 CSS 样式:
```
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
#navbar {
background-color: #333;
overflow: hidden;
}
#navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 80%;
margin: 0 auto;
padding-top: 50px;
padding-bottom: 50px;
}
select {
padding: 10px;
border-radius: 5px;
border: none;
background-color: #fff;
font-size: 16px;
margin-bottom: 20px;
}
.btn {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
text-transform: uppercase;
font-size: 16px;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
color: #333;
}
</style>
</head>
<body>
<div id="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<div class="container">
<h1>Welcome to my website</h1>
<img src="image.jpg" alt="My Image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor pharetra convallis. Integer vel velit eleifend, semper mauris vitae, imperdiet sem. Sed ut ex in nisl commodo venenatis in ut tortor. Sed sit amet risus in metus lacinia vestibulum. Sed sed augue vitae purus tempor lobortis. Donec euismod aliquet justo, vitae bibendum lacus malesuada a. Sed eget enim nisl.</p>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<button class="btn">Submit</button>
<p>Check out <a href="https://www.google.com">Google</a> for more information.</p>
</div>
</body>
</html>
```
请注意,您需要将 `image.jpg` 替换为您自己的图像文件,并使用适当的文件路径。
阅读全文