博学谷案例练习

博学谷

效果图：

header模块logo写法

PS:

logo作为网站的标志，应将其放在h1标签中，以便搜索引擎找到它，描述信息通过
text-indent: -9999999px;
overflow: hidden;
属性将其隐藏

• html

 
    <header>
        <div class="inner container clearfix">
            <div class="logo fl">
                <h1><a href="#">博学谷a>h1>
            div>
            <div class="sideBar fr">
                <ul>
                    <li><a href="#">学习中心a>li>
                    <li><a href="#">购物车a>li>
                    <li>|li>
                    <li><a href="#">登录a>li>
                    <li><a href="#">注册a>li>
                ul>
            div>
        div>
    header>
    

• css

/* header start */
header {
  background-color: #fff;
}
header .inner {
  height: 72px;
}
header .inner .logo {
  width: 288px;
  height: 40px;
  margin-top: 22px;
}
header .inner .logo a {
  display: block;
  width: 258px;
  height: 40px;
  background: url("../images/logo.png") no-repeat;
  text-indent: -9999999px;
  overflow: hidden;
}
header .inner .sideBar {
  margin-top: 30px;
}
header .inner .sideBar ul li {
  float: left;
  margin-left: 15px;
}
header .inner .sideBar ul li:nth-child(3) {
  color: #ecf1f8;
}

nav模块

PS:

nav导航栏应按功能模块来写，全部学科这应是一个整体，而且属于nav栏

• html

<nav>
        <div class="inner container ">
            <div class="courseLinks fl ">
                <div class="curse-hd ">
                    全部学科
                div>
                <div class="curse-bd">
                    <ul>
                        <li><a href="#"> Java <i class="iconfont ">i>a>li>
                        <li><a href="#"> 前端 <i class="iconfont ">i>a>li>
                        <li><a href="#"> 大数据 <i class="iconfont ">i>a>li>
                        <li><a href="#"> Android <i class="iconfont ">i>a>li>
                        <li><a href="#"> PHP <i class="iconfont "> i>a>li>
                        <li><a href="#"> C/C++ <i class="iconfont ">i>a>li>
                        <li><a href="#"> iOS <i class="iconfont ">i>a>li>
                        <li><a href="#"> UI <i class="iconfont ">i>a>li>
                        <li><a href="#"> 网络营销 <i class="iconfont ">i>a>li>
                        <li><a href="#"> Python <i class="iconfont ">i>a>li>
                    ul>
                div>
            div>
            <div class="navLinks fl">
                <ul>
                    <li><a href="#">首页a>li>
                    <li><a href="#">就业班a>li>
                    <li><a href="#">精品微课a>li>
                    <li><a href="#">免费微课a>li>
                    <li><a href="#">问答精灵a>li>
                    <li><a href="#">博学社a>li>
                    <li><a href="#">学习空间a>li>
                ul>
            div>
            <div class="search-btn fr">
                <input type="text" placeholder="搜索课程">
                <i class="line">i>
                <a href="#"><img src="./images/放大镜.png" alt="">a>
            div>
        div>
    nav>
    

• css

/* nav start */
nav {
  border-bottom: 1px solid #ebebeb;
  height: 40px;
  background-color: #fff;
}
nav .courseLinks {
  position: relative;
  z-index: 1;
  width: 230px;
  height: 470px;
  border-radius: 8px;
  overflow: hidden;
}
nav .courseLinks .curse-hd {
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #4baa47;
  color: #fff;
}
nav .courseLinks .curse-bd {
  width: 230px;
  height: 432px;
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: 25px;
}
nav .courseLinks .curse-bd ul li {
  height: 40px;
  width: 100%;
  line-height: 40px;
}
nav .courseLinks .curse-bd ul li a {
  display: block;
  width: 100%;
  height: 40px;
  text-indent: 34px;
  line-height: 40px;
  color: #fff;
}
nav .courseLinks .curse-bd ul li i {
  float: right;
  margin-right: 34px;
}
nav .courseLinks .curse-bd ul li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
nav .navLinks {
  margin-left: 30px;
}
nav .navLinks ul li {
  float: left;
  margin-right: 34px;
  line-height: 40px;
  font-size: 16px;
}
nav .navLinks ul li:hover a {
  color: #4baa47;
}
nav .search-btn {
  width: 212px;
  height: 34px;
  line-height: 34px;
  margin-top: 1px;
  border: 1px solid #eeeeee;
  border-radius: 20px;
  overflow: hidden;
}
nav .search-btn input {
  float: left;
  display: block;
  width: 146px;
  height: 100%;
  text-indent: 15px;
}
nav .search-btn .line {
  width: 1px;
  height: 22px;
  background-color: #eeeeee;
  float: left;
  margin-top: 6px;
}
nav .search-btn a {
  float: right;
  width: 61px;
  height: 100%;
}
nav .search-btn a img {
  display: block;
  margin: 7px auto 0;
}

banner模块

PS:

背景图在版心里版心外的步分通过背景色延伸
轮播图的小圆点通过定位实现

ul是绝对定位其父元素是相对定位，层级提高了会压住其他nav中课程模块

所以要提升该模块的层级

层级是一个属性z-index,层级的取值范围是整数,默认层级是0,当层级相同时,后写的标签会压在先写标签的上面,当层级不同时,谁的层级高,谁在上面,层级是负数时,要低于标准流的元素。

改变li标签小圆点

PS:通过做一个绿色的小圆点，通过浮动或定位将其摆放的相应的位置

• html

 <div class="news">
            <div class="news-title fl">
                <p class="title">博学谷新闻p>
                <img src="./images/2017.png" alt="">
            div>
            <div class="new-list fr">
                <p> 资讯公告p>
                <ul class="list">
                    <li>
                        <a href="#"><i class="icon">i>Java在线基础班免费学，还能赢千元代金券！a>
                    li>
                    <li>
                        <a href="#"><i class="icon">i>“限时免费''—500个名额，2017最新课程免费领a>
                    li>
                    <li>
                        <a href="#"><i class="icon">i>云计算在线班，挑战年薪30Wa>
                    li>
                    <li>
                        <a href="#"><i class="icon">i>Web前端在线实战班，不解释a>
                    li>
                    <li>
                        <a href="#"><i class="icon">i>传智播客重磅推出传智专修学院a>
                    li>
                    <li>
                        <a href="#"><i class="icon">i>获取更多学习资料+源码+笔记a>
                    li>
                ul>
            div>

        div>

• css

.section .news .new-list .list li .icon {
  display: block;
  float: left;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #4baa47;
  margin-top: 4px;
  margin-right: 5px;
}