App下载
APP二维码

扫码下载编程狮APP

实例代码( Tip: 登录后体验更佳 )
运行代码 
<!DOCTYPE html>
<html lang="en">
<title>编程狮(w3cschool.cn)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3.css">
<body>
    <nav class="w3-sidebar w3-bar-block w3-black w3-card w3-large" style="display:none" id="mySidebar">
      <a href="javascript:void(0)" onclick="w3_close()" 
      class="w3-button w3-black w3-right">&times;</a><br>
      <a class="w3-bar-item w3-button" href="#">链接 1</a>
      <a class="w3-bar-item w3-button" href="#">链接 2</a>
      <a class="w3-bar-item w3-button" href="#">链接 3</a>
    </nav>
    <header class="w3-light-grey">
      <button class="w3-button w3-light-grey w3-xxlarge" onclick="w3_open()">&#9776;</button>
      <div class="w3-container">
      <h1 class="w3-jumbo">我的第一个W3.CSS网站!</h1>
      <p class="w3-xlarge">这个网站会随着我们的增加而增长 ...</p>
      </div>
    </header>
    
    <div class="w3-row-padding">
      <div class="w3-quarter">
        <p>最快的脚步不是跨越，而是继续；最慢的步伐不是缓慢，而是徘徊；最好的道路不是大道，而是坦荡；最险的道路不是陡坡，而是陷阱；最大的幸福不是得到，而是拥有.</p>
      </div>
      <div class="w3-half">        
      <p><strong>在这个世界上取得成就的人，都努力去寻找他们想要的机会，如果找不到机会，他们便自己创造机会.</strong></p>
      </div>
      <div class="w3-quarter">        
        <p>在大屏幕上，内容将显示为三列布局。在一个小屏幕上，内容会自动调整为单列。调整浏览器窗口的大小以查看效果.</p>
      </div>
    </div>
    
    <footer class="w3-container w3-light-grey">
      <p>这是一个页脚</p>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
运行结果
PC端 手机端 平板端