首页 > 文章 > 前端

如何使用HTML、CSS和jQuery创建一个动态的文本编辑器

时间：2023-10-25 11:36:44 394浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《如何使用HTML、CSS和jQuery创建一个动态的文本编辑器》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

在当前的数字化时代，文本编辑器是我们日常生活和工作中必不可少的工具之一。无论是写作文章、编写代码还是记录笔记，一个好用的文本编辑器能够大大提高我们的效率和舒适度。本文将介绍如何使用HTML、CSS和jQuery创建一个动态的文本编辑器，并且提供一些具体的代码示例供大家参考。

HTML 结构

首先，我们需要创建一个基本的HTML结构。以下是一个简单的HTML框架，可以用作文本编辑器的容器：



  
    动态文本编辑器

在这个HTML结构中，我们使用了一个

元素作为文本编辑器的容器，其中包含了一个

</code>元素用于用户输入文本。同时，我们为这个<code><div></code>元素设置了一个id为"editor"，用于后续的CSS样式和jQuery操作。</p><ol start="2"><li>CSS 样式</li></ol><p>接下来，我们需要添加一些CSS样式，以美化我们的文本编辑器。以下是一个基本的CSS样式示例：</p><pre class="brush:css;toolbar:false;">#editor {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
}

textarea {
  width: 100%;
  height: 100%;
  padding: 5px;
  font-size: 14px;
  border: none;
  outline: none;
  resize: none;
}</pre><p>在这个CSS样式中，我们为文本编辑器的容器和输入框设置了一些基本的样式，包括宽度、高度、边框、背景颜色等。你也可以根据自己的需要进行自定义。</p><ol start="3"><li>jQuery 操作</li></ol><p>最后，我们需要使用jQuery来实现一些动态效果和功能。以下是一个简单的jQuery操作示例：</p><pre class="brush:javascript;toolbar:false;">$(document).ready(function() {
  // 当文本输入框中的内容发生变化时
  $('#textArea').on('input', function() {
    var text = $(this).val(); // 获取文本输入框的内容
    $('#editor').prepend('<p>' + text + '</p>'); // 在编辑器中添加一行文本
  });
});</pre><p>在这个jQuery操作中，我们使用了<code>$(document).ready()</code>来确保页面加载完成后再执行我们的操作。当文本输入框中的内容发生变化时，我们使用<code>$('#textArea').on('input', function() { ... })</code>函数来监听输入框的输入事件。在事件处理函数中，我们通过<code>$(this).val()</code>获取输入框的内容，并使用<code>$('#editor').prepend('<p>' + text + '</p>')</code>将输入框的内容添加为一行文本到编辑器中。</p><p>通过以上的HTML结构、CSS样式和jQuery操作，我们可以创建一个简单的动态文本编辑器。当用户在输入框中输入内容时，输入的内容会被实时地添加到文本编辑器中。</p><p>当然，上述示例只是一个基本的实现，你可以根据自己的需求进行扩展和修改，添加更多的功能和样式，比如保存文本、插入图片等等。</p><p>总结</p><p>本文介绍了如何使用HTML、CSS和jQuery创建一个动态的文本编辑器，并提供了一些具体的代码示例供大家参考。希望这篇文章对你理解和使用HTML、CSS和jQuery有所帮助，可以帮助你创建出一个功能强大且美观的文本编辑器。</p><p>文中关于html,CSS,jQuery的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何使用HTML、CSS和jQuery创建一个动态的文本编辑器》文章吧，也可关注golang学习网公众号了解相关技术文章。</p>      </div>
        <div class="labsList">
                        <a href="javascript:;"  class="aLightGray" title="html">html</a>
                        <a href="javascript:;"  class="aLightGray" title="CSS">CSS</a>
                        <a href="javascript:;"  class="aLightGray" title="jQuery">jQuery</a>
                    </div>
          </div>

         <!-- 最新阅读 -->
     <div class="contBoxNor">
      <div class="contTit">
        <div class="tit">相关阅读</div>
        <a href="/articlelist.html" class="more">更多></a>
      </div>
      <ul class="latestReadList">
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="CSS">CSS</a>
                                                 <a href="javascript:;" class="aLightGray" title="优化">优化</a>
                                                 <a href="javascript:;" class="aLightGray" title="体验">体验</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/72840.html"  title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘" class="aBlack">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="72840" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="图片轮播">图片轮播</a>
                                                 <a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a>
                                                 <a href="javascript:;" class="aLightGray" title="特效">特效</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/76259.html"  title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="76259" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="sessionStorage">sessionStorage</a>
                                                 <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a>
                                                 <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/83771.html"  title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="83771" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="团队合作">团队合作</a>
                                                 <a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a>
                                                 <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/85057.html"  title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="85057" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
            </div>
          <div class="tit lineOverflow"><a href="/article/91359.html"  title="UI设计中为何选择绝对定位的智慧之道" class="aBlack">UI设计中为何选择绝对定位的智慧之道</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="91359" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
              </ul>
    </div>
         <!-- 最新阅读 -->
      <div class="contBoxNor">
          <div class="contTit">
              <div class="tit">最新阅读</div>
              <a href="/articlelist.html" class="more">更多></a>
          </div>
          <ul class="latestReadList">
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  3分钟前  |  
                                            <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a>
                                            <a href="javascript:;" class="aLightGray" title="Matter.js">Matter.js</a>
                                            <a href="javascript:;" class="aLightGray" title="碰撞检测">碰撞检测</a>
                                            <a href="javascript:;" class="aLightGray" title="p2.js">p2.js</a>
                                            <a href="javascript:;" class="aLightGray" title="JavaScript物理引擎">JavaScript物理引擎</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205710.html"  title="JavaScript物理引擎使用攻略及技巧" class="aBlack">JavaScript物理引擎使用攻略及技巧</a></div>
                  <div class="opt">
                      <span><i class="view"></i>470</span>
                      <span class="collectBtn user_collection" data-id="205710" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  9分钟前  |  
                                            <a href="javascript:;" class="aLightGray" title="正则表达式">正则表达式</a>
                                            <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a>
                                            <a href="javascript:;" class="aLightGray" title="String.match()">String.match()</a>
                                            <a href="javascript:;" class="aLightGray" title="null处理">null处理</a>
                                            <a href="javascript:;" class="aLightGray" title="URL提取">URL提取</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205708.html"  title="JavaScript提取子串的巧妙技巧" class="aBlack">JavaScript提取子串的巧妙技巧</a></div>
                  <div class="opt">
                      <span><i class="view"></i>273</span>
                      <span class="collectBtn user_collection" data-id="205708" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  23分钟前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205703.html"  title="JavaScript中setTimeout()使用技巧与示例" class="aBlack">JavaScript中setTimeout()使用技巧与示例</a></div>
                  <div class="opt">
                      <span><i class="view"></i>465</span>
                      <span class="collectBtn user_collection" data-id="205703" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  58分钟前  |  
                                            <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a>
                                            <a href="javascript:;" class="aLightGray" title="错误处理">错误处理</a>
                                            <a href="javascript:;" class="aLightGray" title="代码可读性">代码可读性</a>
                                            <a href="javascript:;" class="aLightGray" title="isLeapYear">isLeapYear</a>
                                            <a href="javascript:;" class="aLightGray" title="闰年">闰年</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205692.html"  title="JS检测闰年方法与代码示例" class="aBlack">JS检测闰年方法与代码示例</a></div>
                  <div class="opt">
                      <span><i class="view"></i>308</span>
                      <span class="collectBtn user_collection" data-id="205692" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205682.html"  title="JavaScriptArray.sort()方法使用攻略" class="aBlack">JavaScriptArray.sort()方法使用攻略</a></div>
                  <div class="opt">
                      <span><i class="view"></i>194</span>
                      <span class="collectBtn user_collection" data-id="205682" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1小时前  |  
                                            <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a>
                                            <a href="javascript:;" class="aLightGray" title="用户隐私">用户隐私</a>
                                            <a href="javascript:;" class="aLightGray" title="GeolocationAPI">GeolocationAPI</a>
                                            <a href="javascript:;" class="aLightGray" title="navigator.geolocation.getCurrentPosition">navigator.geolocation.getCurrentPosition</a>
                                            <a href="javascript:;" class="aLightGray" title="位置准确性">位置准确性</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205678.html"  title="JavaScript获取用户地理位置详细教程" class="aBlack">JavaScript获取用户地理位置详细教程</a></div>
                  <div class="opt">
                      <span><i class="view"></i>217</span>
                      <span class="collectBtn user_collection" data-id="205678" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1小时前  |  
                                            <a href="javascript:;" class="aLightGray" title="自定义函数">自定义函数</a>
                                            <a href="javascript:;" class="aLightGray" title="特殊类型">特殊类型</a>
                                            <a href="javascript:;" class="aLightGray" title="数组相等">数组相等</a>
                                            <a href="javascript:;" class="aLightGray" title="递归深度比较">递归深度比较</a>
                                            <a href="javascript:;" class="aLightGray" title="NaN处理">NaN处理</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205674.html"  title="JavaScript判断两个数组是否相等的妙招" class="aBlack">JavaScript判断两个数组是否相等的妙招</a></div>
                  <div class="opt">
                      <span><i class="view"></i>454</span>
                      <span class="collectBtn user_collection" data-id="205674" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205671.html"  title="JavaScript如何查询Firebase数据库？" class="aBlack">JavaScript如何查询Firebase数据库？</a></div>
                  <div class="opt">
                      <span><i class="view"></i>412</span>
                      <span class="collectBtn user_collection" data-id="205671" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  2小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205670.html"  title="Promise.all()在JavaScript中的妙用技巧" class="aBlack">Promise.all()在JavaScript中的妙用技巧</a></div>
                  <div class="opt">
                      <span><i class="view"></i>239</span>
                      <span class="collectBtn user_collection" data-id="205670" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  2小时前  |  
                                            <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a>
                                            <a href="javascript:;" class="aLightGray" title="jQuery">jQuery</a>
                                            <a href="javascript:;" class="aLightGray" title="正则表达式">正则表达式</a>
                                            <a href="javascript:;" class="aLightGray" title="URL参数">URL参数</a>
                                            <a href="javascript:;" class="aLightGray" title="URLSearchParams">URLSearchParams</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205667.html"  title="JavaScript获取URL参数的绝妙技巧" class="aBlack">JavaScript获取URL参数的绝妙技巧</a></div>
                  <div class="opt">
                      <span><i class="view"></i>147</span>
                      <span class="collectBtn user_collection" data-id="205667" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  2小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205659.html"  title="Vue.js性能优化技巧与实用方法" class="aBlack">Vue.js性能优化技巧与实用方法</a></div>
                  <div class="opt">
                      <span><i class="view"></i>280</span>
                      <span class="collectBtn user_collection" data-id="205659" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  3小时前  |  
                                            <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a>
                                            <a href="javascript:;" class="aLightGray" title="用户体验">用户体验</a>
                                            <a href="javascript:;" class="aLightGray" title="requestAnimationFrame">requestAnimationFrame</a>
                                            <a href="javascript:;" class="aLightGray" title="CSStransform">CSStransform</a>
                                            <a href="javascript:;" class="aLightGray" title="贝塞尔曲线">贝塞尔曲线</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/205655.html"  title="JavaScript动画效果实现技巧大全" class="aBlack">JavaScript动画效果实现技巧大全</a></div>
                  <div class="opt">
                      <span><i class="view"></i>420</span>
                      <span class="collectBtn user_collection" data-id="205655" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                        </ul>
      </div>
    <!-- 课程推荐 -->
    <div class="contBoxNor">
      <div class="contTit">
        <div class="tit">课程推荐</div>
        <a href="/courselist.html" class="more">更多></a>
      </div>
      <ul class="classRecomList">
                <li>
          <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box">
            <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式">
                      </a>
          <dl>
            <dt class="lineOverflow">
              前端进阶之JavaScript设计模式            </dt>
            <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd>
            <dd class="cont2">
              <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a>
              <span>542次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/2.html" title="GO语言核心编程课程" class="img_box">
            <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程">
                      </a>
          <dl>
            <dt class="lineOverflow">
              GO语言核心编程课程            </dt>
            <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd>
            <dd class="cont2">
              <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a>
              <span>508次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box">
            <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信">
                      </a>
          <dl>
            <dt class="lineOverflow">
              简单聊聊mysql8与网络通信            </dt>
            <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd>
            <dd class="cont2">
              <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a>
              <span>497次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box">
            <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战">
                      </a>
          <dl>
            <dt class="lineOverflow">
              JavaScript正则表达式基础与实战            </dt>
            <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd>
            <dd class="cont2">
              <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a>
              <span>487次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box">
            <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局">
                      </a>
          <dl>
            <dt class="lineOverflow">
              从零制作响应式网站—Grid布局            </dt>
            <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd>
            <dd class="cont2">
              <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a>
              <span>484次学习</span>
            </dd>
          </dl>
        </li>
              </ul>
    </div>
        </div>
  <!-- footer -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="footer">
    <ul>
      <li  ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li>
      <li  class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li>
      <li  ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li>
      <li  ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li>
      <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li>
    </ul>
  </div>
  <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>