<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } li{ list-style:none; } .clearfix:after,.clearfix:before{ display: table; content: ''; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } a{ color: #050505; text-decoration: none; } body{ background-color: #f3f5f7; } input{ border:0; box-sizing: border-box; } .container{ margin:0 auto; width: 1200px; } /*头部*/ header{ /*width: 1366px;*/ height: 100px; overflow: hidden; } nav{ width: 1366px; height: 42px; margin:26px auto; } /*logo部分*/ .logo{ float: left; } /*导航栏*/ .navbar{ float: left; height: 42px; line-height:42px; margin-left:50px; } .navbar li{ float: left; } .navbar li a{ padding: 0 8px; display: block; height: 42px; } .navbar li a:hover{ border-bottom:2px solid #00a4ff; } /*搜索框*/ .search{ width: 410px; height: 38px; float: right; border:1px solid #00a4ff; } .search input[type=text]{ width: 360px; height: 38px; padding-left:20px; float: left; } .search input[type=submit]{ width: 50px; height: 38px; background-color: #00a4ff; float: left; } /*个人中心*/ .personal{ float: right; height: 42px; line-height: 38px; margin:0 125px 0 30px; } /*banner*/ .banner{ height: 420px; background-color: #1c036c; } .banner-in{ height: 420px; background: url(images/banner.jpg) center center no-repeat; } /*左侧导航栏*/ .sliderbar{ height: 420px; width: 190px; background: rgba(0,0,0,0.3); float: left; } .sliderbar ul li a{ color: #fff; font-size:14px; line-height:45px; display: block; padding:0 20px; } .sliderbar ul li a:hover{ color: #00a4ff; } .sliderbar li a span{ float: right; font-family:Arial; } /*小课表*/ .timetable{ float: right; height: 300px; width: 230px; background-color: #fff; margin-top:50px; } .timetable dt{ height: 50px; line-height:50px; text-align: center; background-color: #9bceea; color: #fff; font-weight:700; letter-spacing:2px; margin-bottom:12px; } .timetable dd{ width: 193px; height: 60px; border-bottom: 1px solid #ccc; margin:0 auto; padding-top:12px; box-sizing: border-box; } .timetable dd:last-child{ border:0; } .timetable dd h4{ color: #4e4e4e; font-size:16px; font-weight:normal; } .timetable dd p{ color: #a5a5a5; font-size:14px; } .timetable dd a{ color: #004aff; height: 38px; line-height:38px; border:1px solid #00a4ff; font-weight:700; display: block; text-align: center; } .timetable dd a:hover{ background-color: #004aff; color: #fff; } /*精品推荐*/ .recommend{ height: 60px; line-height:60px; background-color: #fff; box-shadow:0 2px 2px rgba(0,0,0,0.2); margin-top:8px; } .recommend a{ border-right:1px solid #ccc; padding:0 30px; } .recommend a:first-child{ color: #004aff; } .recommend a:hover{ color: #00a4ff; } .recommend a:last-child{ color: #00a4ff; border:0; float: right; font-size:14px; } </style> </head> <body> <!--结构--> <!--头部--> <header> <nav> <!--logo部分--> <div class="logo"> <img src="images/logo.gif" alt=""> </div> <!--导航栏部分--> <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="" alt="">个人中心</a> <a href="#"><img src="" alt="">刘德华</a> </div> <!--搜索框部分--> <div class="search"> <input type="text" placeholder="请输入关键词" > <input type="submit" > </div> </nav> </header> <!--banner--> <div class="banner"> <div class="banner-in container"> <!--左侧导航栏--> <div class="sliderbar"> <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> <!--精品推荐--> <div class="recommend container"> <a href="#">精品推荐</a> <a href="#">jQuery</a> <a href="#">spart</a> <a href="#">MYSql</a> <a href="#">javaWeb</a> <a href="#">javaWeb</a> <a href="#">javaWeb</a> <a href="#">修改兴趣</a> </div> </body> </html>