console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>海贼宝藏-海贼精神，永往无前</title>
<style type="text/css">
@import url(task.css);
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="https://www.haizeix.com/files/system/2017/06-25/151022e72ce7760444.png">
</div>
<ul class="header-list">
<li class="header-hover">
<a href="http://haizeix.com">潘多拉魔盒 <b class="caret"></b></a>
<ul class="menu">
<li><a href="https://nanti.jisuanke.com/" target="_blank">计蒜客（在线交互式编码）</a></li>
<li><a href="https://www.nowcoder.com/" target="_blank">牛客网（面试真题测评）</a></li>
<li><a href="https://projecteuler.net" target="_blank">ProjectEuler（英文原站）</a></li>
<li><a href="http://pe-cn.github.io/" target="_blank">ProjectEuler（中英对照）</a></li>
<li><a href="https://leetcode-cn.com/" target="_blank">Leetcode（在线刷面试算法）</a></li>
<li><a href="http://en.cppreference.com/w/" target="_blank">C/CPP 参考手册（在线文档+运行环境）</a></li>
<li><a href="https://oschina.gitee.io/learn-git-branching/" target="_blank">Git 操作在线学习</a></li>
</ul>
</li>
<li class="header-hover">
<a href="" target="_blank">计蒜客(海贼宝藏) <b class="caret"></b></a>
<ul class="menu">
<li><a href="https://www.jisuanke.com/course/786" target="_blank">C语言程序设计</a></li>
<li><a href="https://www.jisuanke.com/course/787" target="_blank">C++程序设计</a></li>
<li><a href="https://www.jisuanke.com/course/788" target="_blank">Python程序设计</a></li>
<li><a href="https://www.jisuanke.com/course/789" target="_blank">工程实践基础</a></li>
<li><a href="https://www.jisuanke.com/course/790" target="_blank">面向对象编程（轮子哥）</a></li>
<li><a href="https://www.jisuanke.com/course/791" target="_blank">操作系统入门与系统编程</a></li>
<li><a href="https://www.jisuanke.com/course/792" target="_blank">数据结构</a></li>
<li><a href="https://www.jisuanke.com/course/799" target="_blank">求职算法辅导</a></li>
</ul>
</li>
<li class="header-hover">
<a href="" target="_blank">在线简历编写 <b class="caret"></b></a>
<ul class="menu">
<li><a href="" target="_blank">Overleaf编写</a></li>
<li><a href="" target="_blank">Latex简历编写</a></li>
<li><a href="" target="_blank">ShareLatex</a></li>
</ul>
</li>
<li class="header-hover">
<a href="" target="_blank">海贼NOI <b class="caret"></b></a>
<ul class="menu">
<li><a href="" target="_blank">海贼NOI学生管理平台</a></li>
<li><a href="" target="_blank">海贼OJ在线评测系统</a></li>
</ul>
</li>
<li class="header-hover">
<a href="" target="_blank">其他 <b class="caret"></b></a>
<ul class="menu">
<li><a href="" target="_blank" >关于海贼</a></li>
</ul>
</li>
</ul>
<div class="right">
<input type="text" class="hmq-input" placeholder=搜索>
<button class="study">我的学习</button>
</div>
</div>
<div class="lesson">
<h1>海贼编程课</h1><br>
<h5>学编程，来海贼，靠谱！</h5><br>
<div class="lesson-1">
<div class = "lesson-all">
<a href="https://www.haizeix.com/course/453" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/05-21/121454e95cb9363239.png" alt="前端0基础入门" class="img-responsive">
</a>
<div class="text">
<a href="" target="_blank">前端0基础入门</a>
</div>
<div class="value">
<span>3000元起</span>
</div>
</div>
<div class = "lesson-all">
<a href="https://www.haizeix.com/course/467" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/07-12/155856099f2b616151.png" alt="9.9元特价课" class="img-responsive">
</a>
<div class="text">
<a href="" target="_blank">9.9特价课</a>
</div>
<div class="value">
<span>9.9元起</span>
</div>
</div>
<div class = "lesson-all">
<a href="https://www.haizeix.com/course/446" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/04-29/143932467bfb552209.png" alt="9.9元特价课" class="img-responsive">
</a>
<div class="text">
<a href="" target="_blank">C语言</a>
</div>
<div class="value">
<span>200元起</span>
</div>
</div>
</div>
<div class="lesson-all">
<a href="http://www.haizeix.com/course/445" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/04-26/205312862a6a433511.png" alt="海贼高薪班课程大纲">
</a>
<div class="text">
<a href="" target="_blank">海贼高薪班课程大纲</a>
</div>
<div class="value">
<span>9999元</span>
</div>
</div>
<div class="lesson-all">
<a href="http://www.haizeix.com/course/444" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/04-28/10251173c14a034183.png" alt="高薪班面试题整理">
</a>
<div class="text">
<a href="" target="_blank">高薪班面试题整理</a>
<div class="value">
<span>18432元</span>
</div>
</div>
</div>
<div class="lesson-all">
<a href="http://www.haizeix.com/course/443" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/06-28/174742ec5532491242.png" alt="公益直播课">
</a>
<div class="text">
<a href="" target="_blank">公益直播课</a>
<div class="value">
<span>1元起</span>
</div>
</div>
</div>
<div class="lesson-all">
<a href="http://www.haizeix.com/course/442" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/04-28/1102499885f5120412.png" alt="【入门组】信息学奥赛">
</a>
<div class="text">
<a href="" target="_blank">【入门组】信息学奥赛</a>
<div class="value">
<span>200元起</span>
</div>
</div>
</div>
<div class="lesson-all">
<a href="http://www.haizeix.com/course/441" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/04-28/11070488d76e195785.png" alt="【提高组】信息学奥赛">
</a>
<div class="text">
<a href="#" target="_blank">【提高组】信息学奥赛</a>
<div class="value">
<span>20000元</span>
</div>
</div>
</div>
<div class="lesson-all">
<a href="http://www.haizeix.com/course/440">
<img src="https://www.haizeix.com/files/course/2020/04-28/110516c31a86248851.png" alt="【普及组】信息学奥赛">
</a>
<div class="text">
<a href="#" target="_blank">【普及组】信息学奥赛</a>
<div class="value">
<span>18000元</span>
</div>
</div>
</div>
<div class="lesson-all">
<a href="http://www.haizeix.com/course/439" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/04-28/1111462b8092959817.png" alt="分布式集群监控系统">
</a>
<div class="text">
<a href="#" target="_blank">分布式集群监控系统</a>
<div class="value">
<span>1024元</span>
</div>
</div>
</div>
<div class="lesson-all">
<a href="http://www.haizeix.com/course/438" target="_blank">
<img src="https://www.haizeix.com/files/course/2020/04-28/1511539e1454875929.png" alt="操作系统与系统编程">
</a>
<div class="text">
<a href="#" target="_blank">操作系统与系统编程</a>
<div class="value">
<span>2048元</span>
</div>
</div>
</div>
<div class="lesson-all">
<a href="http://www.haizeix/com/course/437">
<img src="https://www.haizeix.com/files/course/2020/04-28/152710e74b77435183.png" alt="JAVA WEB入门">
</a>
<div class="text">
<a href="#" target="_blank">JAVA WEB入门</a>
<div class="value">
<span>免费</span>
</div>
</div>
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body {
background-color: #ddd7d7;
}
.header{
height: 50px;
width: 100%;
background: #000;
}
.header .logo{
height: 100%;
margin-left: 20px;
display: inline-block;
}
img{
height: 100%;
}
.header-list{
display: inline-block;
}
.header-hover{
height: 50px;
width: 150px;
line-height: 50px;
float: left;
margin-left: 0px;
overflow: hidden;
}
.header-hover > a{
display: inline-block;
margin-left: 10px;
color: white;
text-decoration: none;
}
.caret{
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #fff;
}
.header-hover .menu{
background-color: #fff;
width: 250px;
float: left;
line-height: 50px;
padding: 10px 20px;
border-style : outset;
}
.menu > li{
list-style-type: none;
}
.menu a {
display: inline-block;
width: 100%;
color: black;
text-decoration: none;
}
.header-hover:hover{
overflow:visible;
}
.study{
margin-right: 20px;
height:35px;
width: 100px;
padding: 5px;
color: #fff;
border-color: #fff;
background-color: #000;
border-radius: 5px;
margin-top: 5px;
float: right;
}
.header .hmq-input{
height:25px;
width: 200px;
padding: 5px;
float: right;
margin-right: 10px;
border-radius: 5px;
margin-top: 5px;
}
.lesson{
width: 1200px;
height: 1000px;
margin: 0 auto;
margin-top: 150px;
}
.lesson h1{
position: absolute;
left: 530px;
top: 150px;
text-align: center;
}
.lesson h5{
position: absolute;
left: 550px;
text-align: center;
color: rgb(139, 130, 130);
}
.lesson-all{
position: relative;
height: 200px;
width: 260px;
padding: 10px;
border: 1px solid rgba(233, 212, 173, 0.945);
margin-top: 10px;
margin-left: 10px;
float: left;
overflow: hidden;
transition: transform .3s ease-in-out, box-shadow .3s cubic-bezier(.47, 0, .745, .715), border .3s linear .1s;
}
.text {
position: absolute;
}
.value {
position: relative;
}
.lesson-all:hover {
box-shadow: 0 10px 50px rgba(73, 66, 66, 0.25);
}
.lesson-all img{
position: relative;
height: 150px;
width: 260px;
}
.text a{
color: rgb(82, 75, 75);
text-decoration: none;
}
.value{
color: red;
float: right;
}