<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.nav_left{
height:56px;
float:left;
}
.nav_left img{
display:block;
float:left;
height:50px;
margin-top:3px;
margin-left:5px;
}
.nav_left ul{
list-style-type:none;
float:left;
margin:0px 0px 0px 40px;
padding:0px;
}
.nav_left ul li{
margin:0px 40px 0px 0px;
padding:0px;
float:left;
font-size:14px;
color:#c1c1c1;
line-height:56px;
}
.nav_right{
height:56px;
float:right;
}
.slider{
height:451px;
background-color:#16232b;
}
.slider img{
display:block;/* img是行内元素，需要设置为块元素，才会显示在中间 */
height:451px;
margin:0 auto;
}
.course_list{
min-height:500px;
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav">
<div class="nav_left">
<img src="img/logo.png" />
<ul>
<li>首页</li>
<li>Unity</li>
<li>虚幻</li>
<li>关于我们</li>
</ul>
</div>
<div class="nav_right"></div>
</div>
<div class="slider">
<img src="img/a.jpg" />
</div>
<div class="course_list"></div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
