博學谷案例練習

博學谷

效果圖：

header模塊logo寫法

PS:

logo作爲網站的標誌，應將其放在h1標籤中，以便搜索引擎找到它，描述信息通過
text-indent: -9999999px;
overflow: hidden;
屬性將其隱藏

• html

 <!-- header start -->
    <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>
    <!-- header end -->

• 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 ">&#xe659;</i></a></li>
                        <li><a href="#"> 前端 <i class="iconfont ">&#xe659;</i></a></li>
                        <li><a href="#"> 大數據 <i class="iconfont ">&#xe659;</i></a></li>
                        <li><a href="#"> Android <i class="iconfont ">&#xe659;</i></a></li>
                        <li><a href="#"> PHP <i class="iconfont "> &#xe659;</i></a></li>
                        <li><a href="#"> C/C++ <i class="iconfont ">&#xe659;</i></a></li>
                        <li><a href="#"> iOS <i class="iconfont ">&#xe659;</i></a></li>
                        <li><a href="#"> UI <i class="iconfont ">&#xe659;</i></a></li>
                        <li><a href="#"> 網絡營銷 <i class="iconfont ">&#xe659;</i></a></li>
                        <li><a href="#"> Python <i class="iconfont ">&#xe659;</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>
    <!-- nav end -->

• 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>雲計算在線班，挑戰年薪30W</a>
                    </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;
}