京东网页制作html➕css代码
时间: 2024-10-08 16:05:43 浏览: 27
css+html京东网页的制作
创建京东风格的网页通常会涉及HTML用于结构布局,CSS负责样式呈现。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>京东首页样例</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS文件 -->
</head>
<body>
<header>
<div class="logo">京东LOGO</div>
<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 class="banner">
<img src="banner.jpg" alt="京东活动图">
</section>
<section class="products">
<h2>热销商品</h2>
<ul>
<li>
<a href="#"><img src="product1.png" alt="产品1"></a>
<p>产品名称1</p>
</li>
<!-- 其他商品... -->
</ul>
</section>
</main>
<footer>
<p>© 2023 京东商城 | 版权所有</p>
</footer>
</body>
</html>
```
然后在`styles.css`文件中添加相应的CSS规则,例如:
```css
/* styles.css */
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f5f5f5;
padding: 20px;
}
.logo {
display: inline-block;
margin-right: 15px;
}
nav ul {
list-style-type: none;
display: flex;
}
.products {
margin-top: 40px;
}
.banner img {
width: 100%;
height: auto;
}
.product {
text-align: center;
margin-bottom: 20px;
}
```
阅读全文