侧边框

最新推荐文章于 2021-07-22 09:24:29 发布

hubaoji

最新推荐文章于 2021-07-22 09:24:29 发布

阅读量288

点赞数

本文链接：https://blog.csdn.net/hubaoji/article/details/78471154

版权

<!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: #4444;
			}
			.wraper{
			    text-align:center;
				}
			.navigator .tu{
			   width:35px;
			   height:35px;
			   border-radius:20px;
			   margin:8px;
			   border:2px; solid #eee;
			}
			.navigator .tou{
			   float:right;
			}
			.xixi{
				background-color:#333;
				position: fixed;
				top:0px;
				right:-250px;
				bottom:0px;
				padding:20px 0;
				width:250px;

			}
			.xixi ul{
				margin:0;
				padding:0;
				list-style:none;
			}
			.xixi ul a{
					color:#ffff;
					text-decoration:none;
					padding:10px 30px; 
					display:inline-block;
					width:100%;
			}
			.xixi ul a:hover{
				background-color:#4444;
			}
			.kao{
				background-color: blue;
				position:fixed;
				top:0;
				bottom:0;
				left:0;
				right: 0;
				background-color: rgba(0,0,0,0.2);
				display:none;
			}
			
		
	</style>
	<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
	<div class="navigator">
		<ul>
			<li><a href="./html/list.html">产品列表</a></li>
			<li><a href="./html/shopList.html">分店列表</a></li>
			<li><a href="./html/joinUs.html">加入我们</a></li>
			<li><a href="./html/onlineOrder.html">网上订购</a></li>
			<li class="tou"><img class="tu" src="img/头像.png" alt=""></li>
			<div style="clear:both; "></div>

		</ul>
		
	</div>
	<div class="wraper">
	  <h1 style="color:blue">欢迎光临Coding Coffee</h1>
		<img src="img/c9.jpg">
			<div>
				 	<p>
				敬请关注我们定期的<a href="./list.html">产品列表</a>,
				<span>CODING COFFEE</span>是一家只对程序员开放的<em>互联网咖啡馆。</em>
				</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="kao"></div>
   <div class="xixi">
		<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>