W3.CSS Templates（模板）

<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">

  <a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">樂(lè)隊(duì)</a>

  <a href="#tour" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">巡回演出</a>

  <a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">聯(lián)系</a>

  <a href="#" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">商品</a>

</div>

<div class="w3-top">

  <div class="w3-bar w3-white w3-padding w3-card" style="letter-spacing:4px;">

    <a href="#home" class="w3-bar-item w3-button">餐飲美食</a>

    <!-- Right-sided navbar links. Hide them on small screens -->

    <div class="w3-right w3-hide-small">

      <a href="#about" class="w3-bar-item w3-button">關(guān)于</a>

      <a href="#menu" class="w3-bar-item w3-button">菜單</a>

      <a href="#contact" class="w3-bar-item w3-button">聯(lián)系</a>

    </div>

  </div>

</div>

<div class="w3-top">

  <div class="w3-bar w3-white w3-wide w3-padding w3-card">

    <a href="#home" class="w3-bar-item w3-button"><b>英國(guó)鐵路公司</b>架構(gòu)師</a>

    <!-- Float links to the right. Hide them on small screens -->

    <div class="w3-right w3-hide-small">

      <a href="#projects" class="w3-bar-item w3-button">項(xiàng)目</a>

      <a href="#about" class="w3-bar-item w3-button">關(guān)于</a>

      <a href="#contact" class="w3-bar-item w3-button">聯(lián)系</a>

    </div>

  </div>

</div>

  <div class="w3-bar" id="myNavbar">

    <a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">

      <i class="fa fa-bars"></i>

    </a>

    <a href="#home" class="w3-bar-item w3-button">主頁(yè)</a>

    <a href="#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> 關(guān)于</a>

    <a href="#portfolio" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> 作品集</a>

    <a href="#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> 聯(lián)系電話</a>

    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red">

      <i class="fa fa-search"></i>

    </a>

  </div>

  <img src="https://atts.w3cschool.cn/avatar_g.jpg" style="width:100%">

    <div class="w3-container w3-white">

      <h4><b>我的名字</b></h4>

      <p>只有我，我自己和我，在探索未知的宇宙。我有一顆愛(ài)的心，對(duì)lorem ipsum和mauris neque quam的博客很感興趣。我想和你分享我的世界.</p>

    </div>

  </div>

<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">

  <a href="javascript:void(0)" onclick="w3_close()"

  class="w3-bar-item w3-button">關(guān)閉菜單</a>

  <a href="#food" onclick="w3_close()" class="w3-bar-item w3-button">食物</a>

  <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">關(guān)于</a>

</nav>

  <header class="w3-container w3-center w3-padding-48 w3-white">

    <h1 class="w3-xxxlarge"><b>JANE BLOGLIFE</b></h1>

    <h6>歡迎來(lái)到<span class="w3-tag">簡(jiǎn)的世界</span>博客</h6>

  </header>

<header class="bgimg w3-display-container w3-grayscale-min" id="home">

  <div class="w3-display-bottomleft w3-center w3-padding-large w3-hide-small">

    <span class="w3-tag">營(yíng)業(yè)時(shí)間為早上6點(diǎn)至下午5點(diǎn)</span>

  </div>

  <div class="w3-display-middle w3-center">

    <span class="w3-text-white" style="font-size:90px"><br>咖啡</span>

  </div>

  <div class="w3-display-bottomright w3-center w3-padding-large">

    <span class="w3-text-white">第15街道</span>

  </div>

</header>

<div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">

    <a href="#" class="w3-bar-item w3-button w3-light-grey"><i class="fa fa-caret-right w3-margin-right"></i>緊身衣</a>

    <a href="#" class="w3-bar-item w3-button">寬松褲</a>

    <a href="#" class="w3-bar-item w3-button">喇叭褲</a>

    <a href="#" class="w3-bar-item w3-button">直筒褲</a>

</div>

<p class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal">設(shè)計(jì)師</p>

<p class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal">倫敦, 英國(guó)</p>

<p class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal">ex@mail.com</p>

<p class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal">1224435534</p>

<div class="w3-display-middle">

    <h1 class="w3-jumbo w3-animate-top">馬上就來(lái)</h1>

    <hr class="w3-border-grey" style="margin:auto;width:40%">

    <p class="w3-large w3-center">還剩35天</p>

</div>

<div class="w3-bottom w3-hide-small">

  <div class="w3-bar w3-white w3-center w3-padding w3-opacity-min w3-hover-opacity-off">

    <a href="#home" style="width:25%" class="w3-bar-item w3-button">主頁(yè)</a>

    <a href="#us" style="width:25%" class="w3-bar-item w3-button">Jane & John</a>

    <a href="#wedding" style="width:25%" class="w3-bar-item w3-button">婚禮</a>

    <a href="#rsvp" style="width:25%" class="w3-bar-item w3-button w3-hover-black">請(qǐng)?zhí)?lt;/a>

  </div>

</div>

<div class="w3-third">

   <img src="https://atts.w3cschool.cn/rocks.jpg" style="width:100%">

   <img src="https://atts.w3cschool.cn/img_sound.jpg" style="width:100%">

   <img src="https://atts.w3cschool.cn/img_woods.jpg" style="width:100%">

   <img src="https://atts.w3cschool.cn/rock.jpg" style="width:100%">

   <img src="https://atts.w3cschool.cn/img_nature.jpg" style="width:100%">

   <img src="https://atts.w3cschool.cn/mist.jpg" style="width:100%">

</div>

<div class="w3-padding-32">   

  <div class="w3-bar w3-border">

    <a href="#" class="w3-bar-item w3-button">主頁(yè)</a>

    <a href="#" class="w3-bar-item w3-button w3-light-grey">作品集</a>

    <a href="#" class="w3-bar-item w3-button">聯(lián)系</a>

    <a href="#" class="w3-bar-item w3-button w3-hide-small">婚禮</a>

  </div>

</div>

<div class="w3-display-middle w3-padding-large w3-border w3-wide w3-text-light-grey w3-center">

   <h1 class="w3-hide-medium w3-hide-small w3-xxxlarge">JANE DOE</h1>

   <h5 class="w3-hide-large" style="white-space:nowrap">JANE DOE</h5>

   <h3 class="w3-hide-medium w3-hide-small">攝影師</h3>

</div>

<div class="w3-third w3-container w3-margin-bottom">

   <img src="https://atts.w3cschool.cn/img_mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">

   <div class="w3-container w3-white">

     <p><b>雷鋒</b></p>

     <p>人的生命是有限的，可是為人民服務(wù)是無(wú)限的，我要把有限的生命投入到無(wú)限的為人民服務(wù)之中去！</p>

   </div>

</div>

<nav class="w3-sidebar w3-bar-block w3-white w3-animate-left w3-text-grey w3-collapse w3-top w3-center" style="z-index:3;width:300px;font-weight:bold" id="mySidebar"><br>

  <h3 class="w3-padding-64 w3-center"><b>一些<br>名字</b></h3>

  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-padding w3-hide-large">關(guān)閉</a>

  <a href="#" onclick="w3_close()" class="w3-bar-item w3-button">作品集</a> 

  <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">關(guān)于我</a> 

  <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">聯(lián)系</a>

</nav>

<nav class="w3-sidebar w3-bar-block w3-black w3-animate-right w3-top w3-text-light-grey w3-large" style="z-index:3;width:250px;font-weight:bold;display:none;right:0;" id="mySidebar">

  <a href="javascript:void()" onclick="w3_close()" class="w3-bar-item w3-button w3-center w3-padding-32">關(guān)閉</a> 

  <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-center w3-padding-16">作品集</a> 

  <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button w3-center w3-padding-16">關(guān)于我</a> 

  <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-center w3-padding-16">聯(lián)系</a>

</nav>

 <header class="w3-container w3-padding-32 w3-center w3-black" id="home">

    <h1 class="w3-jumbo"><span class="w3-hide-small">I'm</span> John Doe.</h1>

    <p>攝影師和網(wǎng)頁(yè)設(shè)計(jì)師。</p>

    <img src="https://atts.w3cschool.cn/man_smoke.jpg" alt="boy" class="w3-image" width="992" height="1108">

  </header>

<div class="w3-bar-block w3-center">

    <a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">主頁(yè)</a>

    <a href="#portfolio" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">作品集</a>

    <a href="#about" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">關(guān)于</a>

    <a href="#contact" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">聯(lián)系</a>

</div>

<div class="w3-bar-block">

    <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">主頁(yè)</a> 

    <a href="#showcase" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">陳列柜</a> 

    <a href="#services" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">服務(wù)</a> 

    <a href="#designers" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">設(shè)計(jì)師</a> 

    <a href="#packages" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">包裹</a> 

    <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">聯(lián)系</a>

</div>

<div class="w3-display-topleft w3-container w3-xlarge">

    <p><button onclick="document.getElementById('menu').style.display='block'" class="w3-button w3-black">菜單</button></p>

    <p><button onclick="document.getElementById('contact').style.display='block'" class="w3-button w3-black">預(yù)定</button></p>

</div>

<div class="w3-display-middle w3-center">

   <span class="w3-text-white w3-hide-small" style="font-size:100px">薄的<br>硬皮披薩</span>

   <span class="w3-text-white w3-hide-large w3-hide-medium" style="font-size:60px"><b>薄的<br>硬皮披薩</b></span>

   <p><a href="#menu" class="w3-button w3-xxlarge w3-black">讓我看看菜單</a></p>

</div>

<header class="w3-container w3-red w3-center" style="padding:128px 16px">

  <h1 class="w3-margin w3-jumbo">開始頁(yè)面</h1>

  <p class="w3-xlarge">模板由w3.css</p>

  <button class="w3-button w3-black w3-padding-large w3-large w3-margin-top">開始</button>

</header>

<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">

  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">關(guān)閉 ×</a>

  <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">關(guān)于</a>

  <a href="#team" onclick="w3_close()" class="w3-bar-item w3-button">團(tuán)隊(duì)</a>

  <a href="#work" onclick="w3_close()" class="w3-bar-item w3-button">工作</a>

  <a href="#pricing" onclick="w3_close()" class="w3-bar-item w3-button">定價(jià)</a>

  <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">聯(lián)系</a>

</nav>

  <div class="mySlides w3-animate-opacity">

    <img class="w3-image" src="https://atts.w3cschool.cn/app2.jpg" alt="Image 2" style="min-width:500px" width="1500" height="1000">

    <div class="w3-display-left w3-padding w3-hide-small" style="width:35%">

      <div class="w3-black w3-opacity w3-hover-opacity-off w3-padding-large w3-round-large">

        <h1 class="w3-xlarge w3-text-red"><b>點(diǎn)擊!</b> 快速和容易</h1>

        <hr class="w3-opacity">

        <p>從數(shù)以千計(jì)的功能中選擇</p>

        <p><button class="w3-button w3-block w3-red w3-round" onclick="document.getElementById('download').style.display='block'">下載 <i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-windows"></i></button></p>

      </div>

    </div>

  </div>

<div class="w3-display-container mySlides">

    <img src="https://atts.w3cschool.cn/coffee.jpg" style="width:100%">

    <div class="w3-display-topleft w3-container w3-padding-32">

       <span class="w3-white w3-padding-large w3-animate-bottom">陶淵明</span>

    </div>

</div>

<div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium">

   <a href="#team" class="w3-bar-item w3-button">團(tuán)隊(duì)</a>

   <a href="#work" class="w3-bar-item w3-button">工作</a>

   <a href="#pricing" class="w3-bar-item w3-button">價(jià)格</a>

   <a href="#contact" class="w3-bar-item w3-button">聯(lián)系</a>

   <a href="#" class="w3-bar-item w3-button">搜索</a>

</div>

<div class="w3-half">

    <img src="https://atts.w3cschool.cn/streetart.jpg" style="width:100%">

    <img src="https://atts.w3cschool.cn/streetart2.jpg" style="width:100%">

    <img src="https://atts.w3cschool.cn/streetart5.jpg" style="width:100%">

</div>

<div class="w3-row w3-padding-64">

   <div class="w3-twothird w3-container">

     <h1 class="w3-text-teal">標(biāo)題</h1>

     <p>你可以坐下來(lái)，奉獻(xiàn)你的快樂(lè)，就像一個(gè)剛開始工作的人.</p>

   </div>

   <div class="w3-third w3-container">

     <p class="w3-border w3-padding-large w3-padding-32 w3-center">廣告</p>

     <p class="w3-border w3-padding-large w3-padding-64 w3-center">廣告</p>

   </div>

</div>

<div class="w3-card w3-round w3-white">

   <div class="w3-container">

      <h4 class="w3-center">我的資料</h4>

      <p class="w3-center"><img src="/w3images/avatar3.png" class="w3-circle" style="height:106px;width:106px" alt="Avatar"></p>

      <hr>

      <p><i class="fa fa-pencil fa-fw w3-margin-right w3-text-theme"></i> 芝加哥, UI</p>

      <p><i class="fa fa-home fa-fw w3-margin-right w3-text-theme"></i> 倫敦, UK</p>

      <p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i> 4月1日, 1988</p>

      </div>

</div>

<div class="w3-col s8 w3-bar">

    <span>歡迎, <strong>Mike</strong></span><br>

    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>

    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-user"></i></a>

    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-cog"></i></a>

</div>

<div class="w3-bar-block">

    <a href="#apartment" class="w3-bar-item w3-button w3-padding-16">         <i class="fa fa-building"></i> 公寓</a>

    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding-16" onclick="document.getElementById('subscribe').style.display='block'"><i class="fa fa-rss"></i> Subscribe</a>

    <a href="#contact" class="w3-bar-item w3-button w3-padding-16"><i class="fa fa-envelope"></i> 聯(lián)系</a>

</div>

<div class="w3-bar w3-white w3-large">

  <a href="#" class="w3-bar-item w3-button w3-red w3-mobile"><i class="fa fa-bed w3-margin-right"></i>Logo</a>

  <a href="#rooms" class="w3-bar-item w3-button w3-mobile">房間</a>

  <a href="#about" class="w3-bar-item w3-button w3-mobile">關(guān)于</a>

  <a href="#contact" class="w3-bar-item w3-button w3-mobile">聯(lián)系</a>

  <a href="#contact" class="w3-bar-item w3-button w3-right w3-light-grey w3-mobile">現(xiàn)在就登記</a>

</div>

<div class="w3-bar w3-black">

    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Flight');"><i class="fa fa-plane w3-margin-right"></i>飛行</button>

    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Hotel');"><i class="fa fa-bed w3-margin-right"></i>旅館</button>

    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Car');"><i class="fa fa-car w3-margin-right"></i>租金</button>

 </div>

<div class="w3-half w3-container">

  <div class="w3-topbar w3-border-amber">

    <img src="https://atts.w3cschool.cn/cellphone.jpg" style="width:100%">

    <h2>漂亮的假期</h2>

    <p>用你的手機(jī)進(jìn)行完全休假控制.</p>

  </div>

</div>

<div class="w3-half w3-container w3-xlarge w3-text-grey">

  <p class="">我們組建設(shè)計(jì)團(tuán)隊(duì)

  - 我們把東西拆開，把它建得更好

  - 我們提供最好的解決方案</p>

  <p>InShock的意思是非常簡(jiǎn)單</p>

</div>

  <div class="w3-half w3-blue-grey w3-container" style="height:700px">

    <div class="w3-padding-64 w3-center">

      <h1>關(guān)于我</h1>

      <img src="https://atts.w3cschool.cn/img_avatar3.png" class="w3-margin w3-circle" alt="Person" style="width:50%">

      <div class="w3-left-align w3-padding-large">

        <p>路漫漫其修道遠(yuǎn)，吾將上下而求索?！?</p>

        <p>路漫漫其修道遠(yuǎn)，吾將上下而求索。——屈原.</p>

      </div>

    </div>

  </div>

<a href="#" class="w3-bar-item w3-button"><i class="fa fa-paper-plane w3-margin-right"></i>發(fā)送</a>

<a href="#" class="w3-bar-item w3-button"><i class="fa fa-hourglass-end w3-margin-right"></i>草稿</a>

<a href="#" class="w3-bar-item w3-button"><i class="fa fa-trash w3-margin-right"></i>垃圾</a>

<nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-center" style="display:none" id="mySidebar">

  <h1 class="w3-xxxlarge w3-text-theme">側(cè)邊導(dǎo)航欄</h1>

  <button class="w3-bar-item w3-button" onclick="w3_close()">Close <i class="fa fa-remove"></i></button>

  <a href="#" class="w3-bar-item w3-button">鏈接 1</a>

  <a href="#" class="w3-bar-item w3-button">鏈接 2</a>

  <a href="#" class="w3-bar-item w3-button">鏈接 3</a>

  <a href="#" class="w3-bar-item w3-button">鏈接 4</a>

</nav>