5.15.2，HTML代码在线实时编辑、实时预览

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

            
            <!DOCTYPE html>
<html lang="en">
<head>
    <style>
     header{
       background:#222;
       
     }
      header.wrap{
        height:80px;
        diaplay:flex;
      }
      header.wrap.logo img{
        margin-top:20px;
        width:170px;
      }
      header nave{
        display:flex;
        font-size:18px;
      }
      header nav a{
        coler:#fff
        flex:1;
        transition:all 500ms;
        display；flex;
        justify-content:center;
      }
      header nav a:hover{
        color:#fff;
        background:#f85c37
      }
      header nav a :first-child{
        background:#f85c37
      }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="logo"><img src="https://cloud-static.com/gallery/741718052699_.pic.jpg" alt=""></div>
        <nav>
            <a href="#">Home</a>
            <a href="#">Timer</a>
            <a href="#">News</a>
            <a href="#">Evevt</a>
            <a href="#">Ticket</a>
            <a href="#">Location</a>
        </nav>
    </header>
    <main></main>
    <footer></footer>

</body>
</html>

编辑器加载中

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            body {
  background-color: #fefefe;
}

.title {
  margin-top: 95px;
  text-align: center;
}

.desc {
  color: #777;
  text-align: center;
}

.icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 30px auto;
}

编辑器加载中

index.js

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

编辑器加载中