外贸网页模板,

Wd提问: 外贸网页模板

Ai批改: 创建一个外贸网页模板时，你需要确保网站不仅美观而且实用，能够有效地展示你的产品或服务，并且易于用户导航。以下是一个简单的外贸网页模板示例结构，包括HTML和CSS的基本代码：

HTML 结构 (index.html)
html
<!DOCTYPE html
<html lang=en
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<title公司名称全球贸易平台</title
<link rel=stylesheet href=styles.css
</head
<body
<!-页眉
<header
<div class=logo公司LOGO</div
<nav
<ul
<li<a href=home首页</a</li
<li<a href=products产品</a</li
<li<a href=about关于我们</a</li
<li<a href=contact联系我们</a</li
</ul
</nav
</header

<!-主体内容
<section id=home class=hero
<h1欢迎来到我们的全球贸易平台</h1
<p探索来自世界各地的高质量商品和服务。</p
</section

<section id=products
<h2我们提供的产品和服务</h2
<div class=product-list
<div class=product-item
<img src=product1.jpg alt=产品1
<h3产品1名称</h3
<p产品描述。</p
</div
<!-更多产品项..、
</div
</section

<section id=about
<h2关于公司</h2
<p我们是领先的国际贸易商，专注于提供高品质的产品和服务。</p
</section

<section id=contact
<h2联系我们</h2
<form action=
<input type=text placeholder=您的姓名
<input type=email placeholder=您的邮箱
<textarea placeholder=您的消息</textarea
<button type=submit发送</button
</form
</section

<!-页脚
<footer
<p&copy; 2023 公司名称、版权所有。</p
</footer
</body
</html

CSS 样式 (styles.css)
css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: 333;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}

.logo {
font-size: 1.5rem;
}

nav ul {
list-style-type: none;
display: flex;
}

nav ul li {
margin-left: 1rem;
}

nav ul li a {
color: white;
text-decoration: none;
}

.hero {
background-image: url('hero.jpg');
background-size: cover;
color: white;
text-align: center;
padding: 4rem 1rem;
}

.product-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}

.product-item img {
max-width: 100%;
height: auto;
}

footer {
background-color: 333;
color: white;
text-align: center;
padding: 1rem;
}

这个模板提供了一个基本框架，你可以根据自己的需求添加更多的样式和功能。记得在实际部署前测试所有的链接和表单，以确保它们正常工作。