国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

前端學(xué)成在線

2年前作者：shangxianjiao分類：Toy博客閱讀(22)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了前端學(xué)成在線。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

day07-學(xué)成在線

01-項(xiàng)目目錄

網(wǎng)站根目錄是指存放網(wǎng)站的第一層文件夾，內(nèi)部包含當(dāng)前網(wǎng)站的所有素材，包含 HTML、CSS、圖片、JavaScript等等。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-uXIiqznv-1691944062625)(assets/1680336645218.png)]

首頁(yè)引入CSS文件

<!-- 順序要求：先清除再設(shè)置 -->
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">

02-版心居中

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-ia7HEPSa-1691944062627)(assets/1680336711608.png)]

.wrapper {
  margin: 0 auto;
  width: 1200px;
}

body {
  background-color: #f3f5f7;
}

03-布局思路

布局思路：先整體再局部，從外到內(nèi)，從上到下，從左到右
CSS 實(shí)現(xiàn)思路
1. 畫(huà)盒子，調(diào)整盒子范圍 → 寬高背景色
2. 調(diào)整盒子位置 → flex 布局、內(nèi)外邊距
3. 控制圖片、文字內(nèi)容樣式

04-header區(qū)域-整體布局

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-tOq5bzoj-1691944062627)(assets/1680337054328.png)]

HTML結(jié)構(gòu)

<!-- 頭部區(qū)域 -->
<div class="header">
  <div class="wrapper">
    <!-- logo -->
    <div class="logo">logo</div>
    <!-- 導(dǎo)航 -->
    <div class="nav">導(dǎo)航</div>
    <!-- 搜索 -->
    <div class="search">search</div>
    <!-- 用戶 -->
    <div class="user">用戶</div>
  </div>
</div>

CSS樣式

/* 頭部區(qū)域 */
.header {
  height: 100px;
  background-color: #fff;
}

.header .wrapper {
  padding-top: 29px;
  display: flex;
}

05-header區(qū)域-logo

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-z1SypkCu-1691944062628)(assets/1680337229070.png)]

logo 功能：

單擊跳轉(zhuǎn)到首頁(yè)
搜索引擎優(yōu)化：提升網(wǎng)站百度搜索排名

實(shí)現(xiàn)方法：

標(biāo)簽結(jié)構(gòu)：h1 > a > 網(wǎng)站名稱（搜索關(guān)鍵字）

<div class="logo">
  <h1><a href="#">學(xué)成在線</a></h1>
</div>

CSS 樣式

/* logo */
.logo a {
  display: block;
  width: 195px;
  height: 41px;
  background-image: url(../images/logo.png);
  font-size: 0;
}

06-header區(qū)域-導(dǎo)航

實(shí)現(xiàn)方法：

標(biāo)簽結(jié)構(gòu)：ul > li * 3 > a
優(yōu)勢(shì)：避免堆砌 a 標(biāo)簽，網(wǎng)站搜索排名降級(jí)

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-3xe74uCB-1691944062628)(assets/1680337390943.png)]

HTML結(jié)構(gòu)

<ul>
  <li><a href="#" class="active">首頁(yè)</a></li>
  <li><a href="#">課程</a></li>
  <li><a href="#">職業(yè)規(guī)劃</a></li>
</ul>

CSS樣式

/* 導(dǎo)航 */
.nav {
  margin-left: 102px;
}

.nav ul {
  display: flex;
}

.nav li {
  margin-right: 24px;
}

.nav li a {
  display: block;
  padding: 6px 8px;
  line-height: 27px;
  font-size: 19px;
}


/* actvie 類選擇器，表示默認(rèn)選中的a */
.nav li .active,
.nav li a:hover {
  border-bottom: 2px solid #00a4ff;
}

07-header區(qū)域-搜索布局

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-XEFVCcAt-1691944062629)(assets/1680337525496.png)]

HTML結(jié)構(gòu)

<div class="search"></div>

CSS樣式

.search {
  display: flex;
  margin-left: 64px;
  padding-left: 19px;
  padding-right: 12px;
  width: 412px;
  height: 40px;
  background-color: #f3f5f7;
  border-radius: 20px;
}

08-header區(qū)域-搜索內(nèi)容

HTML結(jié)構(gòu)

<div class="search">
  <input type="text" placeholder="請(qǐng)輸入關(guān)鍵詞">
  <a href="#"></a>
</div>

CSS樣式

.search input {
   flex: 1;
   border: 0;
   background-color: transparent;
   /* 去掉表單控件的焦點(diǎn)框 */
   outline: none;
}

/* ::placeholder 選中就是 placeholder 屬性文字樣式*/
.search input::placeholder {
  font-size: 14px;
  color: #999;
}

/* 父級(jí)是flex布局，子級(jí)變彈性盒子：加寬高生效 */
.search a {
  align-self: center;
  width: 16px;
  height: 16px;
  background-image: url(../images/search.png);
}

09-header區(qū)域-用戶區(qū)域

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-JCnwxMKR-1691944062630)(assets/1680337703358.png)]

HTML結(jié)構(gòu)

<div class="user">
  <a href="#">
    <img src="./uploads/user.png" alt="">
    <span>播仔學(xué)前端</span>
  </a>
</div>

CSS樣式

/* 用戶 */
.user {
  margin-left: 32px;
  margin-top: 4px;
}

.user img {
  margin-right: 7px;
  /* vertical-align 行內(nèi)塊和行內(nèi)垂直方向?qū)R方式 */
  vertical-align: middle;
}

.user span {
  font-size: 16px;
  color: #666;
}

10-banner區(qū)域-布局

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-HPfFddtG-1691944062630)(assets/1680337778559.png)]

HTML結(jié)構(gòu)

<div class="banner">
  <div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>

CSS樣式

/* banner 區(qū)域 */
.banner {
  height: 420px;
  background-color: #0092cb;
}

.banner .wrapper {
  display: flex;
  justify-content: space-between;
  height: 420px;
  background-image: url(../uploads/banner.png);
}

11-banner區(qū)域-側(cè)導(dǎo)航

HTML結(jié)構(gòu)

<div class="left">
  <ul>
    <li><a href="#">前端開(kāi)發(fā)</a></li>
    <li><a href="#">后端開(kāi)發(fā)</a></li>
    <li><a href="#">移動(dòng)開(kāi)發(fā)</a></li>
    <li><a href="#">人工智能</a></li>
    <li><a href="#">商業(yè)預(yù)測(cè)</a></li>
    <li><a href="#">云計(jì)算&大數(shù)據(jù)</a></li>
    <li><a href="#">運(yùn)維&測(cè)試</a></li>
    <li><a href="#">UI設(shè)計(jì)</a></li>
    <li><a href="#">產(chǎn)品</a></li>
  </ul>
</div>

CSS樣式

/* 側(cè)導(dǎo)航 */
.banner .left {
  padding: 3px 20px;
  width: 191px;
  height: 420px;
  background-color: rgba(0,0,0,0.42);
}

.banner .left a {
  /* 塊級(jí)：寬度是父級(jí)的100% */
  display: block;
  height: 46px;
  background: url(../images/right.png) no-repeat right center;
  line-height: 46px;
  font-size: 16px;
  color: #fff;
}

.banner .left a:hover {
  background-image: url(../images/right-hover.png);
  color: #00a4ff;
}

12-banner區(qū)域-課程表布局

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-1EmP2FAs-1691944062631)(assets/1680338145736.png)]

HTML布局

<div class="right">
  <h3>我的課程表</h3>
  <div class="content">1</div>
</div>

CSS樣式

/* 課程表 */
.banner .right {
  margin-top: 60px;
  width: 218px;
  height: 305px;
  background-color: #209dd5;
  border-radius: 10px;
}

.banner .right h3 {
  margin-left: 14px;
  height: 48px;
  line-height: 48px;
  font-size: 15px;
  color: #fff;
  font-weight: 400;
}

.banner .right .content {
  padding: 14px;
  height: 257px;
  background-color: #fff;
  border-radius: 10px;
}

13-banner區(qū)域-課程表內(nèi)容

HTML結(jié)構(gòu)

<dl>
  <dt>數(shù)據(jù)可視化課程</dt>
  <dd><span>正在學(xué)習(xí)</span>-<strong>echarts使用步驟</strong></dd>
</dl>
<dl>
  <dt>Vue3醫(yī)療項(xiàng)目課程  </dt>
  <dd><span>正在學(xué)習(xí)</span>-<strong>認(rèn)識(shí)組合式API</strong></dd>
</dl>
<dl>
  <dt>React核心技術(shù)課程</dt>
  <dd><span>正在學(xué)習(xí)</span>-<strong>rudex配合TS使用</strong></dd>
</dl>

CSS樣式

.banner .right dl {
  margin-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.banner .right dt {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.banner .right dd {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
}

.banner .right dd span {
  color: #00a4ff;
}

.banner .right dd strong {
  color: #7d7d7d;
  font-weight: 400;
}

14-banner區(qū)域-全部課程

HTML結(jié)構(gòu)

<a href="#">全部課程</a>

CSS樣式

.banner .right a {
  display: block;
  height: 32px;
  background-color: #00a4ff;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #fff;
  border-radius: 15px;
}

15-精品推薦-區(qū)域布局

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-CZZDeYtZ-1691944062631)(assets/1680338252106.png)]

HTML結(jié)構(gòu)

<!-- 精品推薦 -->
<div class="recommend wrapper">
  <h3>精品推薦</h3>
  <ul>
    <li><a href="#">HTML</a></li>
  </ul>
  <a href="#" class="modify">修改興趣</a>
</div

CSS樣式

/* 精品推薦 */
.recommend {
  display: flex;
  margin-top: 11px;
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
  line-height: 60px;
}

16-精品推薦-內(nèi)容樣式

HTML結(jié)構(gòu)

<ul>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">Node.js</a></li>
  <li><a href="#">Ajax</a></li>
  <li><a href="#">Vue2.0</a></li>
  <li><a href="#">Vue3.0</a></li>
  <li><a href="#">TypeScript</a></li>
  <li><a href="#">React</a></li>
</ul>

CSS樣式

.recommend h3 {
  font-size: 18px;
  color: #00a4ff;
  font-weight: 400;
}

.recommend ul {
  /* 除去標(biāo)題和修改興趣的尺寸，父級(jí)剩余尺寸都給ul，實(shí)現(xiàn)把修改興趣擠到最右側(cè) */
  flex: 1;
  display: flex;
}

.recommend ul li a {
  padding: 0 24px;
  border-right: 1px solid #e0e0e0;
  font-size: 18px;
}

.recommend ul li:last-child a {
  border-right: 0;
}

.recommend .modify {
  font-size: 16px;
  color: #00a4ff;
}

17-推薦課程-標(biāo)題區(qū)域

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-EWmEHcbE-1691944062632)(assets/1680338517515.png)]

HTML結(jié)構(gòu)

<!-- 精品推薦課程 -->
<div class="course wrapper">
  <!-- 標(biāo)題 -->
  <div class="hd">
    <h3>精品推薦</h3>
    <a href="#" class="more">查看全部</a>
  </div>
  <!-- 內(nèi)容 -->
  <div class="bd">1</div>
</div>

CSS樣式

/* 推薦課程 */
.course {
  margin-top: 15px;
}

/* 標(biāo)題 - 公共類，與其他區(qū)域共用 */
.hd {
  display: flex;
  justify-content: space-between;
  height: 60px;
  line-height: 60px;
}

.hd h3 {
  font-size: 21px;
  font-weight: 400;
}

.hd .more {
  padding-right: 20px;
  background: url(../images/more.png) no-repeat right center;
  font-size: 14px;
  color: #999;
}

18-推薦課程-內(nèi)容布局

HTML結(jié)構(gòu)

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

CSS樣式

/* 課程內(nèi)容 - 公共類 */
.bd ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.bd li {
  margin-bottom: 14px;
  width: 228px;
  height: 271px;
  background-color: pink;
}

19-推薦課程-內(nèi)容樣式

HTML結(jié)構(gòu)

<ul>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course01.png" alt=""></div>
      <div class="text">
        <h4>JavaScript數(shù)據(jù)看板項(xiàng)目實(shí)戰(zhàn)</h4>
        <p><span>高級(jí)</span> · <i>1125</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course02.png" alt=""></div>
      <div class="text">
        <h4>Vue.js實(shí)戰(zhàn)——面經(jīng)全端項(xiàng)目</h4>
        <p><span>高級(jí)</span> · <i>2726</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course03.png" alt=""></div>
      <div class="text">
        <h4>玩轉(zhuǎn)Vue全家桶，iHRM人力資源項(xiàng)目</h4>
        <p><span>高級(jí)</span> · <i>9456</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course04.png" alt=""></div>
      <div class="text">
        <h4>Vue.js實(shí)戰(zhàn)醫(yī)療項(xiàng)目——優(yōu)醫(yī)問(wèn)診</h4>
        <p><span>高級(jí)</span> · <i>7192</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course05.png" alt=""></div>
      <div class="text">
        <h4>小程序?qū)崙?zhàn)：小兔鮮電商小程序項(xiàng)目</h4>
        <p><span>高級(jí)</span> · <i>2703</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course06.png" alt=""></div>
      <div class="text">
        <h4>前端框架Flutter開(kāi)發(fā)實(shí)戰(zhàn)</h4>
        <p><span>高級(jí)</span> · <i>2841</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course07.png" alt=""></div>
      <div class="text">
        <h4>熟練使用React.js——極客園H5項(xiàng)目</h4>
        <p><span>高級(jí)</span> · <i>95682</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course08.png" alt=""></div>
      <div class="text">
        <h4>熟練使用React.js——極客園PC端項(xiàng)目</h4>
        <p><span>高級(jí)</span> · <i>904</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course09.png" alt=""></div>
      <div class="text">
        <h4>前端實(shí)用技術(shù)，F(xiàn)etch API 實(shí)戰(zhàn)</h4>
        <p><span>高級(jí)</span> · <i>1516</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="pic"><img src="./uploads/course10.png" alt=""></div>
      <div class="text">
        <h4>前端高級(jí)Node.js零基礎(chǔ)入門(mén)教程</h4>
        <p><span>高級(jí)</span> · <i>2766</i>人在學(xué)習(xí)</p>
      </div>
    </a>
  </li>
</ul>

CSS樣式

.bd li .pic {
  height: 156px;
}

.bd li .text {
  padding: 20px;
  height: 115px;
  background-color: #fff;
}

.bd li .text h4 {
  margin-bottom: 13px;
  height: 40px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.bd li .text p {
  font-size: 14px;
  line-height: 20px;
  color: #999;
}

.bd li .text p span {
  color: #fa6400;
}

.bd li .text p i {
  font-style: normal;
}

20-前端開(kāi)發(fā)工程師區(qū)域

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-fUaMPcnm-1691944062633)(assets/1680339112336.png)]

HTML結(jié)構(gòu)

<!-- 前端 -->
<div class="wrapper">
  <!-- 標(biāo)題 -->
  <div class="hd">
    <h3>前端開(kāi)發(fā)工程師</h3>
    <ul>
      <li><a href="#" class="active">熱門(mén)</a></li>
      <li><a href="#">初級(jí)</a></li>
      <li><a href="#">中級(jí)</a></li>
      <li><a href="#">高級(jí)</a></li>
    </ul>
    <a href="#" class="more">查看全部</a>
  </div>
  <div class="bd">
    <div class="left">
      <img src="./uploads/web_left.png" alt="">
    </div>
    <div class="right">
      <div class="top"><img src="./uploads/web_top.png" alt=""></div>
      <div class="bottom">
        <ul>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/web01.png" alt=""></div>
              <div class="text">
                <h4>JS高級(jí)javaScript進(jìn)階面向?qū)ο驟S6</h4>
                <p><span>高級(jí)</span> · <i>101937</i>人在學(xué)習(xí)</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/web02.png" alt=""></div>
              <div class="text">
                <h4>零基礎(chǔ)玩轉(zhuǎn)微信小程序</h4>
                <p><span>高級(jí)</span> · <i>133781</i>人在學(xué)習(xí)</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/web03.png" alt=""></div>
              <div class="text">
                <h4>JavaScript基礎(chǔ)——語(yǔ)法解析+項(xiàng)目實(shí)戰(zhàn)</h4>
                <p><span>高級(jí)</span> · <i>8927</i>人在學(xué)習(xí)</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/web04.png" alt=""></div>
              <div class="text">
                <h4>前端框架Vue2+Vue3全套視頻</h4>
                <p><span>高級(jí)</span> · <i>26022</i>人在學(xué)習(xí)</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS樣式

/* 前端 */
.hd ul {
  display: flex;
}

.hd li {
  margin-right: 60px;
  font-size: 16px;
}

.hd li .active {
  color: #00a4ff;
}

.bd {
  display: flex;
  justify-content: space-between;
}

.bd .left {
  width: 228px;
  /* background-color: pink; */
}

.bd .right {
  width: 957px;
  /* background-color: pink; */
}

.bd .right .top {
  margin-bottom: 15px;
  height: 100px;
}

21-版權(quán)-布局

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-lg1rvMmI-1691944062633)(assets/1680339154682.png)]文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-648736.html

HTML結(jié)構(gòu)

<!-- 版權(quán) -->
<div class="footer">
  <div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>

CSS樣式

/* 版權(quán) */
.footer {
  margin-top: 60px;
  padding-top: 60px;
  height: 273px;
  background-color: #fff;
}

.footer .wrapper {
  display: flex;
  justify-content: space-between;
}

.footer .left {
  width: 440px;
  background-color: pink;
}

22-版權(quán)-內(nèi)容

HTML結(jié)構(gòu)

<div class="left">
  <a href="#"><img src="./images/logo.png" alt=""></a>
  <p>學(xué)成在線致力于普及中國(guó)最好的教育它與中國(guó)一流大學(xué)和機(jī)構(gòu)合作提供在線課程。
    ? 2017年XTCG Inc.保留所有權(quán)利。-滬ICP備15025210號(hào)</p>
  <a href="#" class="download">下載APP</a>
</div>
<div class="right">
  <dl>
    <dt>關(guān)于學(xué)成網(wǎng)</dt>
    <dd><a href="#">關(guān)于</a></dd>
    <dd><a href="#">管理團(tuán)隊(duì)</a></dd>
    <dd><a href="#">工作機(jī)會(huì)</a></dd>
    <dd><a href="#">客戶服務(wù)</a></dd>
    <dd><a href="#">幫助</a></dd>
  </dl>
  <dl>
    <dt>新手指南</dt>
    <dd><a href="#">如何注冊(cè)</a></dd>
    <dd><a href="#">如何選課</a></dd>
    <dd><a href="#">如何拿到畢業(yè)證</a></dd>
    <dd><a href="#">學(xué)分是什么</a></dd>
    <dd><a href="#">考試未通過(guò)怎么辦</a></dd>
  </dl>
  <dl>
    <dt>合作伙伴</dt>
    <dd><a href="#">合作機(jī)構(gòu)</a></dd>
    <dd><a href="#">合作導(dǎo)師</a></dd>
  </dl>
</div>

CSS樣式

.footer .left p {
  margin-top: 24px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 17px;
  color: #666;
}

.footer .left .download {
  display: block;
  width: 120px;
  height: 36px;
  border: 1px solid #00a4ff;
  text-align: center;
  line-height: 34px;
  font-size: 16px;
  color: #00a4ff;
}

.footer .right {
  display: flex;
}

.footer .right dl {
  margin-left: 130px;
}

.footer .right dt {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 23px;
}

.footer .right a {
  font-size: 14px;
  color: #666;
  line-height: 24px;
}

到了這里，關(guān)于前端學(xué)成在線的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

2.0-學(xué)成在線內(nèi)容管理
1.1 業(yè)務(wù)流程內(nèi)容管理的業(yè)務(wù)由教學(xué)機(jī)構(gòu)人員和平臺(tái)的運(yùn)營(yíng)人員共同完成。教學(xué)機(jī)構(gòu)人員的業(yè)務(wù)流程如下： 1、登錄教學(xué)機(jī)構(gòu)。 2、維護(hù)課程信息，添加一門(mén)課程需要編輯課程的基本信息、上傳課程圖片、課程營(yíng)銷(xiāo)信息、課程計(jì)劃、上傳課程視頻、課程師資信息等內(nèi)容。 3、課
2024年01月20日
瀏覽(20)
學(xué)成在線項(xiàng)目note
目錄一、index.html 1、頭部header 2、輪播圖banner 3、精品推薦 4、精品推薦課程 ?5、footer 二、index.css 1、重要的代碼 !-- 網(wǎng)站的首頁(yè), 所有網(wǎng)站的首頁(yè)都叫index.html, 因?yàn)榉?wù)器找首頁(yè)都是找index.html -- ?!-- 布局: 從外到內(nèi), 從上到下, 從左到右 -- ?link rel=\\\"stylesheet\\\" href=\\\"./css/index.css
2024年02月07日
瀏覽(26)
學(xué)成在線----day8
為了提高網(wǎng)站的速度需要將課程信息進(jìn)行緩存，并且要將課程信息加入索引庫(kù)方便搜索，下圖顯示了課程發(fā)布后課程信息的流轉(zhuǎn)情況： 1、向內(nèi)容管理數(shù)據(jù)庫(kù)的課程發(fā)布表存儲(chǔ)課程發(fā)布信息，更新課程基本信息表中發(fā)布狀態(tài)為已發(fā)布。 2、向Redis存儲(chǔ)課程緩存信息。 3、向Elas
2024年02月11日
瀏覽(17)
案例：學(xué)成在線案例（html+css）
典型的企業(yè)級(jí)網(wǎng)站目的是為了整體感知企業(yè)級(jí)網(wǎng)站布局流程，復(fù)習(xí)以前知識(shí)。學(xué)成在線PSD源文件開(kāi)發(fā)工具=PS（切圖）/cutterman插件+vscode（代碼）+chrome(測(cè)試）我們本次采取結(jié)構(gòu)和樣式相分離思想：創(chuàng)建study目錄文件夾（用于存放我們這個(gè)頁(yè)面的相關(guān)內(nèi)容）用vscode打開(kāi)這個(gè)目
2024年02月04日
瀏覽(14)
微服務(wù)實(shí)戰(zhàn)項(xiàng)目-學(xué)成在線-項(xiàng)目部署
一個(gè)軟件的生命周期包括：需求分析階、設(shè)計(jì)、開(kāi)發(fā)、測(cè)試、上線、維護(hù)、升級(jí)、廢棄。通過(guò)示例說(shuō)明如下： 1、產(chǎn)品人員進(jìn)行需求分析 2、設(shè)計(jì)人員進(jìn)行軟件架構(gòu)設(shè)計(jì)和模塊設(shè)計(jì)。 3、每個(gè)模塊的開(kāi)發(fā)人員并行開(kāi)發(fā)，設(shè)計(jì)接口、進(jìn)行編碼，并進(jìn)行單元測(cè)試 4、開(kāi)發(fā)完畢，將代
2024年02月13日
瀏覽(19)
學(xué)成在線項(xiàng)目開(kāi)發(fā)技巧整理---第一部分
視頻項(xiàng)目鏈接: 學(xué)成在線整理的是我個(gè)人認(rèn)為偏生疏的知識(shí)點(diǎn),不一定涉及的全面。在系統(tǒng)中某些選項(xiàng)是幾個(gè)特定的值的一個(gè)或多個(gè)，并且隨著還可以動(dòng)態(tài)添加。比如支付方式，配送方式等。此時(shí)我們應(yīng)該設(shè)計(jì)一個(gè)數(shù)據(jù)字典模塊，在后臺(tái)進(jìn)行管理，然后前臺(tái)要從后端查詢。并
2023年04月22日
瀏覽(33)
微服務(wù)實(shí)戰(zhàn)項(xiàng)目-學(xué)成在線-項(xiàng)目?jī)?yōu)化(redis緩存優(yōu)化)
視頻播放頁(yè)面用戶未登錄也可以訪問(wèn)，當(dāng)用戶觀看試學(xué)課程時(shí)需要請(qǐng)求服務(wù)端查詢數(shù)據(jù)，接口如下： 1、根據(jù)課程id查詢課程信息。 2、根據(jù)文件id查詢視頻信息。這些接口在用戶未認(rèn)證狀態(tài)下也可以訪問(wèn)，如果接口的性能不高，當(dāng)高并發(fā)到來(lái)很可能耗盡整個(gè)系統(tǒng)的資源，將整
2024年02月12日
瀏覽(24)
微服務(wù)實(shí)戰(zhàn)項(xiàng)目-學(xué)成在線-內(nèi)容管理模塊(有項(xiàng)目實(shí)戰(zhàn)實(shí)現(xiàn))
1.1 什么是需求分析在百度百科中對(duì)需求分析的定義如下：需求分析也稱為軟件需求分析、系統(tǒng)需求分析或需求分析工程等，是開(kāi)發(fā)人員經(jīng)過(guò)深入細(xì)致的調(diào)研和分析，準(zhǔn)確理解用戶和項(xiàng)目的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉(zhuǎn)化為完整的需求定義，從
2024年02月13日
瀏覽(32)
微服務(wù)實(shí)戰(zhàn)項(xiàng)目-學(xué)成在線-媒資管理模塊(有項(xiàng)目實(shí)戰(zhàn)實(shí)現(xiàn))
1.1 模塊介紹媒資管理系統(tǒng)是每個(gè)在線教育平臺(tái)所必須具備的，查閱百度百科對(duì)它的定義如下：媒體資源管理(Media Asset Management，MAM)系統(tǒng)是建立在多媒體、網(wǎng)絡(luò)、數(shù)據(jù)庫(kù)和數(shù)字存儲(chǔ)等先進(jìn)技術(shù)基礎(chǔ)上的一個(gè)對(duì)各種媒體及內(nèi)容(如視/音頻資料、文本文件、圖表等)進(jìn)行數(shù)字化存儲(chǔ)
2024年02月11日
瀏覽(22)
學(xué)成在線第一天-課程內(nèi)容管理服務(wù)搭建以及查詢課程接口設(shè)計(jì)
目錄一、搭建課程內(nèi)容管理服務(wù) 二、設(shè)計(jì)接口三、面試題四、總結(jié) 沒(méi)什么好說(shuō)的，直接就是創(chuàng)建內(nèi)容模塊然后這個(gè)繼承父模塊，然后再課程內(nèi)容模塊下面創(chuàng)建三個(gè)子模塊，model、sevice、controller? model依賴base、service依賴model、controller依賴service 接口設(shè)計(jì)要考慮接口要考慮兩
2024年02月08日
瀏覽(31)