引言

任務(wù)

設(shè)計某個公司/社團的網(wǎng)站主頁，有介紹、新聞、以及其他的展示

環(huán)境

windows10
VisualStudio2019()
Node.js
bootstrap
Vue
google瀏覽器

安裝bootstrap和Vue的教程

安裝bootstrap
安裝Vue

具體過程

在<head>中鏈接bootstrap和Vue的庫

<!--Bootstrap--> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" >
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> 
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/bootstrap-tab.js"></script> 
<!--Vue--> 
<script type="text/javascript" src="JS/vue.min.js"></script>

用Bootstrap的顏色設(shè)定背景和文字顏色(Bootstrap顏色教程)

<body class="bg-dark text-white">

頭部用Bootstrap的Jumbotron，并設(shè)置背景圖片固定 (教程)

<!--HTML-->
<div class="jumbotron jumbotron-fluid text-center my-jumb text-dark row justify-content-center">
  <div class="align-self-center main-tittle">
    <h1 class="display-3 font-weight-bold">北京網(wǎng)元圣唐娛樂科技有限公司</h1>
    <br>
    <h3 class="display-4 font-weight-bold">用快樂的方式傳承中國文化</h3>
  </div>
</div>

/*CSS*/
.my-jumb {
  background-color: rgba(216, 58, 42, 1.00);
  margin-bottom: 0;
  background-image: url("../image/bg.jpg");
  background-attachment:fixed;
  height: 750px;
}
.main-tittle {
  color: rgba(216, 58, 42, 1.00);
}

效果圖

導(dǎo)航欄用Bootstrap4 導(dǎo)航欄，加一個下拉框（Bootstrap4 導(dǎo)航欄教程）

<!--HTML-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark my-nav"> 
  <!-- Brand/logo --> 
  <a class="navbar-brand" href="#"><img src="image/logo-wy-small.png" width="194" height="47" alt=""/></a> 
  <!-- Links -->
  <ul class="navbar-nav text-white my-nav-inner">
    <li class="nav-item"> <a class="nav-link" href="#">首頁</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">新聞</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">游戲</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">影視</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">衍生</a>
    <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">商城</a>
      <div class="dropdown-menu"> <a class="dropdown-item" href="#">官方商城</a> <a class="dropdown-item" href="#">淘寶商城</a> </div>
    </li>
    </li>
  </ul>
</nav>

/*CSS*/
.my-nav {
  margin-bottom: 50px;
}
.my-nav-inner {
  font-size: 20px;
  font-weight: bold;
}

效果圖

公司介紹部分使用了可切換的選項卡（Vue教程）

<!--HTML-->
<div id="tab" class="container introduce">
  <div class="tab-tit d-flex justify-content-center mb-3"> 
    <!--點擊設(shè)置curId的值  如果curId等于0，第一個a添加cur類名，如果curId等于1，第二個a添加cur類名，以此類推。添加了cur類名，a就會改變樣式 @click,:class ,v-show這三個是vue常用的指令或添加事件的方式--> 
    <a @click="curId=0" v-bind:class=" {'tab-tit-a':true, 'cur':curId==0}">總公司介紹</a> <a @click="curId=1" v-bind:class="{'tab-tit-a':true, 'cur':curId==1}">公司領(lǐng)導(dǎo)人</a> <a @click="curId=2" v-bind:class="{'tab-tit-a':true, 'cur':curId==2}">子公司介紹</a> </div>
  <div class="tab-con"> 
    <!--根據(jù)curId的值顯示div,如果curId等于0，第一個div顯示，其它三個div不顯示。如果curId等于1，第二個div顯示，其它三個div不顯示。以此類推-->
    <div v-if="curId==0">
      <h2 class="text-center"><img src="image/logo-black.png" width="135" height="35" alt=""/></h2>
      <br>
      <p><b>&emsp;&emsp;北京網(wǎng)元圣唐娛樂科技有限公司</b>成立于2009年9月，以發(fā)展文化為核心的泛娛樂綜合業(yè)務(wù)為戰(zhàn)略目標，以單機游戲為起點，研發(fā)時長制網(wǎng)絡(luò)游戲為核心，發(fā)展新興的移動端游戲為重要方向.</p>
      <br>
      <p>　　 旗下?lián)碛猩虾T龍信息科技有限公司、北京九鳳信息科技有限公司、北京翔躍信息科技有限公司等精湛、高水平的研發(fā)團隊，和專業(yè)、高效的運營團隊，以及泛娛樂文化發(fā)展的北京呈祥影視文化傳媒有限公司、河北推趣世紀信息技術(shù)有限公司。網(wǎng)元圣唐及旗下五家全資子公司搭建了完善的自主研發(fā)及運營一體化運作體系。</p>
      <br>
      <p>　　 公司以弘揚中華文化為己任，用快樂的方式傳承中國文化。</p>
      <br>
      <p>　　 現(xiàn)網(wǎng)元圣唐已打造出核心品牌《古劍奇譚》，最新品牌《神舞幻想》首部單機游戲作品也已上市推出，將為國產(chǎn)泛娛樂文化品牌注入新鮮血液和活力。</p>
      <br>
      <p>　　公司使命：用快樂的方式傳承中國文化</p>
      <p>　　公司愿景：以卓越的游戲體驗，將中國文化與世界聯(lián)結(jié)</p>
      <br>
      <p>　　 網(wǎng)元圣唐永遠致力于打造經(jīng)典游戲作品，并以此作為載體，賦予用戶最優(yōu)質(zhì)的文化體驗，傳承與弘揚中華優(yōu)秀傳統(tǒng)文化，推動中國元素走向世界。</p>
    </div>
    <div v-if="curId==1" class="d-flex mb-3">
      <div class="p-2 flex-fill"> <img src="image/Meng.jpg" width="280" height="409" alt=""/> </div>
      <div class="p-2 flex-fill">
        <h1 class="display-3">孟憲明</h1>
        <h1>網(wǎng)元圣唐CEO</h1>
        <p>《古劍奇譚》、《神舞幻想》兩大品牌創(chuàng)立者 </p>
        <p>投資成立北京網(wǎng)元圣唐娛樂科技有限公司<br>
          中國文化創(chuàng)意產(chǎn)業(yè)重要領(lǐng)軍人物，被粉絲親切稱為“老孟”。</p>
      </div>
    </div>
    <div v-if="curId==2">
      <article class="my-article">
        <h2 class="text-center"><img src="image/ZhuLong.jpg" width="192" height="76" alt=""/></h2>
        <p><b>上海燭龍信息科技有限公司</b>（Aurogon Info&amp;Tech (Shanghai) Co., Ltd.）是游戲軟件業(yè)內(nèi)資深人士所組建的游戲研發(fā)公司，于2007年在上海浦東正式成立。上海燭龍立志于民族游戲精品的研發(fā)，力求打造最好的中文RPG游戲，樹立華人次世代游戲的典范。以通過游戲這種方式弘揚中華文化，并以此為展示自己理念的渠道。目前，燭龍團隊正有條不紊地推進《古劍奇譚》品牌系列產(chǎn)品研發(fā)，持續(xù)雙向發(fā)展單機與網(wǎng)游作品，更多方位鋪展屬于該品牌的小說、電影、電視劇、動畫等。上海燭龍將秉承務(wù)實的態(tài)度去了解玩家的需求，做出包含中國、仙俠、古劍、文化等等具有獨特特色的游戲。不分年齡、不分國籍、不分地域——燭龍將通過不懈的努力，使全球的游戲玩家都能感受到華人民族游戲帶來的健康、快樂與文化內(nèi)涵！</p>
      </article>
      <article class="my-article">
        <h2 class="text-center"><img src="image/JiuFeng.jpg" width="183" height="119" alt=""/></h2>
        <p><b>北京九鳳信息科技有限公司</b>是集合中國內(nèi)地與臺灣地區(qū)游戲軟件業(yè)內(nèi)資深人士所組建的游戲研發(fā)公司，團隊包含多名曾參與《古劍奇譚》、《使命召喚》、《幻想三國志》、《仙劍奇?zhèn)b傳》、《軒轅劍》、《明星志愿》等系列作品的核心主創(chuàng)人員。九鳳信息科技堅持自制優(yōu)質(zhì)游戲路線，攜手國際知名的“虛幻4”游戲開發(fā)引擎、打造華人次世代游戲，創(chuàng)造新一代華人經(jīng)典游戲品牌，同時產(chǎn)品發(fā)行部分也將不限于PC平臺，包含國際級家用游戲機與新興智能電視游戲、移動端平臺，都將是九鳳信息科技即將涉足的領(lǐng)域。</p>
      </article>
    </div>
  </div>
</div>

/*CSS*/
.introduce {
  margin-bottom: 50px;
}
#tab {
  margin: 0 auto;
}
.tab-tit {
  font-size: 0;
  width: 100%;
    background-color:rgba(255,255,255,1.00);
    color: rgba(0,0,0,1.00);
}
.tab-tit-a{
  display: inline-block;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  width: 25%;
  text-align: center;
  background: #FFFFFF;
  color: #333;
  text-decoration: none;
  border-bottom: solid 1px rgba(158,158,158,1.00)
}
.cur {
  color: #D83A2A;
  border-bottom: solid 5px rgba(216,58,42,1.00);
}

.tab-con{
    margin-top: -16px;
  margin-bottom: 50px;
}
.tab-con div {
  padding: 50px;
  background-color: white;
  color: black;
}

//JS
var tab = new Vue({
        el: '#tab',
        data: {
            curId: 0
        },
        computed: {},
        methods: {},
        mounted: function () {
        }
    })

效果圖

新聞部分用了Bootstrap的輪播圖(輪播圖教程)

效果圖

<!--HTML-->
<div class="container news">
  <div id="demo" class="carousel slide" data-ride="carousel"> 
    <!-- 指示符 -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    
    <!-- 輪播圖片 -->
    <div class="news-container">
      <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image/news1.jpg" class="img-fluid" alt=""/>
          <div class="carousel-caption">
            <h3>童真六一，還璧歡歌！</h3>
            <p>猜拳換激萌糖人和鴨鴨表情包</p>
          </div>
        </div>
        <div class="carousel-item"> <img src="image/news2.jpg" class="img-fluid" alt=""/>
          <div class="carousel-caption">
            <h3>梨雪別春暮，夏始流螢飛</h3>
            <p>初夏主題外裝新品展，收集套裝贈永久花環(huán)頭飾！</p>
          </div>
        </div>
        <div class="carousel-item"> <img src="image/news3.jpg" alt="" class="img-fluid">
          <div class="carousel-caption text-dark">
            <h3>天予風(fēng)流——《古劍奇譚三》原聲音樂集上線</h3>
            <p>音樂大師傾力打造，聆聽壯闊的東方史詩</p>
          </div>
        </div>
      </div>
      
      <!-- 左右切換按鈕 --> 
      <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div>
  </div>
</div>

/*CSS*/
.news {
  margin-bottom: 50px;
}

熱門游戲使用了Bootstrap的Flex布局，五張圖片總是剛好排滿網(wǎng)頁的寬度（Flex布局教程）

效果圖

<!--HTML-->
<div class="games d-flex justify-content-center mb-3">
  <div class="p-2 bg-dark text-white">
    <h2>&emsp;熱門游戲&emsp;</h2>
  </div>
</div>
<div class="games text-center">
  <div class="d-flex d-inline-flex mb-3">
<div class="p-2">
    <img src="image/gjqt1.jpg" class="img-fluid flex-fill" alt="" style=""/> 
    </div>
<div class="p-2">
      <img src="image/gjqt2.jpg" class="img-fluid p-2 flex-fill" alt=""/>
      </div>
    
<div class="p-2">
      <img src="image/gjqt3.jpg" class="img-fluid p-2 flex-fill" alt=""/> 
      </div>
<div class="p-2">
      <img src="image/gjqtwlb.jpg" class="img-fluid p-2 flex-fill" alt=""/>
     </div>
<div class="p-2">
      <img src="image/swhx.jpg" class="img-fluid p-2 flex-fill" alt=""/> 
    </div>
</div>
</div>

/*CSS*/
.games {
  background-color: rgba(216, 58, 42, 1.00);
  width: 100%;
  margin-bottom: 50px;
}
.games img {
  padding: 0;
}

頁腳使用了Bootstrap4 網(wǎng)格系統(tǒng)，分了4列（Bootstrap4 網(wǎng)格系統(tǒng)教程）

效果圖

<!--HTML-->
<footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                <img class="img-fluid" src="image/logo-wy-small.png" alt=""/>     
                </div>
                
                <div class="col-sm-2">
                    <ul class="list-group">
                      <a  target="_blank">
                        關(guān)于我們</a>
                      <a  target="_blank">商務(wù)合作</a>
                      <a  target="_blank">加入我們</a>
                      <a  target="_blank">法律聲明</a>
                      <a  target="_blank">聯(lián)系我們</a>
                      <a  target="_blank">家長監(jiān)護</a>
                    </ul>
                </div>
                <div class="col-sm-4">
                    健康游戲忠告：抵制不良游戲 拒絕盜版游戲 注意自我保護 謹防受騙上當(dāng) 適度游戲益腦 沉迷游戲傷身 合理安排時間 享受健康生活
                    </div>
                <div class="col-sm-4">
                  <p>許可證： （總）網(wǎng)出證（京）字第126號 | 京網(wǎng)文 【2018】9188-778號 | 京ICP證090571號 | 字第直090145號</p>
                  <p>營業(yè)執(zhí)照：<a  target="_blank">91110107692327337F</a></p>
                    <p>備案號： <a  target="_blank">京ICP備10014416號-5 </a>| 京公網(wǎng)安備11010502035187號</p>
                </div>
                
                
            </div>
        </div>
    </footer><!--頁腳結(jié)束-->

/*CSS*/
footer {
    color: #989898;
    font-size: 14px;
    padding: 20px;
}
ul.unstyled {
    list-style: none;
    padding: 0;
}
footer h6 {
    color: white;
}
footer a{
    color: white;
}
footer a:hover{
    color: rgba(216,58,42,1.00);
    text-decoration: none;
}

總結(jié)

Bootstrap的組件很好用，可以省去寫大量CSS的麻煩，但是默認樣式并不適合所有的風(fēng)格，在默認樣式的基礎(chǔ)上修改會有點麻煩。
Vue比Bootstrap的功能更基礎(chǔ)，但是應(yīng)用會更廣泛
引入JS文件要放在<body>的末尾
Bootstrap個版本不兼容，必須根據(jù)安裝的版本來使用Bootstra
CSS也能實現(xiàn)簡單的動畫

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

作業(yè)8：Javascript編程訓(xùn)練2

作業(yè)8：Javascript編程訓(xùn)練2

引言

任務(wù)

環(huán)境

安裝bootstrap和Vue的教程

具體過程

總結(jié)

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

作業(yè)8：Javascript編程訓(xùn)練2

引言

任務(wù)

環(huán)境

安裝bootstrap和Vue的教程

具體過程

總結(jié)

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av