网易严选html+css
时间: 2024-01-03 19:04:49 浏览: 25
网易严选是一个电商平台,它的网页设计主要使用HTML和CSS来实现。HTML用于构建网页的结构和内容,而CSS用于控制网页的样式和布局。
以下是一个简单的网易严选页面的HTML和CSS示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>网易严选</title>
<link rel="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>
<h2>热门商品</h2>
<div class="product">
<img src="product1.jpg" alt="商品1">
<h3>商品1</h3>
<p>商品1的描述</p>
<button>加入购物车</button>
</div>
<div class="product">
<img src="product2.jpg" alt="商品2">
<h3>商品2</h3>
<p>商品2的描述</p>
<button>加入购物车</button>
</div>
</section>
</main>
<footer>
<p>版权所有 © 网易严选</p>
</footer>
</body>
</html>
```
CSS代码(style.css):
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
color: #333;
}
.product {
display: inline-block;
width: 200px;
margin-right: 20px;
}
.product img {
width: 100%;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
这个示例展示了一个简单的网易严选页面,包括顶部导航栏、热门商品展示和底部版权信息。通过HTML和CSS的结合使用,可以实现网页的结构和样式。