web首页页面设计html
时间: 2023-08-15 20:05:20 浏览: 40
以下是一个简单的web首页页面设计的HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="banner">
<h1>Welcome to My Website</h1>
<p>We offer the best services for all your needs.</p>
<a href="#" class="btn">Learn More</a>
</section>
<section class="services">
<h2>Our Services</h2>
<div class="services-container">
<div class="service">
<h3>Service 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="service">
<h3>Service 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="service">
<h3>Service 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</section>
<section class="about">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed varius justo. Nullam aliquam, felis eget euismod hendrerit, erat elit posuere nisi, et ullamcorper magna augue vel enim. Proin et nisi vitae dolor lobortis consequat vel quis neque.</p>
<a href="#" class="btn">Learn More</a>
</section>
<section class="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>Copyright © My Website</p>
</footer>
</body>
</html>
```
需要注意的是,这个HTML代码只是一个基本的框架,你需要使用CSS和JavaScript来美化并添加交互效果。