HTML制作一个小米商城网页
时间: 2023-10-09 20:15:23 浏览: 91
很抱歉,作为AI语言模型,我没有办法呈现HTML页面,但是我可以为您提供一些HTML页面的模板和代码示例,您可以根据自己的需要进行修改和定制。
以下是一个简单的HTML页面模板,您可以根据需要进行修改和添加内容:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</nav>
</header>
<section id="banner">
<img src="banner.jpg" alt="小米商城">
</section>
<section id="products">
<h2>热门产品</h2>
<ul>
<li>
<img src="phone1.jpg" alt="小米10">
<h3>小米10</h3>
<p>价格:3999元</p>
</li>
<li>
<img src="phone2.jpg" alt="小米10 Pro">
<h3>小米10 Pro</h3>
<p>价格:4999元</p>
</li>
<li>
<img src="tv1.jpg" alt="小米电视4A">
<h3>小米电视4A</h3>
<p>价格:1999元</p>
</li>
<li>
<img src="router1.jpg" alt="小米路由器">
<h3>小米路由器</h3>
<p>价格:199元</p>
</li>
</ul>
</section>
<footer>
<p>©2021 小米科技</p>
</footer>
</body>
</html>
```
同时,以下是一个简单的CSS样式表,您可以将其保存为style.css文件并与HTML页面一起使用:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
#banner img {
width: 100%;
height: auto;
}
#products {
padding: 20px;
}
#products h2 {
text-align: center;
}
#products ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#products li {
flex: 1;
margin: 10px;
text-align: center;
}
#products li img {
width: 100%;
height: auto;
}
#products li h3 {
margin-top: 10px;
}
#products li p {
margin-top: 5px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
```
希望这些能帮助到您!
阅读全文