CSS例子
学成网
需要使用的图片：
代码：
<html><head><style>/*CSS初始化*/* { /*清除内外边框*/padding: 0;margin: 0;}ul {list-style: none; /*清除列表样式*/}.clearfix:before,.clearfix:after { /*清除浮动*/content: ""; display: table; }.clearfix::after {clear: both;}.clearfix { zoom: 1;}a {text-decoration: none;}input {border: 0; /*所有表单边框为0*/box-sizing: border-box; /*border和padding包含到盒子里*/}.contanier { /*因为样式相同，事先声明*/width: 1500px;margin: 0 auto;}/*css初始化结束*/body {background-color: #f3f5f7; /*页面背景色*/}header { /*页面头部*/height: 100px;overflow: hidden; /*防止外边距合并*/}nav {width: 2000px;height: 42px;margin: 26px auto 0;}.logo{float: left;}.navbar {height: 42px;line-height: 42px; /*行高等于高，垂直居中*/float: left;margin-left: 52px;}.navbar li {float: left;}.navbar li a {color: #666;padding: 0 9px;display: block;height: 42px;}.navbar li a:hover {border-bottom: 2px solid skyblue;}.search {width: 410px;height: 40px;border: 1px solid #00a4ff;float: right;}.search input[type=text] { /*属性选择器 type为text的文本框*/width: 360px;height: 40px;padding-left: 20px;float: left;}.search input[type=submit] {width: 50px;height: 40px;float: left;background: #00a4ff url(images/search.png) center center no-repeat;}.personal {float: right;height: 42px;line-height: 42px;margin: 0 15px 0 35px;}.personal a {color: #666;}.personal img {margin: 0 10px;}/*banner部分*/.banner {height: 420px;background-color: #1c036c;}.banner-in {height: 420px;background: url(images/pic1.png) center center no-repeat;}.sliderbar {height: 420px;width: 190px;background: rgba(0,0,0,0.3); /*盒子背景半透明*/float: left;}.sliderbar li a {font-size: 16px;color: white;padding: 0 20px;display: block;height: 45px;line-height: 45px; /*单行垂直居中有了行高可以不用给高度*/}.sliderbar li a span {float: right;font-family: Arial, Helvetica, sans-serif;}.sliderbar li a:hover {color: #00a4ff;}.timetable {width: 230px;height: 300px;margin-top: 50px ;background-color: #fff;float: right;}.timetable dt {height: 50px;background-color: #00a4ff;text-align: center;line-height: 50px;color: white;font-weight: 700; /*字体加粗*/letter-spacing: 2px; /*字符间距*/margin-bottom: 6px;}.timetable dd {width: 193px;height: 60px;margin: 0 auto;border-bottom: 1px solid #ccc;padding-top: 12px;box-sizing: border-box;}.timetable dd h4 {font-size: 16px;font-weight: normal;color: #4e4e4e;}.timetable dd h5 {font-size: 14px;font-weight: normal;color: #a5a5a5;}.timetable dd:last-child {border: 0;}.timetable dd a {height: 38px;border: 1px solid #00a4ff;display: block;text-align: center;line-height: 38px;color: #00a4ff;font-weight: 700;}/*推荐部分*/.recom {height: 60px;background-color: #fff;margin-top: 10px;box-shadow: 0 2px 2px rgba(0,0,0,0.2);}.recom a {color: #4e4e4e;float: left;display: block;padding: 20px;border-right: 1px solid #4e4e4e;box-sizing: border-box;}.recom a:last-child {float: right;border: 0;}</style></head><body><!--页面头部分--><header><nav><!--logo部分--><div class="logo"><img src="images/logo.png" 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="images/ld.png" alt=""></a><a href=""><img src="images/pic.png" alt="">123</a></div><!--搜索框部分--><div class="search"><input type="text" placeholder="请输入关键词"><input type="submit" value=" "> <!--图片背景--></div></nav></header><!--banner部分--><div class="banner"><div class="banner-in contanier"><!--左侧导航栏--><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="">UI设计 <span>></span> </a></li><li><a href="">产品 <span>></span> </a></li></ul></div><!--小课表部分--><dl class="timetable"><dt>我的课程表</dt><dd><h4>继续学习 程序语言设计</h4><h5>正在学习 使用对象</h5></dd><dd><h4>继续学习 程序语言设计</h4><h5>正在学习 使用对象</h5></dd><dd><h4>继续学习 程序语言设计</h4><h5>正在学习 使用对象</h5></dd><dd><a href="">全部课程</a></dd></dl></div><!--推荐部分--><div class="recom contanier"><a href="">精品推荐</a><a href="">JQuery</a><a href="">Spark</a><a href="">MySQL</a><a href="">JavaWb</a><a href="">MySQL</a><a href="">JavaWb</a><a href="">修改兴趣</a></div></body>
</html>
