以下是一个简单的科技风格网页的 HTML 和 CSS 代码示例：
HTML 代码：
```
<!
DOCTYPE html>
<html>
<head>
<title>科技风格网页</title>
<link r
el="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>科技网页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<section id="banner">
<h2>欢迎来到我们的网站</h2>
<p>我们提供最新的科技产品和服务</p>
<a href="#" class="btn">了解更多</a>
</section>
<section id="features">
<h2>我们的特点</h2>
<div class="feature">
<i class="fas fa-laptop"></i>
<h3>响应式设计</h3>
<p>我们的网站
适配各种设备和屏幕大小</p>
</div>
<div class="feature">
<i class="fas fa-cog"></i>
<h3>高性能</h3>
<p>我们的服务提供高速、稳定的体验</p>
</div>
<div class="feature">
<i class="fas fa-lock"></i>
<h3>安全保障</h3>
<p>我们采用最新的安全技术来保护用户信息</p>
</div>
</section>
<section id="services">
<h2>我们的服务</h2>
<div class="service">
<i class="fas fa-desktop"></i>
<h3>网站开发</h3>
<p>我们提供定制化的网站开发服务</p>
</div>
<div class="service">
<i class="fas fa-mobile-alt"></i>
<h3>移动应用开发</h3>
<p>我们开发 Android 和 iOS 应用程序</p>
</div>
<div class="service">
<i class="fas fa-server"></i>
<h3>云计算服务</h3>
<p>我们提供安全、稳定的云计算服务</p>
</div>
</section>
<section id="contact">
<h2>联系我们</h2>
<form>
<lab
el for="name">姓名</lab
el>
<input type="text" id="name" name="name">
<lab
el for="email">邮箱</lab
el>
<input type="email" id="email" name="email">
<lab
el for="message">留言</lab
el>
<textarea id="message" name="message"></textarea>
<button type="submit">发送</button>
</form>
</section>
</main>
<footer>
<p>版权所有 © 2021 科技网页</p>
</footer>
</body>
</html>
```
CSS 代码：
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #
333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
color: #ccc;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
#banner {
background-image: url('banner.jpg');
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
padding: 200px 0;
}
#banner h2 {
font-size: 48px;
margin: 0;
}
#banner p {
font-size: 24px;
margin: 20px 0;
}
.btn {
background-color: #f44
336;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
text-decoration: none;
}
.btn:hover {
background-color: #e53935;
}
#features {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
}
.feature {
flex-basis:
33%;
text-align: center;
margin: 20px;
}
.feature i {
font-size: 48px;
margin: 20px 0;
}
.feature h3 {
font-size: 24px;
margin: 0;
}
.feature p {
font-size: 18px;
margin: 10px 0;
}
#services {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
}
.service {
flex-basis:
33%;
text-align: center;
margin: 20px;
}
.service i {
font-size: 48px;
margin: 20px 0;
}
.service h3 {
font-size: 24px;
margin: 0;
}
.service p {
font-size: 18px;
margin: 10px 0;
}
#contact {
margin: 20px 0;
}
#contact h2 {
text-align: center;
margin: 0;
}
form {
display: flex;
flex-direction: column;
max-width: 500px;
margin: 0 auto;
}
lab
el {
font-size: 24px;
margin-top: 20px;
}
input, textarea {
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #f44
336;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #e53935;
}
footer {
background-color: #
333;
color: #fff;
text-align: center;
padding: 10px 0;
}
```
这份代码使用了 Flexbox 布局来创建响应式设计，使用了 Font Awesome 图标来增加视觉效果。
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
