<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*样式*/
/*css初始化*/
* { /*清除内外边距*/
margin: 0;
padding: 0;
}
ul {
list-style: none;/*取消列表样式：小点*/
}
/* --- 清除浮动 ---*/
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/*以上是写网页之初就写的初始化*/
/*以下虚线包裹部分是写网页的过程中产生的需要清除的默认样式，同样回来清除，进行初始化后，写成自己需要的样式*/
/*--------------------------------------------------------------------------*/
a { /*这个原本不属于初始化的一部分，但是在写样式的过程中发现网页所有的a都是一个颜色，而且鼠标经过都会变色，所以就加在这里*/
color: #050505;
text-decoration: none; /*取消下划线*/
}
input {
border: 0; /*所有的表单边框为0，搜索框有默认的样式，在这里清除他原本的样式*/
box-sizing: border-box; /*默认的盒模型给padding值会把盒子撑大，后面的内容就会被挤掉下去，换成这个css3的盒模型就不会了。他会把 border 和 padding 都包含到盒子的宽度里，用这个盒模型给盒子加了边框和内边距盒子不会变大，就不用计算尺寸了*/
}
/* --- 清除浮动 ---*/
/* --- css初始化完成 ---*/
.container { /*版心宽度都是1200，都是居中显示，所以就要声明一个公共类*/
width: 1200px;
margin: 0 auto;
}
/*--------------------------------------------------------------------------------*/
/*下面开始写样式*/
/*页面头部开始*/
body {
background-color: #f3f5f7;/*整个页面的背景色*/
}
header {
height: 100px;
overflow: hidden;/*这是nav的父级盒子，不加这个属性的话，给了nav外边距就会引发外边距合并的问题*/
}
nav {
width: 1366px;
height: 42px;
margin: 26px auto ;/*盒子 nav 水平居中对齐，在这里是嵌套的盒子，nav在header盒子里，如果给了外边距，就要给父盒子外边框或者给overflow：hidden；，否则会外边距合并*/
}
.logo {
float: left;
}
.navbar {
float: left;
height: 42px;
line-height: 42px;/*因为行高会继承，所以既然这里设置了行高，那么再加一个line-height: 42px;那么li里面的文字就会垂直居中了，就不用再去li里面多写一遍了*/
margin-left: 50px;
}
.navbar li { /*li里面装的文字是不一样多的，所以不能给宽度，如果给了宽度，字数多的和字数少的显示起来样式不一样，而且鼠标经过的时候，文字底下还会出现一条和文字一样宽的蓝色的线*/
float: left; /*让首页、课程的等文字浮动起来，和logo在一行显示*/
}
.navbar li a {
padding: 0 9px;/*行内元素不给上下padding值，给左右值，又因为a里面的文字不一样多，所以不给宽度，用文字挤出盒子的宽度*/
display: block; /*鼠标经过a会有一条线，而用 border-bottom做这条线的话，因为a是行内元素，线和字是贴在一起的，要把线往下面移一点的话，就要把a转换为块元素，这样就能给高度，有了高度后，样式就能做的好看了*/
/*height: 42px;这里行高不用写，因为继承了navbar的高度*/
}
.navbar li a:hover {
border-bottom: 2px solid #00a4ff; /*鼠标经过出现底边框 2px是边框宽度，就是鼠标经过后出现的线的宽度*/
}
/*页面头部结束*/
/*搜索框部分开始 */
.search {
width: 410px;
height: 38px;
border: 1px solid #00a4ff;/*这个盒子是标准流，前面都浮动了，这个不浮动的话会压到前面ul下面，所以要接着写浮动*/
float: right;
}
.search input[type=text] {/* 1. 属性选择器 选取 type 为text 的文本框 2.因为搜索框有两个部分，文本框和提交按钮，而他们默认有样式，所以要回到上面css初始化部分消除这个样式 3. 这里input和【】之间不能有空格*/
width: 360px;
height: 38px;/*这里高度不继承，要手动给*/
padding-left: 20px; /*这里给了这个内边距的话，就会把后面的搜索按钮挤掉下去，所以要到上面input那里去改盒模型*/
float: left;/*行内块元素之间会有空隙，加一个浮动他们就会贴在一起了就可以解决了，这也是不用行内块元素布局的原因*/
}
.search input[type=submit] {/*属性选择器 选取 type 为text 的文本框*/
width: 50px;
height: 38px;
float: left;/*行内块元素之间会有空隙，加一个浮动他们就会贴在一起了就可以解决了，这也是不用行内块元素布局的原因*/
background: #00a4ff url(search.png) center center no-repeat;/*这是一个按钮，没法插入图片，就把搜索放大镜图片作为背景图,中间的center值是设定背景图的位置，让他居中显示*/
}
/*搜索框部分结束 */
/*个人中心开始*/
.personal {
float: right;
height: 42px;
line-height: 42px;/*行高等于高，让文字居中*/
margin: 0 15px 0 35px;/*上 0 右15 下0 左 35*/
}
.personal img {
margin: 0 8px;
}
/*个人中心结束*/
/*banner部分开始*/
.banner {
height: 420px;
background-color: #1c036c;
}
.banner-in {
height: 420px;
background: url(images/banner.png) 0 0 no-repeat;
}
.slidebar {
height: 420px;
width: 190px;
background: rgba(0, 0, 0, .3) ;/*盒子背景半透明*/
float: left;
}
.slidebar li a {
color: #fff;
font-size: 14px;
padding: 0 20px;
/*a是行内元素，没有大小，需要转换为块元素*/
display: block;
/*height: 45px;*/
line-height: 45px;/*行高等于高，文字垂直居中，单行的情况下，不用给高度也可以实现垂直居中，因为行高会撑开盒子*/
}
.slidebar a:hover {
color: #00a4ff;
}
.slidebar a span {
float: right;
font-family: arial; /*一般情况下 符号都用这个字体*/
}
.timetable {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.timetable dt {
height: 50px;
line-height: 50px; /*行高等于高，文字水平垂直居中显示*/
background-color: #9bceea;
text-align: center; /*让文字水平居中，margin:0 auto;是让盒子水平居中*/
color: #fff;/*文字颜色*/
font-weight: 700;/*字体加粗*/
letter-spacing: 3px;/*设置字间距*/
margin-bottom: 5px; /*这里本来应该是第一个dd和dt之间有外边距，但是dd有很多个，一加就全部加了外边距了，所以给dt加一个底外边距，*/
}
.timetable dd {
width: 193px;
height: 60px;
margin: 0 auto;
border-bottom: 1px solid #ccc;
padding-top: 12px;
box-sizing: border-box
}
.timetable dd:last-child { /*结构伪类选择器，选最后一个子级dd*/
border: 0;
}
.timetable dd h4 {
font-size: 16px;
font-weight: normal; /*让粗体体不变粗*/
color: #4e4e4e;
}
.timetable dd p {
font-size: 14px;
color: #a5a5a5;
}
.timetable dd a {
height: 38px;
border: 1px solid #00a4ff;
display: block;/*把a转为块元素，好设置高度*/
text-align: center; /*文字水平居中显示*/
line-height: 38px;/*文字垂直水平居中显示*/
color: #00a4ff;
font-weight: 700;/*文字加粗*/
}
.timetable dd a:hover {
background-color: #00a4ff;
color: #fff;
}
/*banner部分结束*/
/*精品推荐部分开始*/
.recommend {
height: 60px;
line-height: 60px;
background-color: #fff;
margin-top: 8px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2) /*盒子阴影 ：水平位置 垂直位置 模糊距离 影子颜色 */
}
.recommend a {
padding: 0 30px;
border-right: 1px solid #ccc;
}
.recommend a:hover {
color: #00a4ff;
}
.recommend a:first-child {
color: #00a4ff;
}
.recommend a:last-child {
font-size: 14px;
color: #00a4ff;
border:0;
float: right;
}
/*精品推荐部分结束*/
</style>
</head>
<body>
<!--结构-->
<!--页面头部-->
<header>
<nav>
<!-- logo部分开始-->
<div class="logo">
<img src="logo.png" alt="">
</div>
<!-- logo部分完成 -->
<!-- 导航栏部分 开始-->
<div class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 导航栏部分完成 -->
<!-- 个人中心开始-->
<!-- 这里因为是右浮动，所以如果个人中心按页面布置的顺序写在搜索框的后面的话，那么依据右浮动的特性，写在前面的就在最右边，后浮动的跟在他后面，结构就乱了，所以要写在前面来-->
<div class="personal">
<a href="#">个人中心 <img src="message.png" alt=""></a>
<a href="#"> <img src="avatar.png" alt="">网名</a> <!-- 头像是可以点击的，所以放在a里-->
</div>
<!-- 个人中心结束-->
<!-- 搜索框部分开始 -->
<div class="search">
<form action=""><!--搜索栏需要有form提交表单-->
<input type="text" placeholder="请输入关键词"><!--这里如果用value，而不是placeholder的话，在文本框中输入文字的时候，是在“请输入文本关键词”这几个字后面接着的，而使用placeholder的话，直接在文本框输入，"请输入关键词"这几个字是灰色的，输入文字他会自动消失，不影响输入-->
<input type="submit" value=""><!--这里设置value值为空的话，按钮就不显示字了，方便插入放大镜背景图*/-->
</form>
</div>
<!-- 搜索框部分结束 -->
</nav>
</header>
<!--banner部分开始-->
<div class="banner">
<div class="banner-in container">
<!-- 左侧导航栏开始 -->
<div class="slidebar">
<ul>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
</ul>
</div>
<!-- 左侧导航栏结束-->
<!-- 右侧导航栏开始-->
<dl class="timetable">
<dt>我的课表</dt>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-适用对象</p>
</dd>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-适用对象</p>
</dd>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-适用对象</p>
</dd>
<dd>
<a href="#">全部课程</a>
</dd>
</dl>
<!-- 右侧导航栏结束-->
</div>
</div>
<!--banner部分结束-->
<!--精品推荐部分开始-->
<div class="recommend container">
<a href="#">精品推荐</a>
<a href="#">Jquery</a>
<a href="#">Spart</a>
<a href="#">Mysql</a>
<a href="#">Javascript</a>
<a href="#">Javaweb</a>
<a href="#">C++</a>
<a href="#">修改兴趣</a>
</div>
<!--精品推荐部分结束-->
</body>
</html>
image.png
