实训小项目3：PDD导航栏

DANEHONG

已于 2024-01-15 22:23:39 修改

阅读量340

点赞数 8

文章标签： css javascript 前端

于 2024-01-15 22:20:37 首次发布

本文链接：https://blog.csdn.net/DANEHONG/article/details/135612538

版权

实现以下效果

需要的图片为以下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拼多多</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			#container{
				width: 100%;
				height: 1500px;
			}
			.nav ul{
				list-style-type: none;
				text-align: center;
				margin: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: fixed;
				/* z-index: 1; */
				left: 200px;
			}
			.nav li {
				margin: 10px;
			}
			.nav li a {
				text-decoration: none;
				color: gray;
			}
			.nav li a:hover {
				color: orangered;
			}
			.nav li:nth-child(1){
				width: 180px;
				margin-right: 50px;
			}
			.nav li:nth-child(1) img{
				width: 100%;
			}
			.divider {
				margin-left: 20px;
				border:1px solid gray;
			}
			.image {
				/* position: absolute; */
				width: 100%;
				height: 450px;
				line-height: 450px;
				/* top: 150px; */
				padding-top: 130px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="nav">
				<ul>
					<li><img src="img/pdd_logo_v2.png" ></li>
					<li><a href="">首页</a>    <span class="divider"></span></li>
					<li><a href="">商家入驻</a> <span class="divider"></span></li>
					<li><a href="">跨境电商</a> <span class="divider"></span></li>
					<li><a href="">热点资讯</a> <span class="divider"></span></li>
					<li><a href="">社会招聘</a> <span class="divider"></span></li>
					<li><a href="">校园招聘</a> <span class="divider"></span></li>
					<li><a href="">招采平台</a> <span class="divider"></span></li>
					<li><a href="">帮助中心</a> <span class="divider"></span></li>
					<li><a href="">举报平台</a> <span class="divider"></span></li>
					<li><a href="">分享赚钱</a> <span class="divider"></span></li>
					<li><a href="">查快递</a></li>
				</ul>
				<div class="image"><img src="img/pin-nav.jpg" ></div>
			</div>
			
		</div>
	</body>
</html>

这段代码创建了一个包含导航栏的网页。导航栏包括多个链接，每个链接都有一个分隔符（<span class="divider"></span>）用于区分不同的链接。导航栏固定在页面左侧，并留有200像素的间距。导航栏中的图片部分使用<img>标签表示，可以根据需要替换为实际的图片。此外，还定义了一些CSS样式来美化导航栏和图片部分的布局。