学成在线项目代码(仅有代码讲解模块)

最新推荐文章于 2024-06-12 19:09:44 发布

screamn

最新推荐文章于 2024-06-12 19:09:44 发布

阅读量816

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/screamn/article/details/133966225

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这一部分包括了一个logo，即一个img元素，用于显示网站的标志。导航栏部分由一个ul元素和三个li元素组成，每个li元素包含一个a元素，通过点击这些链接，可以跳转到不同的页面。搜索框部分包含一个输入框(input)和一个按钮(button)，让用户输入关键字进行搜索。最后，该部分还包含了一个用户信息(user)的部分，其中包含了一个img元素和一个span元素，用于显示用户头像和用户名。

<div class="header width">
        <div class="logo">
            <img src="images/logo_03.jpg" alt="logo">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="input">
            <input type="text" value="输入关键字">
            <button></button>
        </div>
        <div class="user">
            <img src="img/user.png" alt="user_photo">
            <span>user</span>
        </div>
    </div>

这段代码是一个网页的结构和样式部分，我会逐行为你进行解释。

首先，代码定义了一个div元素，它的class属性被设置为"banner"，用于表示这个div是一个横幅的区域。

在div内部，又包含了一个div元素，class属性为"contain width"。这个div代表一个容器，其宽度被限制为一定的大小。

在这个容器内部，又包含了两个div元素。第一个div的class属性为"subnav"，可能表示子导航的意思。在这个div内部，有一个ul元素，id属性为"nav"，表示一个无序列表。在ul元素内部，有多个li元素，每个li元素都包含一个a元素，用于显示导航栏的链接。这些链接中显示的文本为"导航栏"，并且每个链接后面有一个span元素，其中包含一个大于号(>)的符号。

第二个div的class属性为"cless"，可能表示课程的意思。在这个div内部，有两个子div元素。第一个子div的class属性为"id1"，可能是一个标识符，它内部包含一个h2元素，用于显示标题"我的课程表"。第二个子div的class属性为"bd"，可能是"body"的缩写，它内部包含一个ul元素，用于显示课程列表。ul元素内部包含多个li元素，每个li元素都包含一个h3元素，用于显示课程的标题，以及一个a元素，用于显示上次学习到的课程。

在课程列表的末尾，有一个特殊的li元素，它的样式被设置为边框为蓝色、文本居中。在这个li元素内部，有一个a元素，样式中设置了字体大小、字体粗细和颜色，用于显示"全部课程"的链接。

 <div class="banner">
        <div class="contain width">
            <div class="subnav">
                <ul id="nav">
                    <li><a href="#">导航栏 <span>&gt</span></a></li>
                    <li><a href="#">导航栏<span>&gt</span></a></li>
                    <li><a href="#">导航栏<span>&gt</span></a></li>
                    <li><a href="#">导航栏<span>&gt</span></a></li>
                    <li><a href="#">导航栏<span>&gt</span></a></li>
                    <li><a href="#">导航栏<span>&gt</span></a></li>
                    <li><a href="#">导航栏<span>&gt</span></a></li>
                    <li><a href="#">导航栏<span>&gt</span></a></li>
                    <li><a href="#">导航栏<span>&gt</span></a></li>
                </ul>
            </div>
            <div class="cless">
                <div class="id1">
                    <h2>我的课程表</h2>
                </div>
                <div class="bd">
                    <ul>
                        <li>
                            <h3>继续学习继续学习</h3>
                            <a href="#">上次看到了xxx课程</a>
                        </li>
                        <li>
                            <h3>继续学习</h3>
                            <a href="#">上次看到了xxx课程</a>
                        </li>
                        <li>
                            <h3>继续学习</h3>
                            <a href="#">上次看到了xxx课程</a>
                        </li>
                        <li style="border:2px solid blue ;text-align: center;">
                            <a href="#" style="font-size: 16px;font-weight: 400; color:black ;">
                                全部课程
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

页脚，我认为这个还是很简单实现的,大家可以先动手练一下。

首先，代码包含了三个div元素，它们都有class属性，用于设置样式。

第一个div的class属性为"footer"，表示这个div是页面底部的一个区域。

第二个div也具有"footer"的class属性，可能是用于显示底部的分割线。

第三个div的class属性为"footer1"，表示一个特定的底部区域。

在"footer1"这个div内部，包含了一个div元素，class属性为"footer1-center width"。这个div代表一个居中的容器，宽度被限制为一定的大小。

在这个容器内部，又包含了两个子div元素，分别是"footer-left"和"footer-right"。

"footer-left"这个div内部，包含了一个img元素，src属性指向一个图片文件，alt属性是图片的替代文本。紧接着是一个换行(br)标签，然后是一个具有".div"类的div元素，用于显示一段关于学成在线的介绍文字。最后是一个具有"div2"类的div元素，其中包含一个a元素，用于显示下载app的链接。

"footer-right"这个div内部，包含了三个子div元素，分别是"d1"、"d2"和"d3"。每个子div都有一个h2元素用于显示标题，然后是一些div元素，用于显示合作伙伴、新手指南和关于学成网的链接内容。

<div class="footer "></div>
    <div class="footer"></div>
    <div class="footer1">
        <div class="footer1-center width">
            <div class="footer-left">
                <img src="images/logo_03.png " alt="">
                <br>
                <div class=".div">学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</div>
                <div class="div2"><a>下载app</a></div>
            </div>
            <div class="footer-right">
                <div class="d1">
                    <h2 class="h2">合作伙伴</h2>
                    <div>合作机构</div>
                    <div>合作导师</div>
                </div>
                <div class="d2">
                    <h2 class="h2">新手指南</h2>
                    <div>如何注册</div>
                    <div>如何选课</div>
                    <div>如何拿到毕业证</div>
                    <div>学分是什么</div>
                    <div>考试未通过怎么办</div>
                </div>
                <div class="d3">
                    <h2 class="h2">关于学成网</h2>
                    <div>关于</div>
                    <div>管理团队</div>
                    <div>工作机会</div>
                    <div>客户服务</div>
                    <div>帮助</div>
                </div>
            </div>
        </div>
    </div>

中间内容

这是一个网页模板中的课程推荐部分，包含精品课程、数据分析师和人工智能等分类。其中精品课程展示了多个课程的图片、名称和学习人数等信息，并提供了查看全部的链接；数据分析师和人工智能则分别展示了一个大图和多个推荐课程，同样提供了查看全部的链接。此外，这个模板还使用了一些CSS样式来美化页面布局和字体，比如clearfix、width等。

<div id="jing" class="width clearfix">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Python</a></li>
            <li><a href="#">C++</a></li>
        </ul>
        <a href="" class="mod">修改兴趣</a>
    </div>

<div class="box width clearfix">
        <div class="box-head">
            <h3>
                精品课程
            </h3>
            <a href="#">
                查看全部
            </a>
        </div>
        <div class="box-bd">
            <ul>
                <li>
                    <em>
                        <img src="demo1/new.png" alt="new">
                    </em>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
                <li>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
                <li>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
                <li>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
                <li>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
                <li>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
                <li>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
                <li>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
                <li>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
                <li>
                    <img src="images/pro_07.jpg" alt="课程信息">
                    <h4>黑马程序员成就it黑马</h4>
                    <div class="info">
                        <span>高级</span>:11400人学习
                    </div>
                </li>
            </ul>
        </div>
        <!-- 数据分析师 -->
        <div class="data width ">
            <div class="data-header">
                <h3>数据分析师</h3>
                <div class="data-level clearfix">
                    <ul class=" clearfix">
                        <li style="margin-left:400px">热门</li>
                        <li>初级</li>
                        <li>中级</li>
                        <li>高级</li>
                    </ul>
                </div>
                <a class="data-a" href="#">查看全部</a>
            </div>
            <div class="data-foot">
                <div class="data-p1">
                    <div>
                        <span>PHP入门:</span>
                        <span>基础语法到实际应用</span>
                        <span class="small">零基础入门:语法与界</span>
                        <span class="small">进阶:网络与数据缓存</span>
                        <span class="small">进阶:网络与数据缓存</span>
                    </div>
                </div>
                <div class="data-p2">
                    <img src="img/b.png" alt="数据分析师上边python文件">
                </div>
                <div class="data-p3">
                    <ul>
                        <li>
                            <img src="images/pro_07.jpg" alt="课程信息">
                            <h4>黑马程序员成就it黑马</h4>
                            <div class="info">
                                <span>高级</span>:11400人学习
                            </div>
                        </li>
                        <li>
                            <img src="images/pro_07.jpg" alt="课程信息">
                            <h4>黑马程序员成就it黑马</h4>
                            <div class="info">
                                <span>高级</span>:11400人学习
                            </div>
                        </li>
                        <li>
                            <img src="images/pro_07.jpg" alt="课程信息">
                            <h4>黑马程序员成就it黑马</h4>
                            <div class="info">
                                <span>高级</span>:11400人学习
                            </div>
                        </li>
                        <li>
                            <img src="images/pro_07.jpg" alt="课程信息">
                            <h4>黑马程序员成就it黑马</h4>
                            <div class="info">
                                <span>高级</span>:11400人学习
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ren width clearfix">
            <div class="ren-header">
                <h3>数据分析师</h3>
                <div class="ren-level">
                    <ul>
                        <li style="margin-left:400px">热门</li>
                        <li>初级</li>
                        <li>中级</li>
                        <li>高级</li>
                    </ul>
                </div>
                <a class="ren-a" href="#">查看全部</a>
            </div>
            <div class="ren-foot">
                <div class="ren-p1">
                    <div>
                        <span>PHP入门:</span>
                        <span>基础语法到实际应用</span>
                        <span class="small">零基础入门:语法与界</span>
                        <span class="small">进阶:网络与数据缓存</span>
                        <span class="small">进阶:网络与数据缓存</span>
                    </div>
                </div>
                <div class="ren-p2">
                    <img src="demo1/pic1.png" alt="人工智能">
                </div>
                <div class="ren-p3">
                    <ul>
                        <li>
                            <img src="images/pro_07.jpg" alt="课程信息">
                            <h4>黑马程序员成就it黑马</h4>
                            <div class="info">
                                <span>高级</span>:11400人学习
                            </div>
                        </li>
                        <li>
                            <img src="images/pro_07.jpg" alt="课程信息">
                            <h4>黑马程序员成就it黑马</h4>
                            <div class="info">
                                <span>高级</span>:11400人学习
                            </div>
                        </li>
                        <li>
                            <img src="images/pro_07.jpg" alt="课程信息">
                            <h4>黑马程序员成就it黑马</h4>
                            <div class="info">
                                <span>高级</span>:11400人学习
                            </div>
                        </li>
                        <li>
                            <img src="images/pro_07.jpg" alt="课程信息">
                            <h4>黑马程序员成就it黑马</h4>
                            <div class="info">
                                <span>高级</span>:11400人学习
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

我的解释，只是针对代码结构来映射到界面的，如果读者是刚接触的话，建议去bilibili搜索pink老师，哪里有详细的过程和开发细节。