作业3

来源：互联网发布：linux关闭selinux命令编辑：程序博客网时间：2024/06/06 01:37

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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-redius:50px;
border:2px solid #eee;
}
.navigator .pic{
float:right;
position:relative;
top:2px;
right:4px;
}
.sidebar{
list-style-type:none;
background-color:#333;
position:fixed;
width:300px;
top:0;
right:0;
bottom:0;
padding:20px 0;
}
.sidebar ul{
margin:0;
padding:0;
list-style:none;
}
.sidebar a{
color:#ffffff;
text-decoration:none;
padding:10px 30px;
}
.siderbar ul a{
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>
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div class="navigator">
<ul>
<li><a href="../../kf.html">产品列表</a></li>
<li><a href="../../kf3.html">分店列表</a></li>
<li><a href="../../joinUs.html">加入我们</a></li>
<li><a href="../../onlineOrder.html">网上订购</a></li>
<li class="pic"><img class="userPic" src="../../../bd_logo1.png" alt=""></li>
<div style="clear:both; "></div>
</ul>
</div>
<div class="wraper">
<title>欢迎光临CODING COFFEE</title>

</head>
<body>
<h1 style="color:pink">欢迎光临CODING COFFEE</h1>
<img src="../../img/c2.jpg">
<p>
敬请关注我们的定期<a href="../../kf.html">产品列表</a>

CODING COFFEE是一家只对程序员开放的<em>互联网咖啡馆</em>
</p>
<div>
<p>
请查看我们的<a href="../../kf3.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>
<div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</div>
</body>
</html>

阅读全文

0 0