慕课网

手把手带你前端快速入门

最热最新

慕尼黑0091916 02:29

js是网络的样式

查看全部

0 采集收起来源：前端的三大核心技能
2025-08-04
慕尼黑0091916 01:31

CSS是层叠样式表

查看全部

0 采集收起来源：前端的三大核心技能
2025-08-04
慕尼黑0091916 01:20

html表示的是文字

查看全部

0 采集收起来源：前端的三大核心技能
2025-08-04
慕尼黑0091916 04:01

jquery浏览器使用最广

查看全部

0 采集收起来源：前端的今生来世
2025-08-04
慕尼黑0091916 03:12

前端不好就业，本科学历占百分之五十多，大专占百分之二十多，得坚持学

查看全部

0 采集收起来源：前端的今生来世
2025-08-04
慕勒7205155 13:24

表示在1.jpg路径在当前文件夹外面一层

查看全部

0 采集收起来源：.理解img标签的作用和含义
2025-07-18
初夏初雪 06:44
```
<! DOCTYPE html>
```
查看全部

0 采集收起来源：初体验-搭建html 网页初始化标签 v0.1
2025-04-15

慕粉2038322838 01:41

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 基础样式 */
        .banner-container {
            position: relative;
            width: 1200px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }

        /* 图片列表 */
        .banner-list {
            display: flex;
            transition: transform 0.5s ease;
            width: 6000px; /* 单张图片宽度1200×5张 */
        }

        .banner-item {
            width: 1200px;
            height: 400px;
            flex-shrink: 0;
        }

        /* 导航圆点 */
        .dot-nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .dot-item {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: background 0.3s;
        }

        .dot-item.active  {
            background: #fff;
        }

        /* 箭头按钮 */
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.3);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .banner-container:hover .arrow {
            opacity: 1;
        }

        .arrow.prev  { left: 20px; }
        .arrow.next  { right: 20px; }
    </style>
</head>
<body>
    <div class="banner-container">
        <div class="banner-list">
            <img src="img1.jpg"  class="banner-item">
            <img src="img2.jpg"  class="banner-item">
            <img src="img3.jpg"  class="banner-item">
            <img src="img4.jpg"  class="banner-item">
            <img src="img5.jpg"  class="banner-item">
        </div>
        
        <!-- 导航箭头 -->
        <div class="arrow prev">‹</div>
        <div class="arrow next">›</div>
        
        <!-- 导航圆点 -->
        <div class="dot-nav"></div>
    </div>

    <script>
        const banner = {
            container: document.querySelector('.banner-container'), 
            list: document.querySelector('.banner-list'), 
            items: document.querySelectorAll('.banner-item'), 
            currentIndex: 0,
            timer: null,
            
            init() {
                // 生成导航圆点
                const dotNav = document.querySelector('.dot-nav'); 
                this.items.forEach((_,  index) => {
                    const dot = document.createElement('div'); 
                    dot.className  = `dot-item${index === 0 ? ' active' : ''}`;
                    dot.addEventListener('click',  () => this.goTo(index)); 
                    dotNav.appendChild(dot); 
                });

                // 箭头事件
                document.querySelector('.arrow.prev').addEventListener('click',  () => this.prev()); 
                document.querySelector('.arrow.next').addEventListener('click',  () => this.next()); 

                // 自动播放
                this.autoPlay(); 
                
                // 悬停暂停
                this.container.addEventListener('mouseenter',  () => clearInterval(this.timer)); 
                this.container.addEventListener('mouseleave',  () => this.autoPlay()); 
            },

            updatePosition() {
                this.list.style.transform  = `translateX(-${this.currentIndex  * 1200}px)`;
                document.querySelectorAll('.dot-item').forEach((dot,  index) => {
                    dot.classList.toggle('active',  index === this.currentIndex); 
                });
            },

            prev() {
                this.currentIndex  = (this.currentIndex  - 1 + this.items.length)  % this.items.length; 
                this.updatePosition(); 
            },

            next() {
                this.currentIndex  = (this.currentIndex  + 1) % this.items.length; 
                this.updatePosition(); 
            },

            goTo(index) {
                this.currentIndex  = index;
                this.updatePosition(); 
            },

            autoPlay() {
                this.timer  = setInterval(() => this.next(),  3000);
            }
        };

        banner.init(); 
    </script>
</body>
</html>

查看全部

0 采集收起来源：.案例分析：QQ邮箱登陆框案例分析与思路-

2025-03-16

刘帅1339941 00:15

网页，app，组成

查看全部

0 采集收起来源：前端的三大核心技能
2025-03-02
韩本洋_uyLVX2 03:16

前端的三大核心技能
前端是由三个语言组成，分别是HTML、CSS、JavaScript
前端后期的框架或库只是同上述内容封装而来，是为了更方便的操作这三个语言而已。
1 . HTML的全称是超文本标记语言。我们可以使用这些标签说明文字、图像、音视频等等。
HTML的的官方叫法为“标签”
简单来说，HTML更像是房子的架构，做好HTML后我们就相当于在了一个毛坯房。
2 . CSS又叫层叠样式表，可以静态地修饰网面，让网页更有活力更好看。
简单来说，CSS更像给房子装修好买了家具，让房子更漂亮了.
3 . JavaScript (简称"JS")是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，他主要负责和使用者与网面交互使用的。比如按钮的触碰效果、导航栏轮播等效果。
简单来说，JS更像房子的智能家居系统，让用户和房子能够互动。

查看全部

0 采集收起来源：前端的三大核心技能
2024-12-14
HUANGMEIMEI 05:29

<span>輸入帳號密碼隔前面的文字

查看全部

0 采集收起来源：第五步：span标签实现QQ邮箱内置文字-
2024-11-21
HUANGMEIMEI 06:42

input需要登入介面而使用的標籤
<input type(類型)="例如:帳號/密碼/生日/電話"/>

查看全部

0 采集收起来源：第一步：input标签实现QQ邮箱输入框
2024-11-20
HUANGMEIMEI 05:34

<ol>數字列表

查看全部

0 采集收起来源：-理解ol标签的作用和含义
2024-11-20
HUANGMEIMEI 08:19

<ul>大列表
<il>小列表

查看全部

0 采集收起来源：.理解ul标签的作用和含义
2024-11-20
HUANGMEIMEI 07:06

div分割作用

查看全部

0 采集收起来源：理解div标签的作用和含义
2024-11-20
慕标5234759 06:26

input标签有六种，输入框

查看全部

0 采集收起来源：第一步：input标签实现QQ邮箱输入框
2024-11-18
HUANGMEIMEI 16:47
1. <!DOCTYPE(告知瀏覽器這是甚麼) 後方帶入html之類的>
2. 有頭就有尾基本要有以下三大標籤
<html></html>甚麼編碼
<head></head>網頁的頭
<body></body>網頁的身體
三大標籤順序為
<html>
    <head> </head>
    <body></body>
</html>
    3. <meta>裡面charset(網頁編碼解析器)="UTF-8(中文)"
    4.<title>網頁標題</title>
查看全部

0 采集收起来源：初体验-搭建html 网页初始化标签 v0.1
2024-11-11
慕数据3031255 00:02

前端人员是制作小程序，app的

查看全部

0 采集收起来源：带你走进前端的世界
2024-08-29

0/150

提交

取消

开始学习

课程须知: 1.具备电脑基础使用 2.课程学习多动手练

老师告诉你能学到什么？: 1.了解前端是什么，以及发展 2.学会前端开发环境搭建 3.学会基础的HTML标签 4.实战两个案例HTML骨架搭建