2017.11.7作业

最新推荐文章于 2024-09-05 16:00:25 发布

酱紫呐

最新推荐文章于 2024-09-05 16:00:25 发布

阅读量213

点赞数

分类专栏：作业

本文链接：https://blog.csdn.net/weixin_40888248/article/details/78468544

版权

作业专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>欢迎光临Coding Coffee</title>
	<style type="text/css">
		.navigator ul{
			list-style-type:none;
			margin:0;
			padding:0;
			background-color:#333;
		}
		.navigator li a{
			text-decoration:none;
			display:block;
			padding:15px 18px;
			color:#ffffff;
		}
		.navigator li{
			float:left;
		}
		.navigator li:hover{
			background-color:#ccc;
		}
		.navigator .userpic{
			width:35px;
			height:35px;
			border-radius:50px;
			border:2px solid #eee;
		}
		.navigator .pic{
			float:right;
			position:relative;
			top:4px;
			right:15px;
		}
		.sidebar{
			background-color:#333;
			position:fixed;
			width:150px;
			top:0;
			right:-150px;
			bottom:0;
			padding:20px 0;
		}
		.sidebar ul{
			margin:0;
			padding:0;
			list-style:none;
		}
		.sidebar ul a{
			color:#ffffff;
			text-decoration:none;
			padding:10px 30px;
			display:inline-block;
			width:100%;
		}
		.sidebar ul a:hover{
			background-color:#444444;
		}
		.mask{
			display:none;
			position:fixed;
			top:0;
			bottom:0;
			left:0;
			right:0;
			background-color:rgba(0,0,0,0.3);
		}
		.wraper{
			text-align:center;
		}
		.wraper p{
			display: inline-block;
			font-weight:bold;
		}
	</style>
</head>
<body>
	<div class="navigator">
		<ul>
			<li><a href="list.html">产品列表</a></li>
			<li><a href="shoplist.html">分店列表</a></li>
			<li><a href="joinUs.html">加入我们</a></li>
			<li><a href="onlineOrder.html">网上订购</a></li>
			<li class="pic"><img class="userpic" src="./img/c2.jpg" alt=""></li>
			<div style="clear:both;">
		</ul>
	</div>
	<div class="wraper">
		<h1 style="color:blue;">欢迎光临Coding Coffee</h1>
		<img src="./img/c9.jpg">
			<div>
				<p>
					敬请关注我们定期的<a href="list.html">产品列表</a>Coding Coffee是一家只对程序员开放发互联网咖啡馆。
				</p>
			</div>
			<div>
				<p>
					请查看我们的<a href="shoplist.html">分店列表！</a>
				</p>
			</div>
			<div>
				<p>
					如果你想<a href="joinUs.html">加入我们</a>，请查看我们的招聘列表。
				</p>
			</div>
			<div>
				<p>
					<a href="onlineOrder.html">网上订购</a>Coding Coffee天天赢大礼。
				</p>
			</div>
	</div>
	<div class="mask"></div>
	<div class="sidebar">
		<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>
		</ul>
	</div>
</body>
</html>